本文主要介绍基于PHP框架ThinkPHP5和前端框架layui，使用layui的数据表格模块实现商品管理的相关操作，主要用到了自动分页、排序、单元格编辑、工具条toolbar等小功能。
基于layui数据表格的商品列表页上图中列表页具备的功能有：分页、跳转；根据ID排序；可以根据分类，关键词查询，也可以清空查询；点击上下架开关可直接改变上下架状态；点击精选开关可直接修改是否精选；点击编辑直接跳转至编辑页面；点击删除弹窗提示要删除的内容，确定后直接删除。
该页面中数据表格渲染采用的是“方法级渲染”，相关代码如下：tableclass=layui-hideid=goodslay-filter=goods/table
数据表格方法级渲染其中有关可编辑的单元格，这是表头的时候写的有edit:text；表单元素开关按钮通过自定义列模板实现；对应的模板代码为：
layui数据表格的自定义列模板注意到我在上述两个自定义列模板中设置的参数，给了一个switch的过滤器，统一的开关操作已经提前做好，switch监听开关事件的代码以及开关接口代码如下。
开关按钮接口示例开关按钮接口示例行工具条定义相关代码为：
工具条模板对应的工具条监听代码为：
监听工具条的JS代码工具条的删除效果如下：
工具条删除弹窗效果关于删除服务器端的处理代码比较简单，这里使用了thinkphp5的软删除。
工具条删除使用了TP5的软删除最后，看一下表格重载的相关代码，数据表格上面有个搜索表单，其实不是一个完整的form，相关代码如下：
表格重载的相关代码可选参数有两个，一个是商品的分类路径path，一个是手动输入的关键词。重载渲染的js代码如下，不多解释了。
表格重载的相关代码数据表格重载的接口与初次渲染是一样的接口，代码如下，也不多解释了：
数据表格异步接口注意：文中内容有关thinkphp5的不清楚的地方建议查看thinkphp文档手册，有关layui框架不清楚的内容请查看layui文档。