Question

我试图在具有以下结构的数据表上使用xeditable

<table id="example">
    <thead>
        <tr>
          <th>ID</th>
          <th>Type</th>
        </tr>
    </thead>
    <tbody>
        {% for r in records %}
        <tr>
            <td><a href="{{ r.link }}">{{ r.id }}</a></td>
            <td><a href="#" pk-data="{{ r.id }}" data-type="select" data-value="{{ r.type.id }}">{{ r.type.name }}</a></td>
        </tr>
        {% endfor %}
    </tbody>
</table>

示例情侣行最终看起来像这样：

<tr>
    <td><a href="http://example.com">ABC-123</a></td>
    <td><a href="#" pk-data="ABC-123" data-type="select" data-value="5">Things</a></td>
</tr>
<tr>
    <td><a href="http://example.com">XYZ-890</a></td>
    <td><a href="#" pk-data="XYZ-890" data-type="select" data-value="5">Things</a></td>
</tr>

我想使用xeditable使第二列可编辑。我有这样做的代码块

$.fn.editable.defaults.mode = 'inline';
$('#example.td a').editable({
    type: 'select',
    name: 'Type',
    title: 'Type',
    source: [
      {value: 0, text: 'Nothing'},
      {value: 1, text: 'Everything'},
      {value: 2, text: 'Something'},
      {value: 3, text: 'That Thing'},
      {value: 4, text: 'This Thing'},
      {value: 5, text: 'Things'}
    ]
});

这不起作用。我的控制台中没有出错。它没有做任何事情。没有弹出窗口，没有内联，没有。

我怀疑这是我('#example.td a')的结果。我的Javascript生锈了，但我相信这应该适用于两个列，对吗？如何才能将此选择仅应用于第二列？

我期待这样的事情（取自Demos，特别是Select, local array, custom display）

Expected

我提供了一个jsfiddle来帮助显示我的问题

Answer 1

一种方法是将class="second_td"添加到您的第二个<td>元素，并将您的选择器更改为('#example .second_td a')

Here is a working fiddle，我说您需要将class="second_td"添加到第二个<td>（而不是第二个td中的<a>标记

Answer 2

我只是想让你知道上面的解决方案很好......但是数据表搜索功能因为数据表行信息没有被更新而中断了我把它添加到上面的小提琴中，现在你可以在编辑一个字段之后过滤该新数据。有两种方法可以达到预期的效果：

重新创建数据表

$('#example .second_td a').on('save', function(e, params) {
    //recreate datatable
    $('#example').DataTable().destroy();
    $('#example').dataTable({
          "aaSorting": [[ 1, "desc" ]],
          "lengthMenu": [[50, 250, 500, 1000], [50, 250, 500, 1000]],
          "iDisplayLength": 250
        });
});

更新数据表中的单个单元格

$('#example .second_td a').on('save', function (e, params) {
    var $td = $(this).closest('td');
    $('#example')
        .DataTable()
        .cell($td)
        .data('<a href="#" pk-data="ABC-123" data-type="select" data-value="' + params.newValue + '" class="editable editable-click">' + $td.find(':selected').text() + '</a>'); 
});

如何在单个数据表列上启用xeditable？

2 个答案: