Использование 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)

Скрипка http://jsfiddle.net/GhgLW/2/