1.图书价格列排序

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

image.png

image.png

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

image.png

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

image.png

2.单元格事件

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

image.png

点击打开 tool / toolDouble 事件。

image.png

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

image.png

tool(test) 的参数 testlay-filter 的值。

image.png

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

image.png

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

image.png

image.png

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

image.png

3.删除操作的提示框

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

image.png

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

image.png

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

image.png

4.使用 AJAX 发送 HTTP 请求

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

image.png

image.png

image.png

5.关闭弹出层

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

image.png

image.png

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

image.png

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

image.png

6.删除后重载数据

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

image.png

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

image.png

在代码中添加完整重载。

image.png

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

image.png