问题描述
我有一个HTML表，其中装有tablesorter（活动版本）。 我希望能够动态地在已加载表排序器之后使表中的内容可编辑。 我以为我可以像这样修改选项：
var widgetOptions = $(table)[0].config.widgetOptions;
widgetOptions.editable_columns = [7, 8, 9, 10, 11, 12, 13];
widgetOptions.editable_enterToAccept = true;
将选项登录到控制台似乎已正确设置了它们：
console.log($(table)[0].config.widgetOptions);
editable_autoAccept: true
editable_autoResort: false
editable_columns: (7) [7, 8, 9, 10, 11, 12, 13]
但是，内容不可编辑。 如果我在初始化期间设置了editable_columns，那么一切都会按预期进行，但是我想在初始化之后执行此操作。
谢谢
1楼
Mottie
0
2019-02-21 05:48:58
要使其他列可编辑，您需要更新editable_columns值，然后触发更新。
问题是，一旦列是可编辑的，更新不会禁用已经可编辑的列（ ）
$(function() {
var $table = $('#table');
$('button').click(function() {
$table[0].config.widgetOptions.editable_columns = [3];
$table.trigger('update');
});
$table.tablesorter({
theme: 'blue',
widgets: ['editable'],
widgetOptions: {
editable_columns: [0, 1, 2],
editable_autoAccept: true,
editable_autoResort: false
}
})
// config event variable new in v2.17.6
.children('tbody').on('editComplete', 'td', function(event, config) {
var $this = $(this),
newContent = $this.text(),
// there shouldn't be any colspans in the tbody
cellIndex = this.cellIndex,
// data-row-index stored in row id
rowIndex = $this.closest('tr').attr('id');
/*
$.post("mysite.php", {
"row" : rowIndex,
"cell" : cellIndex,
"content" : newContent
});
*/
});
});
2楼
SamMaj
0
2019-02-22 16:47:07
为了使该工作正常进行，我必须通过单击按钮添加可编辑的小部件，并向表中触发applywidgets，例如
$('button').click(function() {
$(table)[0].config.widgets = ["stickyHeaders", "output", "filter" ,"print", "editable"];
$(table)[0].config.widgetOptions.editable_columns = editableColumns;
$(table)[0].config.widgetOptions.editable_enterToAccept = true;
$(table)[0].config.widgetOptions.editable_editComplete = 'editComplete';
$(table).trigger('applyWidgets');
});