Question

我正在使用带有小孩child rows的标准表的mottie的tablesorter插件。数据从mysql加载并存储在数组中。因为它是一个相当大的表，所以不会在表加载时生成子项中的附加数据。出于性能原因，只有在点击切换后才会生成附加数据。

伪代码：

// the html
<thead>
<tr>
  <th>Order #</th>
  <th>Customer</th>
  <th>PO</th>
  <th>Date</th>
  <th>Total</th>
</tr>

// the table sorter row, x is the increment var for iterating the array
"<tr><td>$data[x]['order']</td><td>$data[x]['customer']</td>...snip...</tr>"

// the toggle div, x = array increment var
$('.tablesorter').delegate('.toggle', 'click' ,function(){
var x = find...snip...attr('id');

var output = '<tr class="tablesorter-childRow">';
output += '<td><div id='+x+'><span class="editable" id="customer">'+$data[x]["customer"]+'</span></div></td>';
output += '</tr>';

$(this).closest('tr').nextUntil('tr:not(.tablesorter-childRow)').find('td').toggle().html(output);
return false;
});

这工作得很好。在附加数据中有一些可由jeditable编辑的字段，将修改后的值保存到mysql数据库和带有tablesorter数据的数组中。

编辑jeditable后，

在附加数据中显示已编辑的值，但父行（tablesorter，包含切换）显示旧值。有没有可能从数组刷新tablesorter中编辑的行而不重新加载整个表？所以，如果我在示例中编辑客户，它也应该显示在表格行中。

非常感谢你！

编辑：我尝试了类似$（“＃tstable”）。触发器（“更新”）;但是不起作用

Answer 1

这部分代码无法正常运行：

$(this).closest('tr')
    .nextUntil('tr:not(.tablesorter-childRow)')
    .find('td')
    .toggle()
    .html(output);

当用户点击＆＃34;切换＆＃34; element（我假设它是父行中某处的链接<a class="toggle">...</a>），该代码查找与包含＆＃34; toggle＆＃34;的父行关联的所有子行。链接。

然后查找子行中的所有<td>并显示或隐藏单元格。

在末尾添加.html()会使子行中的每个<td>都获得完整行的html。

由于在用户点击之前听起来表中没有子行，所以应该发生这样的事情：

$(this).closest('tr').after( output );

这会在单击的父行之后添加子行。此时您可以触发"update"，但由于正在使用ajax并且排序＆amp;过滤是在服务器端执行的。

tablesorter：更新后刷新特定行

1 个答案: