javascript - Jquery tablesorter 可编辑列
问题描述
我有一个 HTML 表,它加载了 tablesorter(motties 版本)。我希望能够在表排序器加载后动态使表中的内容可编辑。我以为我可以像这样修改选项:
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 ,那么一切都会按预期工作,但是我想在初始化后这样做。
谢谢
解决方案
要使不同的列可编辑,您需要更新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
});
*/
});
});
推荐阅读
- node.js - 如何从 64 字节原始十六进制格式的密钥生成 PEM 格式的密钥
- php - 自定义简码显示在 WPBakery 后端而不是块中
- firebase - Firestore 数据库读取正在增加,甚至没有运行应用程序
- python - Selenium 多线程守护进程退出但仍在运行 | 壁虎司机
- javascript - 如何将数据向下传递到多层敲除组件
- nginx - 如何授权 MiniO 的 nginx 请求?
- php - Elasticsearch 6:无法以毫秒为单位解析日期
- javascript - 我想知道如何保存用户通过表单输入的数据,以便在重新打开应用程序后重新加载数据
- crashlytics - 按崩溃率的崩溃报告邮件
- hibernate - @DataJpaTest 用于失败测试用例