# 快速使用 ## 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> ~~~