## 7.5.1.快速使用 :id=start
 大多數的后臺系統頁面全是數據表格，表格看多了，難免喜歡其他布局，例如網格、瀑布流、卡片列表等形式，
如果使用這些布局，分頁、自動渲染、搜索、排序等功能都需要自己實現，相比數據表格，大大增加工作量，
dataGrid插件就是對非表格形式的列表頁面實現自動分頁、自動渲染的功能。
```html
<div id="demoGrid"></div>
<!-- 模板 -->
<script type="text/html" id="demoGridItem">
<div>
<h2>{{d.title}}</h2>
<p>{{d.content}}</p>
<a lay-event="edit">修改</a>
</div>
</script>
<script>
layui.use(['dataGrid'], function () {
var dataGrid = layui.dataGrid;
// 渲染
var ins = dataGrid.render({
elem: '#demoGrid', // 容器
templet: '#demoGridItem', // 模板
data: '../../../json/data-grid.json', // 數據接口
page: {limit: 5}, // 開啟分頁
onItemClick: function (obj) {
// item點擊事件監聽
},
onToolBarClick: function (obj) {
// item子元素點擊事件監聽
}
});
});
</script>
```
使用方法與數據表格table類似。
## 7.5.2.事件監聽 :id=event
```javascript
dataGrid.render({
// item點擊事件監聽
onItemClick: function (obj) {
var index = obj.index;
console.log('點擊了第' + (index + 1) + '個');
},
onToolBarClick: function (obj) {
// item子元素點擊事件監聽
var event = obj.event;
console.log(event);
}
});
```
onToolBarClick就是item里面加了lay-event屬性的子元素的點擊事件。
**obj詳細介紹：**
```javascript
obj.data; // 當前操作的數據對象
obj.index; // 當前操作的數據索引
obj.elem; // 當前操作的dom元素
obj.event; // 當前操作的lay-event值
obj.e; // 原生點擊事件的e
obj.del(); // 刪除當前item
obj.update(o); // 修改當前item
```
**obj.update()用法：**
```javascript
dataGrid.render({
onToolBarClick: function (obj) {
var data = obj.data;
data.title = '我是新的值';
obj.update(data);
}
});
```
## 7.5.3.分頁功能 :id=page
```javascript
dataGrid.render({
elem: '#demoGrid', // 容器
templet: '#demoGridItem', // 模板
data: '../../../json/data-grid.json', // 數據接口
page: {limit: 5} // 開啟分頁
});
```
page參數同layui分頁組件的參數一致，[前往查看](https://www.layui.com/doc/modules/laypage.html#options)。
## 7.5.4.加載更多功能 :id=load_more
```javascript
dataGrid.render({
elem: '#demoGrid', // 容器
templet: '#demoGridItem', // 模板
data: '../../../json/data-grid.json', // 數據接口
loadMore: {limit: 5} // 開啟加載更多
});
```
loadMore的可選配置：
參數 | 說明 | 默認值
:--- | :--- | :---
class | 自定義class | ''
limit | 每頁多少條 | 10
text | 顯示文字 | '加載更多'
loadingText | 加載中文字 | '加載中...'
noMoreText | 無數據文字 | '沒有更多數據了~'
errorText | 加載失敗文字 | '加載失敗，請重試'
> loadMore和page只能二選一
## 7.5.5.重載功能 :id=reload
```javascript
var ins = dataGrid.render({});
ins.reload(); // 重載
ins.reload({page: {curr: 2} }); // 跳到第二頁
```
## 7.5.6.渲染完成的回調 :id=done
```html
dataGrid.render({
done: function(dataList, curr, count) {
dataList; // 當前頁數據
curr; // 當前第幾頁
count; // 總數量
}
});
```
## 7.5.7.自動渲染 :id=auto_render
```html
<div id="demoGrid" lay-data="{url: 'json/data-grid.json', page: {limit: 5} }" data-grid>
<script type="text/html" data-grid-tpl>
<div>
<h2>{{d.title}}</h2>
<p>{{d.content}}</p>
<a lay-event="edit">修改</a>
</div>
</script>
</div>
```
通過添加data-grid和data-grid-tpl屬性，dataGrid組件便會自動渲染，通過lay-data屬性進行參數配置。
## 7.5.8.綁定事件 :id=bind_event
```javascript
// 綁定item事件
dataGrid.onItemClick('demoGrid', function(obj){
console.log(obj);
});
// 綁定item子元素事件
dataGrid.onToolBarClick('demoGrid', function(obj){
console.log(obj);
});
```
參數一是容器的id，這種方式綁定事件的優先級比直接在渲染的時候綁定事件低。
