jquery + jeditable + 부트 스트랩을 사용하여 테이블에 편집 가능한 새 행을 추가하십시오.

Question

테스트를 통해 트릭을 수행 할 수 있지만 실제로는 좋은 해결책이 아닙니다. 다른 디스플레이에 jeditable + datatable이 필요합니다. 그래서 jeditable은 필수입니다. 내가 할 수있는 테이블 (ID, 유형, 전화, 기본값) JQuery와 + jeditable를 사용하기 위해 노력하고있어

:

1. 것은/행 추가 행을 제거
을 (발이 경우 & 3가 비어 제거) 새 행의
2. 편집 필드 1 &이 추가

HTML :

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> 
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> 
<script src="http://www.appelsiini.net/download/jquery.jeditable.mini.js"></script> 

<h4>Tél <button id="add-phone" class="btn btn-mini btn-primary" type="button"> + </button></h4> 
<table border="1" width="80%"> 
    <tr> 
     <th>id</th> 
     <th>Type</th> 
     <th>Tel</th> 
     <th></th> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td class="dblclick">mob</td> 
     <td class="dblclick">0000000</td> 
     <td><input type="radio" name="1-tel-default" id="1-tel-default-1" value="1" /></td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td class="dblclick">mob</td> 
     <td class="dblclick">0000000</td> 
     <td><input type="radio" name="1-tel-default" id="1-tel-default-2" value="1" /></td> 
    </tr> 
     <tr> 
     <td>3</td> 
     <td class="dblclick">mob</td> 
     <td class="dblclick">0000000</td> 
     <td><input type="radio" name="1-tel-default" id="1-tel-default-3" value="1" /></td> 
    </tr> 
</table> 

자바 스크립트 :

$(document).ready(function(){ 

    $(".dblclick").editable("http://www.appelsiini.net/projects/jeditable/php/echo.php", { 
     indicator : "Loading...", 
     submit: 'Ok', 
     cancel: 'Cancel', 
     tooltip : "Double-click for edit...", 
     event  : "dblclick", 
     style : "inherit" 
    }); 

    // trigger event when button is clicked 
    $("#add-phone").click(function() 
    { 
     //alert("click"); 

     // add new row to table using addTableRow function 
     var clone = $("#phonelist tbody tr:last") 
     .clone() 
     .find('td') 
     .text('Edit') 
     .end() 
     .insertAfter("#phonelist tbody tr:last"); 

     /*$('#phonelist tbody tr:last').after('<tr id="last" ><td class="dblclick">Editer</td><td class="dblclick">Editer</td><td><input type="radio" name="default" id="default-last" value="0"></td></tr>');*/ 

     // prevent button redirecting to new page 
     return false; 
    }); 

}); 

이 jsfiddle에 내 테스트 jeditable입니다 : 당신의 도움에 대한 http://jsfiddle.net/supersonique/ncHQ5/

감사합니다.

Answer 1

값이 3이면 행을 삭제하려면 콜백을 사용해보십시오. 이 함수에서 value는 POST " http://www.appelsiini.net/projects/jeditable/php/echo.php"의 반환 값입니다. 따라서 행을 삭제하려면 "삭제"를 반환하십시오. 또한 데이터베이스/데이터 저장소에서 삭제 작업을 수행해야합니다.

$(".dblclick").editable("http://www.appelsiini.net/projects/jeditable/php/echo.php", { 
    indicator : "Loading...", 
    submit: 'Ok', 
    cancel: 'Cancel', 
    tooltip : "Double-click for edit...", 
    event  : "dblclick", 
    style : "inherit", 
    callback: function(value, setting) { 
     if(value == "delete") $(this).parent().hide(); 
    } 
}); 

당신은 당신의 클릭 요소가 행 요소 대 얼마나 깊이 중첩에 따라() 함수를 사용 .parent의 수에 놀러 할 수 있습니다.

또한 jeditable을 사용할 새 행을 추가하는 경우 jeditable을 문서 준비에 바인딩하는 대신 문서를 클릭 할 때 바인딩하면 새롭게 추가 된 행을 클릭 할 때마다 편집 가능한 behavoir가 그들.

$(document).on('click', function() { 
    // your jeditable stuff here 
});