# 快速使用 ## 7.5.1.快速使用 后台管理页面大多用数据表格展示，如果要使用网格、瀑布流、卡片列表等形式，分页、自动渲染、搜索、排序等功能都需要自己实现， 极其麻烦，dataGrid模块就是对非表格形式的列表页面实现类似数据表格的功能，也在使用方法上与数据表格大致相同。 ~~~ <div id="demoGrid"></div><!-- 容器 --> <!-- 模板 --> <script type="text/html" id="demoGridItem"> <div> <h2>{{d.title}}</h2> <p>{{d.content}}</p> <a lay-event="add">添加</a> <a lay-event="edit">修改</a> </div> </script> <script> layui.use(['dataGrid'], function () { var dataGrid = layui.dataGrid; /* 渲染 */ var ins = dataGrid.render({ elem: '#demoGrid', // 容器 templet: '#demoGridItem', // 模板 url: 'json/list.json', // 数据接口 page: {limit: 5} // 开启分页 }); /* item点击事件 */ dataGrid.on('item(demoGrid)', function (obj) { obj.data; // 当前操作的数据对象 obj.elem; // 当前操作的dom元素 obj.del(); // 删除当前item obj.update({title: 'new title'}); // 修改当前item layer.msg('点击了第' + (obj.index + 1) + '个'); }); /* item里面的lay-event的点击事件 */ dataGrid.on('tool(demoGrid)', function (obj) { var data = obj.data; if (obj.event === 'add') { layer.msg('点击了添加'); } else if (obj.event === 'edit') { layer.msg('点击了编辑'); } }); /* item双击事件 */ dataGrid.on('itemDouble(demoGrid)', function (obj) { }); /* 监听复选框选择 */ dataGrid.on('checkbox(demoGrid)', function (obj) { console.log(obj.checked); // 当前是否选中状态 console.log(obj.data); // 选中行的相关数据 console.log(obj.type); // 如果触发的是全选，则为all }); }); </script> ~~~