2015-08-31 3 views
0

Я использую плагин mottie tablesorter со стандартным столом с дочерними строками child rows. данные загружаются из mysql и сохраняются в массиве. потому что это довольно большая таблица, дополнительные данные в дочернем потоке не генерируются при загрузке таблицы. по соображениям производительности только после нажатия на переключатель появятся дополнительные данные.tablesorter: обновить конкретную строку после обновления

псевдо-код:

// 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 триггер («обновление») ;, но не работает

ответ

0

Эта часть кода не работает так, как и следовало ожидать:

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

Когда пользователь нажимает на элементе «тумблер» (я предполагаю, что это ссылка <a class="toggle">...</a> где-то в родительской строке), что код выглядит для всех дочерних строк, связанных с родительской строкой, содержащей «тумблер» ссылку.

Затем он ищет все <td> внутри дочерних строк и показывает или скрывает ячейку.

Добавление .html() в конец делает каждый <td> в дочерних строках, чтобы получить html для полной строки.

Поскольку это звучит как нет ребенка строки в таблице, пока пользователь нажмет, что должно произойти, это:

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

Это добавляет дочернюю строку (ы) после родительской строки, которая была нажата. На этом этапе вы можете вызвать "update", но это действительно не обязательно, поскольку используется ajax и сортировка &. Фильтрация выполняется на стороне сервера.