jquery - 使用 jQuery DataTables Editable 编辑多个值

Question

我正在使用jQuery DataTables Editable能够编辑表中的数据。

表格如下所示:

正如您所看到的，我有一列包含多个值，当单击此列时，我希望能够编辑所有字段，如下所示:

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

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', oTable) 选择它们

fiddle http://jsfiddle.net/GhgLW/2/