layui - - - 列排序、删除单个图书、重载数据（图书管理系统）

1.图书价格列排序

在“组件”中，选择“表格”，然后选择“表头属性”，在“表头属性”中找 sort 属性。

在代码中添加 sort 属性并设置为 true。

运行项目，使用 Chrome 浏览器打开。

2.单元格事件

在“组件”中，选择“表格”，然后选择“事件”，在“事件”中找 tool / toolDouble 事件。

点击打开 tool / toolDouble 事件。

使用 table.on('tool(filter)', callback); 单元格单击事件。

tool(test) 的参数 test 是 lay-filter 的值。

在单击或双击单元格上添加 lay-event="xx" 属性，单元格才会触发事件。

单击后回调函数中，打印参数，获取到当前行的数据。

判断点击的是“更新”按钮还是“删除”按钮。

3.删除操作的提示框

在“组件”中，选择“弹出层”，然后选择“弹层类型”，在“弹层类型”中选择“Confirm”弹出层。

点击查看代码，复制“Confirm”弹出层的代码。

在代码中添加“Confirm"弹出层。

4.使用 AJAX 发送 HTTP 请求

弹出层显示后，点击“确定”按钮。然后通过 AJAX 发送 HTTP 请求删除图书，打印出 HTTP 请求返回的响应信息。删除成功。

5.关闭弹出层

弹出层显示后，点击“确定”按钮之后需要关闭弹出层。
在“组件”中，选择“弹出层”，然后选择“关闭弹层”。

删除失败的提示消息。
在“组件”中，选择“弹出层”，然后选择“弹层类型”，在“弹层类型”中选择“Msg”弹出层。

在代码中添加“Confirm"弹出层。

6.删除后重载数据

删除数据后，界面上还是原来的数据，没有更新，需要使用重载。
在“组件”中，选择“表格”，然后选择“重载”

使用完整重载，参数 id 传表格的 id。

在代码中添加完整重载。

运行项目，使用 Chrome 浏览器打开。

原创作者: zicl 转载于: https://blog.51cto.com/zicl/11878670