jQWidgets jqxDataTable rowEndEdit 事件(1)

📌 相关文章

📜 jQWidgets jqxDataTable rowEndEdit 事件(1)

📅 最后修改于: 2023-12-03 14:43:21.698000 🧑 作者: Mango

jQWidgets jqxDataTable rowEndEdit 事件

jQWidgets jqxDataTable 是一款基于 jQuery 的表格插件，支持分页、排序、搜索等功能。其中，rowEndEdit 事件是在表格行编辑完成时触发的事件。

事件说明

rowEndEdit 事件在用户对表格进行编辑时触发，可以通过该事件实现对编辑后数据的保存操作。该事件的监听函数接收两个参数：

event：事件对象。
rowKey：编辑的行的唯一标识符。

$(document).on('rowEndEdit', function(event, rowKey) {
  // 在此处编写行编辑完成后的操作
});

使用示例

在以下示例中，我们创建了一个包含两个文本输入框的 jqxDataTable。当用户编辑任意行并完成编辑时，将触发 rowEndEdit 事件。在该事件监听函数中，我们获取到该行数据并输出到控制台上。

<body>
  <div id="table"></div>
</body>

<script>
  var source = {
    dataType: "json",
    dataFields: [
      { name: 'name', type: 'string' },
      { name: 'age', type: 'number' }
    ],
    localData: [
      { name: 'Tom', age: 20 },
      { name: 'Jerry', age: 22 }
    ]
  };

  var dataAdapter = new $.jqx.dataAdapter(source);

  $("#table").jqxDataTable({
    altRows: true,
    width: 600,
    pageable: true,
    source: dataAdapter,
    columns: [
      { text: 'Name', dataField: 'name' },
      { text: 'Age', dataField: 'age', cellsAlign: 'right' }
    ]
  });

  $(document).on('rowEndEdit', function(event, rowKey) {
    var rowData = $('#table').jqxDataTable('getRows')[rowKey];
    console.log(rowData);
  });
</script>

注意事项

rowEndEdit 事件只有在用户编辑完成表格行后才会被触发。如果用户正在进行行编辑操作，此时该事件并不会被触发。
在 rowEndEdit 事件监听函数中可通过 jqxDataTable.getRows 方法获取到表格的数据，可以根据需要编写将数据保存至服务器的代码。