使用jQuery DataTables可编辑编辑多个值

Question

我使用jQuery DataTables Editable可以编辑表中的数据。

该表看起来像这样：

正如你可以看到我有多个值一列，在此列一下，当我想能够编辑所有字段是这样的：

是否可以自定义jQuery的数据表可编辑来处理这样的多个值吗？我还没有找到任何例子，也许你可以指出我正确的方向？

Answer 1

要做到这一点，你应该提供正确的标记。例如，你可以做这样的事情

HTML

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> 
    <thead> 
     <tr> 
     <th>Rendering engine</th> 

     <th>Browser</th> 

     <th>Platform(s)</th> 

     <th>Engine version</th> 

     <th>CSS grade</th> 
     </tr> 
    </thead> 

    <tbody> 
     <tr id="1" class="gradeX"> 
     <td>Trident</td> 

     <td>Internet Explorer 4.0</td> 

     <td>Win 95+</td> 

     <td class="center">4</td> 

     <td class="center"> 
       <div class='editable'>line 1</div> 
       <div class='editable'>Line 2</div> 
      </td> 
     </tr> 

     <tr id="2" class="gradeC"> 
     <td>Trident</td> 

     <td>Internet Explorer 5.0</td> 

     <td>Win 95+</td> 

     <td class="center">5</td> 

     <td class="center">    
      <div class='editable'>line 1</div> 
      <div class='editable'>Line 2</div> 
      </td> 
     </tr> 

     <tr id="3" class="gradeA"> 
     <td>Trident</td> 

     <td>Internet Explorer 5.5</td> 

     <td>Win 95+</td> 

     <td class="center">5.5</td> 

      <td class="center"> 
       <div class='editable'>line 1</div> 
       <div class='editable'>Line 2</div> 
      </td> 
     </tr> 
    </tbody> 
    </table> 

JS

var oTable = $('#example').dataTable(); 
$('td div.editable', oTable).editable('../examples_support/editable_ajax.php', { 
    "callback": function(sValue, y) { 
     var aPos = oTable.fnGetPosition(this); 
     oTable.fnUpdate(sValue, aPos[0], aPos[1]); 
    }, 
    "submitdata": function(value, settings) { 
     return { 
      "row_id": this.parentNode.getAttribute('id'), 
      "column": oTable.fnGetPosition(this)[2] 
     }; 
    }, 
    "height": "14px", 
    "width": "100%" 
}); 

注意，只有最后一列是可编辑的，我用了两个<div>与$（'TD DIV选择他们.editable'，o表）

小提琴http://jsfiddle.net/GhgLW/2/