layui Table：保持复选框选中状态跨页示例

"layui table 复选框在切换页面后保持选中状态的实现方法" 在使用layui框架的table组件时，用户可能会遇到一个常见问题：当用户在表格中选择了某些行，然后翻页，再次返回原来的页面时，之前选中的状态会丢失。layui table 默认并未提供自动保存和恢复选中状态的功能。为了解决这个问题，我们需要自定义一些代码来实现这一功能。 首先，我们需要定义一个全局变量来存储选中行的数据ID。例如，我们可以创建一个名为 `layuiPageCheckedIds` 的变量，其值为一个以逗号分隔的字符串，如 ",1,2,3,4,"，表示选中的行的ID。 ```javascript config: { checkName: "LAY_CHECKED", indexName: "LAY_TABLE_INDEX", layuiPageCheckedIds: ",", }, ``` 接下来，我们需要修改 `table.js` 文件中的逻辑，以便在发送请求获取数据前，将选中的数据ID添加到请求参数中。这样服务器端可以接收到这些信息，并在返回数据时包含这些选中的行。在发送请求之前，检查 `layuiPageCheckedIds` 是否已定义且不为空： ```javascript if (n.layuiPageCheckedIds !== undefined && "" !== n.layuiPageCheckedIds) { n.where.layuiCheckedIds = n.layuiPageCheckedIds; } ``` 这样，当表格重新加载时，服务器可以根据 `layuiCheckedIds` 参数返回相应的选中行。当然，这需要服务器端配合处理，将这些ID对应的数据在返回时标记为选中状态。 在获取数据并渲染表格后，我们还需要更新 `layuiPageCheckedIds` 变量，以反映新页面上的选中状态。这可以通过监听表格的 `checkbox` 事件来实现： ```javascript table.on('checkbox(table)', function(obj){ // 当用户勾选或取消选中项时，更新layuiPageCheckedIds var checkedIds = obj.data.id; // 获取当前选中项的ID // 更新layuiPageCheckedIds的逻辑... }); ``` 当用户切换页面时，确保 `layuiPageCheckedIds` 变量的值被正确地传递到新的页面请求中，以便服务器能够恢复选中状态。同样，当用户取消选中时，也需要相应地更新这个变量。 总结来说，要让layui table 在翻页后保持选中状态，你需要： 1. 定义一个全局变量 `layuiPageCheckedIds` 存储选中的行ID。 2. 修改 `table.js` 文件，将 `layuiPageCheckedIds` 添加到请求参数中。 3. 监听表格的 `checkbox` 事件，动态更新 `layuiPageCheckedIds`。 4. 服务器端需要处理 `layuiCheckedIds` 参数，根据ID返回相应的选中状态。 通过以上步骤，你可以确保在layui table组件中实现复选框状态的跨页面保持，提供更一致的用户体验。