1
第一步在我们的电脑上打开软件，新建一个html，并添加上layui的js和css文件，如下图所示：
2
第二步我们打开新建的html文件,在<head>标签里面引入layui.css，layui.js文件，如下图所示：
3
第三步我们开始写body页面内容，这里给的表格内容是layui的表格示例数据，如下图所示：
4
第四步我们最后来给表格数据添加点击事件，table.on('tool(demoEvent)', function(obj){}来监听单元格事件，layer.prompt()d出框，使用 obj.update({ sign: value })进行更新表格和缓存，如下图所示：
5
第五步我们在浏览器中打开html页面，可以看到表格数据内容，如下图所示：
6
第六步我们点击表格数据内容，d出框显示单元格里面的数据，可以看到通过layui，给表格数据添加了点击事件，如下图所示：
使用layui的table功能时，在参考官方文档 layui数据表格 情况下，修改 工具栏左侧显示默认的内置模板。
toolbar: 'default' //让工具栏左侧显示默认的内置模板
左侧的内置以layui-icon显示的 *** 作按钮就展示出来，如图所示-左侧部分
但有时根据项目需求，不需要显示 添加 编辑 删除中的某一个或者某两个功能时，我们可以如下 *** 作：
点击功能方法参考官网文档即可；
例如：不想自定义一个复杂的导出功能，在使用官网给的例子的情况下，使用自己的导出方法。删除掉默认模板导出功能，如下图所示：
总结：利用官网文档学习使用layui框架，再此基础上进行修改和完善达到我们想要的功能。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）