Question

如何告诉jQuery tabledit行已更改？这些按钮仅为现有行生成，当我添加新行时（例如使用jQuery），表格按钮不会出现在新行中。我在tabledit代码中看到，有可能在视图和编辑模式之间切换（这可能对我有帮助），但是在创建tabledit之后以及行已经更改时不知道如何访问这些方法。

我的代码中的一小段代码：

$(document).ready(function(){ 
    $(‘#btn’).click(function(){ ... adding row, I need to update tabledit here }); 
    $(‘#table’).Tabledit(...parameters...); } 
});

tabledit

Answer 1

这是我能为你的情况提出的最佳解决方案。

我创建了一个＆＃34;添加＆＃34;按钮。注意 for-table属性，以便我可以找出稍后要添加的表格。

<button id='add' for-table='#example1'>Add Row</button>

然后我为＆＃34; Add＆＃34;创建了一个点击处理程序。按钮。

$("#add").click(function(e){
    var table = $(this).attr('for-table');  //get the target table selector
    var $tr = $(table + ">tbody>tr:last-child").clone(true, true);  //clone the last row
    var nextID = parseInt($tr.find("input.tabledit-identifier").val()) + 1; //get the ID and add one.
    $tr.find("input.tabledit-identifier").val(nextID);  //set the row identifier
    $tr.find("span.tabledit-identifier").text(nextID);  //set the row identifier
    $(table + ">tbody").append($tr);    //add the row to the table
    $tr.find(".tabledit-edit-button").click();  //pretend to click the edit button
    $tr.find("input:not([type=hidden]), select").val("");   //wipe out the inputs.
});

本质;

Deep Clone表格的最后一行。（复制数据和附加事件）
确定并设置row identifier。
添加新行。
自动点击Edit按钮。
清除所有输入并选择。

在我的有限测试中，这种技术似乎有效。

Answer 2

jQuery Tabledit应该在每次重新加载表时执行。请参阅此处给出的答案： refreshing Tabledit after pagination

这意味着每次您重新加载表时（例如，导航到新页面，刷新等），您都必须在未初始化表的页面上初始化Tabledit。问题在于无法知道Tabledit是否已在表上初始化，因此，如果您重新初始化Tabledit，则会将重复的按钮（编辑，删除..）添加到表的行中。您也不能销毁不存在的Tabledit，因此始终始终调用“ destroy ”将无济于事。

因此，我创建了自己的函数来告诉我Tabledit是否在表的特定页面上初始化：

function hasTabledit(table) {
    return $('tbody tr:first td:last > div', table).hasClass("tabledit-toolbar");
}

并按以下方式使用它：

if( !hasTabledit($('#table')) ) {
   $('#table').Tabledit({
     url: 'example.php',
     columns: {
     identifier: [0, 'id'],
     editable: [[1, 'points'], [2, 'notes']]
   },
   editButton: true,
   deleteButton: false
  });
}

hasTabledit(..)函数检查表第一行的最后一个单元格是否有一个具有tabledit-toolbar类的div，因为这是保存Tabledit按钮的div。您可以根据需要进行改进。这不是完美的解决方案，但这是我能做的最好的事情。

如何将jquery tabledit按钮添加到表的新行

2 个答案: