zui
Version:
一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。
1,773 lines (1,481 loc) • 63.1 kB
Markdown
# 数据表格②
数据表格2（在下文中简称为数据表格）是一个全新的数据表格视图组件，相比较[数据表格](#view/datatable)提供更强大的功能，支持远程数据显示、排序、搜索以及海量数据显示。
## 综合示例
### 引入资源
数据表格2为独立组件，你需要从本地或 CDN 单独引入 lib 目录下的资源：
```html
<link href="lib/datagrid/zui.datagrid.min.css" rel="stylesheet">
<script src="lib/datagrid/zui.datagrid.min.js"></script>
```
<div class="example">
<div id="datagridExample" class="datagrid datagrid-borderless">
<header class="clearfix">
<div class="input-control search-box search-box-circle has-icon-left has-icon-right pull-right" id="searchboxExample1">
<input id="inputSearchExample1" type="search" class="form-control search-input" placeholder="搜索">
<label for="inputSearchExample1" class="input-control-icon-left search-icon"><i class="icon icon-search"></i></label>
<a href="#" class="input-control-icon-right search-clear-btn"><i class="icon icon-remove"></i></a>
</div>
<h3>数据表格功能综合演示</h3>
</header>
<div class="datagrid-container"></div>
<div class="pager"></div>
</div>
</div>
```html
<div id="datagridExample" class="datagrid"></div>
```
```js
$('#datagridExample').datagrid({
dataSource: [...],
...
});
```
当所有选项都可以通过 `data-*` 属性设置时，则可以通过 `data-ride="datagrid"` 来在页面加载后自动进行初始化。
```html
<div id="datagridExample" class="datagrid" data-ride="datagrid"></div>
```
## 数据源
数据源是用于定义数据网格数据的格式和获取方式。数据源通过 `dataSource` 选项进行配置。`dataSource` 选项值为一个对象，可用的属性包括：
* `cols`：一个列定义对象数组，用于定义数据源上要显示的列，数组内对象的顺序即是列排列显示的顺序，列对象定义参见下文；
* `array`：可选，当使用静态数组定义数据时，使用此属性来定义所有数据；
* `remote`：可选，当从远程加载数据时，使用此属性来指定远程请求的地址，或者使用此属性指定一个函数用于动态生成每次请求所使用的 ajax 参数对象；
* `remoteConverter`：可选，当从远程加载数据时，使用此属性来转换远程内容，确保远程数据符合数据表格所要求的格式，如果远程数据已经通过 JSON 返回了符合要求的数据，则无需使用此属性进行转换操作；
* `getByIndex`：可选，当使用动态数据时，使用此属性指定一个函数用于动态返回数据项目；
* `cache`: 如果设置为 `true`，则启用数据查询缓存，如果设置为 `false`，则不启用数据查询缓存，默认为 `true`；
* `cacheSize`: 设置启用数据查询缓存时最大缓存数量，默认为 `1`。
### 数据项定义
数据项使用一个简单的 JavaScript 对象来表示。数据项对象中应该包含列定义（需要在界面上显示的列）中的所有属性，并且需要包含一个 `id` 属性用于行编号，如果没有指定 `id` 属性，则使用行序号作为行编号。
### 数据源列定义
数据表格上要显示的列通过列定义数组来设置。一个列定义对象数组，用于定义数据源上要显示的列，数组内对象的顺序即是列排列显示的顺序。每一个列定义对象包含如下属性：
* `name`: 列上要显示的数据属性名称；
* `label`: 可选，列标题文本，如果不定义此属性则使用 `name` 属性作为标题文本；
* `html`: 默认为 `false`，如果设置为 `true`，则在渲染列时将内容作为 html 源码更新到页面上；
* `style`: 可选，在该列上所以单元格元素上要添加的样式（使用 jQuery CSS 样式定义对象规则）；
* `width`: 列宽度，如果设置为小于 `1` 的浮点数，则将此值用于自适应时计算最终宽度的权值；
* `minWidth`：列最小宽度，当启用自适应时，最终计算的宽度不会小于该值；
* `className`: 可选，在该列上所有单元格元素上要添加的类名；
* `checkbox`: 默认为 `false`，如果设置为 `true`，则在此列单元格内显示勾选框；
* `valueType`：该列值类型，默认 `string`；
* `valueOperator`: 可选，该列上的值转换器；
* `sort`：是否为当前列开启排序功能，默认为 `true`，如果设置为 `false`，即便 `sortable` 选项设置为 `true` 也无法使用该列进行排序；
* `sortFunc`：可选，当使用该列排序时的比较函数。
```js
$('#myDataGrid').datagrid({
dataSource: {
cols:[
{name: 'time', label: '时间', width: 132},
{name: 'hero', label: '英雄', width: 134},
{name: 'action', label: '动作', width: 109},
{name: 'target', label: '目标', width: 109},
{name: 'desc', label: '描述', width: 287}
],
// ... Data source 其他属性
},
// ... 其他初始化选项
});
```
### 静态数据源
定义数据源最简单的方式是给定一个静态对象数组。
```js
$('#myDataGrid').datagrid({
dataSource: {
cols:[
{name: 'time', label: '时间', width: 132},
{name: 'hera', label: '英雄', width: 134},
{name: 'action', label: '动作', width: 109},
{name: 'target', label: '目标', width: 109},
{name: 'desc', label: '描述', width: 287}
],
array:[
{time: '00:11:12', hero:'幻影刺客', action: '击杀', target: '斧王', desc: '幻影刺客击杀了斧王。'},
{time: '00:13:22', hero:'幻影刺客', action: '购买了', target: '隐刀', desc: '幻影刺客购买了隐刀。'},
{time: '00:19:36', hero:'斧王', action: '购买了', target: '黑皇杖', desc: '斧王购买了黑皇杖。'},
{time: '00:21:43', hero:'力丸', action: '购买了', target: '隐刀', desc: '力丸购买了隐刀。'}
]
},
// ... 其他初始化选项
});
```
### 远程数据源
有时需要从远程获取数据，数据表格支持通过 Ajax 获取远程数据作为数据源，而且使用起来非常灵活。通过数据源对象的 `remote` 和 `remoteConverter` 属性来配置远程数据源。
#### 远程请求参数
远程请求参数通过 `remote` 属性来配置。如果是静态地址，则直接使用远程连接地址作为 `remote` 配置的值，如果要根据当前请求的页码和搜索文本等信息进行动态请求配置，则可以将 `remote` 配置的值指定为一个回调函数来动态返回配置。`remote` 配置回调函数参数定义如下：
* `params`: 请求的参数信息对象；
* `datagrid`: 数据网格实例对象。
其中 `params` 对象包含如下属性：
* `page`: 当前显示的页码；
* `recPerPage`: 当前设定每页显示的数据个数；
* `search`: 当前用于检索数据的文本；
* `sortBy`: 当前排序依据的列名；
* `order `: 当前排序的顺序，包括顺序（`'asc'`）和倒序（`'desc'`）。
远程请求参数对象可以使用 [jQuery.ajax](https://github.com/easysoft/zui/commits/master) 方法接受的所有选项。
#### 远程数据格式
远程数据必须返回一个 JSON 格式的对象，此对象包含如下属性：
```js
// 原创数据对象
{
// 数据请求结果（必须），当值为 'succes'、'ok' 或 200 时则是为请求成功
"result": "success",
// 远程数据内容（必须）
"data": [
// ... 原创数据对象数组
],
// 用户界面提示消息，当请求结果失败时，可以使用此属性返回文本显示在用户界面上
"message": "",
// 远程数据的分页信息对象（必须），其中
"pager": {
"page": 1, // 当前数据对应的页码
"recTotal": 1001, // 总的数据数目
"recPerPage": 10, // 每页数据数目
}
}
```
当远程请求返回的内容不符合上面的格式时，则需要使用 `remoteConverter` 指定一个回调函数来将远程数据转换为符合要求的格式。`remoteConverter` 回调函数包含如下参数：
* `responseData`：远程请求返回的文本内容；
* `textStatus`：原创请求状态；
* `jqXHR`：jQuery 的 xhr 对象；
* `datagrid`：数据网格实例对象。
<div class="example">
<div id="remoteDataGridExample" class="datagrid"></div>
</div>
```html
<div id="remoteDataGridExample" class="datagrid"></div>
```
```js
$('#remoteDataGridExample').datagrid({
dataSource: {
cols:[
{name: 'time', label: '时间', width: 132},
{name: 'hera', label: '英雄', width: 134},
{name: 'action', label: '动作', width: 109},
{name: 'target', label: '目标', width: 109},
{name: 'desc', label: '描述', width: 287}
],
remote: function(params) {
return {
// 原创请求地址
url: 'docs/partial/remote-data.json',
// 请求类型
type: 'GET',
// 数据类型
dataType: 'json'
};
}
}
});
```
### 动态数据
动态数据允许使用一个函数来生成数据，数据只在需要显示的时候获取。通过这种方式，可以实现上亿的海量数据显示。
要启用动态数据源，只需要为数据源对象（`dataSource` 选项）的 `getByIndex` 属性设置一个回调函数，在该回调函数中返回对应索引的对象即可。该回调函数参数定义如下：
* `index`：要获取的数据行索引；
* `params`：数据检索参数。
其中 `params` 对象包含如下属性：
* `page`: 当前显示的页码；
* `recPerPage`: 当前设定每页显示的数据个数；
* `search`: 当前用于检索数据的文本；
* `sortBy`: 当前排序依据的列名；
* `order `: 当前排序的顺序，包括顺序（`'asc'`）和倒序（`'desc'`）。
<div class="alert alert-warning">
<h4>动态数据源性能提示</h4>
<p>当使用动态数据源时，如果一次性展示的数据比较多，受限于计算机性能，应该关闭排序、搜索、行选中等操作，否则可能导致界面无响应。</p>
</div>
<div class="alert alert-primary">
<h4>动态数据源使用限制</h4>
<p>当使用动态数据源时，不支持分页功能。</p>
</div>
<div class="example">
<div id="dynamicDataGridExample" class="datagrid">
<header>
<h1>动态数据</h1>
<p class="small">使用动态数据源实现上亿的海量数据展示。</p>
</header>
</div>
</div>
```html
<div id="dynamicDataGridExample" class="datagrid"></div>
```
```js
$('#dynamicDataGridExample').datagrid({
dataSource: {
getByIndex: function(index, param) {
return {
// ...
}
}
},
checkable: false, // 禁用勾选
sortable: false, // 禁用排序
})；
```
### 使用原生表格初始化
与旧版本数据表格一致，数据表格2仍然支持直接使用一个原生的数据表格进行初始化。
<div class="example">
<table class="table table-bordered" id="tableDataGridExample">
<thead>
<tr>
<th>时间</th>
<th>英雄</th>
<th>动作</th>
<th>目标</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>00:11:12</td>
<td>幻影刺客</td>
<td>击杀</td>
<td>斧王</td>
<td>幻影刺客击杀了斧王。</td>
</tr>
<tr>
<td>00:13:22</td>
<td>幻影刺客</td>
<td>购买了</td>
<td>隐刀</td>
<td>幻影刺客购买了隐刀。</td>
</tr>
<tr>
<td>00:19:36</td>
<td>斧王</td>
<td>购买了</td>
<td>黑皇杖</td>
<td>斧王购买了黑皇杖。</td>
</tr>
<tr>
<td>00:21:43</td>
<td>力丸</td>
<td>购买了</td>
<td>隐刀</td>
<td>力丸购买了隐刀。</td>
</tr>
</tbody>
</table>
</div>
```html
<table class="table table-bordered" id="tableDataGridExample">
<thead>
<tr>
<th>时间</th>
<th>英雄</th>
<th>动作</th>
<th>目标</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>00:11:12</td>
<td>幻影刺客</td>
<td>击杀</td>
<td>斧王</td>
<td>幻影刺客击杀了斧王。</td>
</tr>
...
</tbody>
</table>
```
```js
$('#tableDataGridExample').datagrid();
```
## 固定行和列
数据表格支持将行和列固定在表格的一侧，当视图滚动时，固定的行和列仍然保持原来的位置。固定行和列功能通过 `states` 选项进行设置，为 `states` 设置如下属性来启用该功能：
* `fixedLeftUntil`：左侧固定列索引的终止值，当列索引小于或等于该值时则将列固定在表格左侧，默认为 `0`（即固定左侧行编号所在列）；
* `fixedRightFrom`： 右侧固定列索引的起始值，当列索引大于或等于该值时则将列固定在表格右侧，默认为 `-1`（不在右侧固定列）；
* `fixedTopUntil`： 顶部固定列索引的终止值，当列索引小于或等于该值时则将列固定在表格上方，默认为 `0`（即固定上方标题所在列）；
* `fixedBottomFrom`： 底部固定列索引的起始值，当列索引大于或等于该值时则将列固定在表格下方，默认为 `-1`（不在下方固定列）。
<div class="example">
<div id="datagridFixedExample" class="datagrid">
<header class="clearfix">
<h3>数据表格固定行和列演示 <small>行和列分别可以固定在表格上、下、左、右四个方向</small></h3>
</header>
<div class="datagrid-container"></div>
</div>
</div>
```html
<div id="datagridFixedExample" class="datagrid"></div>
```
```js
$('#datagridFixedExample').datagrid({
dataSource: {...}
states: {
pager: {page: 1, recPerPage: 100},
fixedLeftUntil: 0, // 固定左侧第一列
fixedRightFrom: 12, // 从第12列开始固定到右侧
fixedTopUntil: 0, // 固定顶部第一行（标题行）
fixedBottomFrom: 100, // 从第100行（在此例中是最后一行）开始固定到底部
}
});
```
## 排序
数据表格支持按照任意列进行排序，并且可以自定义排序比较函数。要启用排序功能需要将 `sortable` 选项设置为 `true`。当启用排序功能后，标题行（第一行）上的单元格会显示排序指示图标，用户可以点击标题行上的单元格按照所在列进行排序，排序方式会在每次点击时进行顺序切换，切换顺序为升序排序、降序排序、不排序。如果需要禁用根据某些列排序，则可以在列定义中将 `sort` 属性设置为 `false`。
默认排序算法使用 JavaScript 内置的默认比较算法，如果需要自定义排序函数，可以通过 `sortFunc` 选项设置一个回调函数，该回调函数参数定义如下：
* `value1`：第一个要比较的值，相当于 `item1[sortBy]`；
* `value2`：第二个要比较的值，相当于 `item2[sortBy]`；
* `item1`：第一个要比较的数据条目；
* `item2`：第二个要比较的数据条目；
* `sortBy`：当前用于排序的列名；
* `datagrid`：当前数据表格实例对象。
当第一个值大于第二个值时，排序函数应该返回大于 `0` 的数值，当第一个值小于第二个值时，排序函数应该返回小于 `0` 的值，如果相等则返回 `0`。
如果仅仅需要为单独的列应用自定义排序函数，则可以在列定义中使用 `sortFunc` 属性设置该列的排序函数，列排序函数参数定义及返回值约定与选项 `sortFunc` 一致。
<div class="alert alert-warning">
<h4>排序的限制</h4>
<p>内置的完整排序功能仅支持本地静态数据源的排序，如果是远程数据源，会将排序参数发送给远端服务器，需要在服务器进行排序返回排序后的数据；动态数据源的排序也需要自己进行处理，可以根据回调函数参数应用排序规则。</p>
</div>
<div class="example">
<div id="datagridSortExample" class="datagrid">
<header class="clearfix">
<h3>数据表格排序功能演示 <small>点击表头进行排序</small></h3>
</header>
<div class="datagrid-container"></div>
</div>
</div>
```html
<div id="datagridSortExample" class="datagrid"></div>
```
```js
$('#datagridSortExample').datagrid({
dataSource: {...},
sortable: true
});
```
要手动操作排序，可以使用数据表格的实例方法 `sortBy(sortBy, order)`，该方法参数定义如下：
* `sortBy`：当前用于排序的列名；
* `order`：排序顺序，可选值包括 `asc`（升序），`desc`（降序）。
```js
// 获取数据表格实例
var myDataGrid = $('#datagridSortExample').data('zui.datagrid');
// 按照 `name` 列降序排序
myDataGrid.sortBy('name', 'desc');
```
可以通过选项 `states` 上的如下属性设置初始状态下的排序规则：
* `sortBy`：当前用于排序的列名；
* `order`：排序顺序，可选值包括 `asc`（升序，默认），`desc`（降序）。
## 分页
数据表格支持对数据进行分页，支持静态数据源和远程数据源分页操作，并且可以结合[分页器插件](#javascript/pagerjs)一起使用。要启用分页功能，需要为 `states` 选项设置 `pager` 属性。`pager` 属性为一个对象，包含如下属性：
* `page`：当前页码，默认为`0`（不启用分页）
* `recPerPage`: 每页记录数目，默认为 `10`。
分页可以与[分页器插件](#javascript/pagerjs)一起使用，在 `.datagrid` 元素内包含 `.pager` 元素即可自动绑定分页器组件。
<div class="example">
<div id="datagridPageExample" class="datagrid">
<header class="clearfix">
<h3>数据表格分页功能演示</h3>
</header>
<div class="datagrid-container"></div>
<div class="pager"></div>
</div>
</div>
```html
<div id="datagridPageExample" class="datagrid">
<div class="datagrid-container"></div>
<div class="pager"></div>
</div>
```
```js
$('#datagridPageExample').datagrid({
dataSource: {...},
states: {
pager: {page: 1, recPerPage: 20}
}
});
```
要手动操作分页，可以使用数据表格的实例方法 `gotoPage(page)`，方法参数定义如下：
* `page`：要切换的页码。
```js
// 获取数据表格实例
var myDataGrid = $('#datagridPageExample').data('zui.datagrid');
// 到第二页
myDataGrid.gotoPage(2);
```
<div class="alert alert-primary">
<h4>不再需要滚动</h4>
<p>当启用分页时，可以通过将 `height` 选项设置为特殊值 `'page'`，从而实现自动调整数据表格高度为当前页所有行的高度，实现没有垂直滚动条的情况下显示当前页的所以数据。</p>
</div>
## 搜索
数据表格支持对静态数据源和原创数据源数据进行检索。当使用远程数据源时，搜索是在服务器端进行的，服务器应该根据搜索字符串参数筛选数据；如果是静态数据，搜索是在浏览器进行的，默认的搜索策略非常到位，允许搜索字符串通过空格包含多个关键字，并且自动根据批评程序进行排序，批评程度更高的会显示在前面（搜索结果自动排序仅当用户没有进行排序时有效）。
当对静态数据源进行浏览器端搜索时，可以通过 `searchFunc` 选项指定一个搜索回调函数来自定义如何筛选数据，该函数参数定义如下：
* `item`：当前检测是否符合条件的数据条目对象；
* `searchKeyArr`：当前搜索关键词数组；
* `index`：当前条目在数据源中的索引；
* `params`：其他检索条件；
* `datagrid`：当前数据表格实例对象。
其中 `params` 参数为一个对象，包含如下属性：
* `page`: 当前显示的页码；
* `recPerPage`: 当前设定每页显示的数据个数；
* `search`: 当前用于检索数据的文本；
* `sortBy`: 当前排序依据的列名；
* `order `: 当前排序的顺序，包括顺序（`'asc'`）和倒序（`'desc'`）。
在 `.datagrid` 元素内包含一个[搜索框组件](#javascript/searchbox)，数据表格会自动监听搜索框变更事件并自动更新结果。
<div class="example">
<div id="datagridSearchExample" class="datagrid">
<div class="input-control search-box search-box-circle has-icon-left has-icon-right" id="searchboxExample2" style="margin-bottom: 10px; max-width: 300px">
<input id="inputSearchExample2" type="search" class="form-control search-input" placeholder="搜索">
<label for="inputSearchExample2" class="input-control-icon-left search-icon"><i class="icon icon-search"></i></label>
<a href="#" class="input-control-icon-right search-clear-btn"><i class="icon icon-remove"></i></a>
</div>
<div class="datagrid-container"></div>
</div>
</div>
```html
<div id="datagridSearchExample" class="datagrid">
<div class="input-control search-box search-box-circle has-icon-left has-icon-right" id="searchboxExample2" style="margin-bottom: 10px; max-width: 300px">
<input id="inputSearchExample2" type="search" class="form-control search-input" placeholder="搜索">
<label for="inputSearchExample2" class="input-control-icon-left search-icon"><i class="icon icon-search"></i></label>
<a href="#" class="input-control-icon-right search-clear-btn"><i class="icon icon-remove"></i></a>
</div>
<div class="datagrid-container"></div>
</div>
```
```js
$('#datagridSearchExample').datagrid({
// ...
});
```
可以使用数据表格的实例方法 `search(searchStr)` 手动设置搜索关键字，方法参数定义如下：
* `searchStr`：用于搜索的关键字字符串，多个关键字使用空格连接。
```js
// 获取数据表格实例
var myDataGrid = $('#datagridPageExample').data('zui.datagrid');
// 搜索同时包含 '数据' 和 '表格' 两个关键字的条目
myDataGrid.search('数据 表格');
```
可以通过选项 `states` 上的 `search` 属性设置初始状态下搜索关键字字符串。
## 行选择
数据表格允许用户通过点击行或者在界面上拖拽来选定并标记行。要启用行选择功能，需要将 `checkable` 设置为 `true`。如果启用了行选中，并且页面已导入[拖拽选取插件](#javascript/selectable)，则允许用户在界面上进行拖拽框选多行，禁用此功能，可以将 `selectable` 设置为 `false`。`selectable` 还可以接受一个对象作为拖拽选取插件初始化参数，用于自定义拖拽选取交互方式。
当启用行选择功能，并且序号列设置为显示的情况下，会自动在序号列上添加勾选框，方便用户勾选行和查阅行选中状态。如果不需要显示勾选框，可以在序号列配置中将 `checkbox` 属性设置为 `false`，如果需要在其他列上显示勾选框，则可以在对应的列定义对象上将 `checkbox` 属性设置为 `true`。
当启用行选择功能，默认情况下，用户点击行上任意位置都会切换行的选中状态，如果不需要此功能，可以将 `checkByClickRow` 选项设置为 `false`，这样只有用户点击勾选框才能够切换选中状态。
<div class="example">
<div id="datagridCheckableExample" class="datagrid">
<div class="datagrid-container"></div>
</div>
</div>
```html
<div id="datagridCheckableExample" class="datagrid">
<div class="datagrid-container"></div>
</div>
```
```js
$('#datagridCheckableExample').datagrid({
dataSource: {...},
checkable: true,
checkByClickRow: true
});
```
通过 `getCheckItems()` 获取已选中的行数据项。
```js
// 获取数据表格实例
var myDataGrid = $('#datagridPageExample').data('zui.datagrid');
// 获取当前已选中的行数据项
var selectedItems = myDataGrid.getCheckItems();
```
通过 `isRowChecked(rowId)` 检查指定的行是否已选中，其中 `rowId` 为要检查的行编号。
```js
// 获取数据表格实例
var myDataGrid = $('#datagridPageExample').data('zui.datagrid');
// 检测编号为 2 的行是否选中
var isSelect = myDataGrid.isRowChecked(2);
```
通过 `checkRow(rowIndex, checked)` 手动设置指定行选中状态，其中参数定义如下：
* `rowIndex`：要设置的行序号；
* `checked`：如果为 `true` 设置为选中，如果为 `false` 设置为非选中，否则根据之前第状态切换为另一个状态。
```js
// 获取数据表格实例
var myDataGrid = $('#datagridPageExample').data('zui.datagrid');
// 将第2行设置为选中
var isSelect = myDataGrid.checkRow(2, true);
```
可以通过选项 `states` 上的 `selections` 属性设置初始状态下行选中的状态。
```js
$('#myDataGrid').datagrid({
states: {
// 设置初始状态下行编号为 1 和 3 的行为选中状态
selections: {
'1': true,
'3': true,
}
}
})
```
## 跨行跨列的单元格
数据表格支持跨行跨列的单元格，该功能通过 `configs` 选项进行设置。例如设置第 1 行第一个单元格在水平方向上跨越 2 个单元格，设置第 2 行第 3 个单元格在垂直方向上跨越 3 行，则 `configs` 选项设置如下：
<div class="example">
<div id="datagridSpanExample" class="datagrid">
<div class="datagrid-container"></div>
</div>
</div>
```html
<div id="datagridSpanExample" class="datagrid">
<div class="datagrid-container"></div>
</div>
```
```js
$('#datagridSpanExample').datagrid({
configs: {
R1C1: {colspan: 2},
R2C3: {rowspan: 3}
},
// ...
});
```
## 值转换器
值转换器为一个对象，包含如下属性，用于在读取值和设置值时对值进行转换操作。值转换器上可以包含如下属性：
* `getter`：转换函数，用于将值转换为界面上显示的值；
* `setter`：转换函数，用于将用户编辑的值更新到数据源中（暂不支持）。
值转换器 `getter` 函数包含如下参数：
* `value`：用于转换的原始值；
* `cell`：当前单元格信息对象；
* `datagrid`：当前数据表格实例对象。
<div class="example">
<div id="datagridValueOperatorExample" class="datagrid">
<header class="clearfix">
<h3>数据表格值转换器例子 <small>时间列通过值转换器进行来转换操作</small></h3>
</header>
<div class="datagrid-container"></div>
</div>
</div>
值转换器可以通过如下途径进行设置，不同途径生效范围不同。
通过 `valueOperator` 选项进行设置，会影响特定类型的数据，例如下例将所有事件戳类型转换为中文日期格式：
```js
$('#myDataGrid').datagrid({
dataSource: {
cols: [
{name: 'time', valueType: 'date', label: '时间'},
// ... 其他列定义
]
},
valueOperator: {
// date 值转换器会影响所以 valueType 为 `date` 的列
date: {
getter: function(dataValue, cell, dataGrid) {
return new Date(dataValue).toLocaleString();
}
}
}
})
```
<div class="alert alert-primary">
<h4>内置的日期值转换器</h4>
<p>数据表格已经内置了对日期类型（`valueType` 为 `date`）的转换支持，可以简单的通过 `defaultDateFormater` 来设置转换的日期格式。</p>
</div>
值转换器还可以通过列定义参数进行设置。上例可以写为：
```js
$('#myDataGrid').datagrid({
dataSource: {
cols: [
{
name: 'time',
label: '时间',
// 值转换器仅仅影响当前列
valueOperator: {
getter: function(dataValue, cell, dataGrid) {
return new Date(dataValue).toLocaleString();
}
}
},
// ... 其他列定义
]
}
});
```
值转换器还可以通过 `configs` 选项单独为某个单元格或某行进行设置。例如仅仅为第 2 行第 1 列应用日期值转换器“
```js
$('#myDataGrid').datagrid({
dataSource: {
cols: [
{name: 'time', valueType: 'date', label: '时间'},
// ... 其他列定义
]
},
configs: {
R2C1: {
// 值转换器仅影响第 2 行第 1 列的单元格
valueOperator: {
getter: function(dataValue, cell, dataGrid) {
return new Date(dataValue).toLocaleString();
}
}
}
}
})
```
## 自适应列宽
默认情况下列宽如果没有指定的话会自动进行调整，在保证最小列宽的情况下自动根据调整其他列的宽度，确保所以列宽能够填满水平空间，如果水平空间不够显示所以列，则会允许用户在水平方向上滚动浏览其他列。如果不需要自适应列宽功能可以将 `responsive` 选项设置为 `false`，并且在列定义中为每一列手动设置宽度。
当启用自适应列宽功能时，所有没有指定宽度的列会平分剩余的水平空间，但仍然可以通过配置为列宽设置一个权值，使得拥有更大权值的列获得更多的空间。权值通过 列定义的 `width` 属性设置，必须小于 `1`。
```js
$('#myDataGrid').datagrid({
dataSource: {
cols:[
{name: 'time', label: '时间', width: 132},
{name: 'hera', label: '英雄', width: 134},
{name: 'action', label: '动作', width: 109},
// target 列自适应，占据剩余列宽的 1/4
{name: 'target', label: '目标', width: 0.25},
// desc 列自适应，占据剩余列宽的 3/4
{name: 'desc', label: '描述', width: 0.75}
],
}
});
```
## 个性化配置
通过 `configs` 选项可以为某行、某列或某个单元格应用个性化配置。`configs` 选项为一个对象，键值为要配置的行、列或单元格标识，对应值为配置项。
配置标识格式通常是 `R行号C列号`，可以是如下形式：
* `#10`：表示数据项 ID 属性为 `10` 的数据对应的行；
* `R0`：表示第 0 行，即标题行，相当于 `#header`；
* `R1`：表示第 1 行；
* `C0`：表示第 0 列，即序号列；
* `C2`：表示第 2 行；
* `R1C1`：表示第 1 行第 1 列的单元格；
* `#11C2`：表示数据项 ID 属性为 `10` 的数据对应的行，第 2 列的单元格。
配置项支持如下属性：
* `html`: 默认为 `false`，如果设置为 `true`，则在渲染所匹配单元格时将内容作为 html 源码更新到页面上；
* `style`: 可选，在所匹配的单元格元素上要添加的样式（使用 jQuery CSS 样式定义对象规则）；
* `className`: 可选，在所匹配的单元格元素上要添加的类名。
下面的例子中将第 2 列的单元格添加 `.text-right` 类实现单元格内文本靠右对齐，并且更改文本颜色和背景色，将第 1 列 第 1 个单元格添加下划线样式：
<div class="example">
<div id="datagridConfigsExample" class="datagrid"></div>
</div>
```html
<div id="datagridConfigsExample" class="datagrid"></div>
```
```js
$('#datagridConfigsExample').datagrid({
dataSource: {...},
configs: {
C2: {
className: 'text-right',
style: {
color: '#00b8d4',
backgroundColor: '#e0f7fa'
}
},
R1C1: {
style: {textDecoration: 'underline'}
}
}
})
```
`configs` 选项还可以为一个回调函数，该回调函数包含一个参数 `selector` 为当前要获取配置项的标识。
```js
$('#myDataGrid').datagrid({
dataSource: {...},
configs: function(selector) {
if (selector === 'R1C1') {
return {color: 'red'};
}
}
});
```
## 自定义模板
只需要为数据表格提供一个空的 `.datagrid` 元素即可进行初始化。在 `.datagrid` 元素内添加其他内容仍然是受支持的。默认情况下，数据表格渲染容器元素 `.datagrid-container` 是被自动添加到 `.datagrid` 元素内部最后位置，如果需要控制 `.datagrid-container` 的位置，只需要手动在合适到位置添加一个空的 `.datagrid-container` 元素。
```html
<div class="datagrid">
<h1>标题</h1>
<div class="search-box">...搜索框</div>
<div class="datagrid-container">...数据表格显示区域</div>
<div>其他内容</div>
</div>
```
## 外观选项
### 移除垂直边框
使用 `.datagrid-borderless` 来移除垂直边框。
<div class="example">
<div id="datagridBorderlessExample" class="datagrid datagrid-borderless"></div>
</div>
```html
<div id="datagridBorderlessExample" class="datagrid datagrid-borderless"></div>
```
### 隔行变色
<div class="example">
<div id="datagridStripedExample" class="datagrid datagrid-striped"></div>
</div>
```html
<div id="datagridStripedExample" class="datagrid datagrid-striped"></div>
```
## 选项
所有可用的选项包括：
<table class="table table-bordered">
<thead>
<tr>
<th style="width: 140px">选项</th>
<th style="width: 150px">名称</th>
<th style="width: 150px">可用值</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>width</code></td>
<td>显示区域宽度</td>
<td>默认为 `'auto'`</td>
<td>允许设置为 CSS 所支持的宽度表示形式。</td>
</tr>
<tr>
<td><code>height</code></td>
<td>显示区域高度</td>
<td>默认为 `400`</td>
<td>当启用分页功能时，如果设置为 `'page'`，则自动将显示区域高度设置为当前页所有行的高度总和。</td>
</tr>
<tr>
<td><code>dataSource</code></td>
<td>数据源</td>
<td>默认为 `null`</td>
<td>参见上文 "数据源" 相关内容。</td>
</tr>
<tr>
<td><code>configs</code></td>
<td>个性化配置</td>
<td>默认为 `null`</td>
<td>参见上文 "个性化配置" 等章节相关内容。</td>
</tr>
<tr>
<td><code>states</code></td>
<td>初始化状态</td>
<td>默认为 `null`</td>
<td>
<p>支持如下属性：</p>
<ul>
<li>`pager`：初始状态下的分页信息，参见上文“分页”内容；</li>
<li>`sortBy`：初始状态下的排序列，参见上文“排序”内容；</li>
<li>`order`：初始状态下的排序顺序，参见上文“排序”内容；</li>
<li>`selections`：初始状态下的行选中状态，参见上文“行选中”内容；</li>
<li>`search`：初始状态下的搜索关键字，参见上文“搜索”内容；</li>
<li>`fixedLeftUntil`：左侧固定列序号最大值，参见上文“固定行和列”内容；</li>
<li>`fixedTopUntil`：上方侧固定行序号最大值，参见上文“固定行和列”内容；</li>
<li>`fixedRightFrom`：右侧固定列序号最小值，参见上文“固定行和列”内容；</li>
<li>`fixedBottomFrom`：底部侧固定行序号最小值，参见上文“固定行和列”内容；</li>
</ul>
</td>
</tr>
<tr>
<td><code>borderWidth</code></td>
<td>单元格边框宽度</td>
<td>默认为 `1`</td>
<td>如果设置为 `0`，则不显示单元格边框。</td>
</tr>
<tr>
<td><code>rowDefaultHeight</code></td>
<td>行高</td>
<td>默认为 `36`</td>
<td></td>
</tr>
<tr>
<td><code>colAutoDefaultWidth</code></td>
<td>自适应列默认宽度</td>
<td>默认为 `80`</td>
<td></td>
</tr>
<tr>
<td><code>colAutoMinWidth</code></td>
<td>自适应列最小宽度</td>
<td>默认为 `50`</td>
<td></td>
</tr>
<tr>
<td><code>showHeader</code></td>
<td>是否显示标题行</td>
<td>默认为 `true`</td>
<td>如果设置为 `false`，则不显示标题行，即行序号为 `0` 的行。</td>
</tr>
<tr>
<td><code>headerHeight</code></td>
<td>标题行高度</td>
<td>默认为 `36`</td>
<td></td>
</tr>
<tr>
<td><code>showRowIndex</code></td>
<td>是否显示行序号列</td>
<td>默认为 `true`</td>
<td>如果设置为 `false`，则不显示行序号列，即列序号为 `0` 的列。</td>
</tr>
<tr>
<td><code>rowIndexWidth</code></td>
<td>行序号列宽度</td>
<td>默认为 `'auto'`</td>
<td>自动计算行序号列宽度</td>
</tr>
<tr>
<td><code>hoverRow</code></td>
<td>是否显示行悬停效果</td>
<td>默认为 `true`</td>
<td>启用后，鼠标悬停在行上会高亮行。</td>
</tr>
<tr>
<td><code>hoverCol</code></td>
<td>是否显示列悬停效果</td>
<td>默认为 `true`</td>
<td>启用后，鼠标悬停在列标题上会高亮对应的列。</td>
</tr>
<tr>
<td><code>hoverCell</code></td>
<td>是否显示单元格悬停效果</td>
<td>默认为 `false`</td>
<td>启用后，鼠标悬停在单元格上会高亮单元格。</td>
</tr>
<tr>
<td><code>responsive</code></td>
<td>是否启用自适应列宽</td>
<td>默认为 `true`</td>
<td>参见上文"自适应列宽"内容。</td>
</tr>
<tr>
<td><code>valueOperator</code></td>
<td>类型值转换器</td>
<td>默认为 `null`</td>
<td>参见上文"值转换器"内容。</td>
</tr>
<tr>
<td><code>defaultDateFormater</code></td>
<td>默认日期转换格式</td>
<td>默认为 `yyyy-MM-dd hh:mm`</td>
<td>参见上文"值转换器"内容。</td>
</tr>
<tr>
<td><code>partialRendering</code></td>
<td>是否启用局部渲染</td>
<td>默认为 `'auto'`</td>
<td>当启用分页时，此选项自动设置为 `true`，否则默认开启。</td>
</tr>
<tr>
<td><code>scrollDelay</code></td>
<td>滚动事件响应延迟</td>
<td>默认为 `0`</td>
<td>单位毫秒，当提高此值可以提高性能，但滚动效果存在延迟。</td>
</tr>
<tr>
<td><code>renderDelay</code></td>
<td>渲染延迟</td>
<td>默认为 `100`</td>
<td>单位毫秒，当提高此值可以提高性能，但可能存在更新较慢的情况。</td>
</tr>
<tr>
<td><code>searchFunc</code></td>
<td>搜索筛选函数</td>
<td>默认为 `null`</td>
<td>参见上文"搜索"内容。</td>
</tr>
<tr>
<td><code>sortFunc</code></td>
<td>排序比较函数</td>
<td>默认为 `null`</td>
<td>参见上文"排序"内容。</td>
</tr>
<tr>
<td><code>sortable</code></td>
<td>是否启用排序</td>
<td>默认为 `false`</td>
<td>当设置为 `true` 后允许用户点击标题行进行排序，参见上文"排序"内容。</td>
</tr>
<tr>
<td><code>checkable</code></td>
<td>是否启用行选择</td>
<td>默认为 `false`</td>
<td>当设置为 `true` 后允许用户选中行，参见上文"行选中"内容。</td>
</tr>
<tr>
<td><code>checkByClickRow</code></td>
<td>是否允许用户点击行任意位置选中行</td>
<td>默认为 `true`</td>
<td>当 `checkable` 设置为 `true` 时生效，参见上文"行选中"内容。</td>
</tr>
<tr>
<td><code>selectable</code></td>
<td>是否允许用户拖拽范围选中行</td>
<td>默认为 `true`</td>
<td>当 `checkable` 设置为 `true` 时生效，参见上文"行选中"内容。</td>
</tr>
<tr>
<td><code>cellCreator</code></td>
<td>单元格生成器</td>
<td>默认为 `null`</td>
<td>
<p>可以设置一个回调函数用于创建单元格元素，回调函数参数包括：</p>
<ul>
<li>`cell`：要创建的单元格对象；</li>
<li>`datagrid`：数据表格对象实例。</li>
</ul>
</td>
</tr>
<tr>
<td><code>cellFormator</code></td>
<td>单元格格式化函数</td>
<td>默认为 `null`</td>
<td>
<p>可以设置一个回调函数用于格式化单元格元素，回调函数参数包括：</p>
<ul>
<li>`$cell`：要格式化的单元格元素；</li>
<li>`cell`：当前单元格对象；</li>
<li>`datagrid`：数据表格对象实例。</li>
</ul>
</td>
</tr>
<tr>
<td><code>rowCreator</code></td>
<td>行生成器</td>
<td>默认为 `null`</td>
<td>
<p>可以设置一个回调函数用于创建行元素，回调函数参数包括：</p>
<ul>
<li>`rowIndex`：要创建的行序号；</li>
<li>`datagrid`：数据表格对象实例。</li>
</ul>
</td>
</tr>
<tr>
<td><code>showMessage</code></td>
<td>出现错误时是否显示消息</td>
<td>默认为 `true`</td>
<td></td>
</tr>
<tr>
<td><code>mouseWheelFactor</code></td>
<td>滚动鼠标滚轮时的滚动速度</td>
<td>默认为 `1`</td>
<td></td>
</tr>
</tbody>
</table>
## 属性和方法
### `setPager(page, recTotal, recPerPage)`
设置分页信息，参数定义如下：
* `page`：要设置的当前页码，如果传递值为 `-1`，则不设置此值；
* `recTotal`：记录总数，如果传递值为 `-1`，则不设置此值；
* `recPerPage`：每页记录数，如果传递值为 `-1`，则不设置此值。
该方法还有另一种参数形式：`setPager(pager)`，其中 `pager` 参数为一个对象，对象上的属性涵盖列上述参数。
```js
// 获取数据表格实例
var myDataGrid = $('#myDataGrid').data('zui.datagrid');
// 设置第 2 页
myDataGrid.setPager(2);
```
### `gotoPage(page)`
设置当前页码，并重新渲染界面，参数定义如下：
* `page`：要设置的当前页码；
```js
// 获取数据表格实例
var myDataGrid = $('#myDataGrid').data('zui.datagrid');
// 设置第 2 页
myDataGrid.gotoPage(2);
```
### `setSearch(searchString)`
设置搜索关键字，参数定义如下：
* `searchString`：用于搜索的关键字字符串，多个关键字使用空格分隔。
```js
// 获取数据表格实例
var myDataGrid = $('#myDataGrid').data('zui.datagrid');
// 搜索 “老虎”
myDataGrid.setSearch('老虎');
```
### `search(searchString)`
相当于 `setSearch(searchString)`，但执行完后会重新渲染界面。
### `setSorter(sortBy, order)`
设置排序规则，参数定义如下：
* `sortBy`：当前用于排序的列名；
* `order`：排序顺序，可选值包括 asc（升序），desc（降序）。
```js
// 获取数据表格实例
var myDataGrid = $('#myDataGrid').data('zui.datagrid');
// 按照名称 name 降序排列
myDataGrid.setSorter('name', 'desc');
```
### `sortBy(sortBy, order)`
相当于 `setSorter(sortBy, order)`，但执行完后会重新渲染界面。
### `setDataSource(dataSource)`
重新设置数据源，参数定义如下：
* `dataSource`：要设置的新的数据源对象。
### `getFilterParams()`
获取当前数据筛选信息，返回一个对象包含如下属性：
* `page`: 当前显示的页码；
* `recPerPage`: 当前设定每页显示的数据个数；
* `search`: 当前用于检索数据的文本；
* `sortBy`: 当前排序依据的列名；
* `order`: 当前排序的顺序，包括顺序（`'asc'`）和倒序（`'desc'`）。
### `showMessage(message, type, autoCloseTime)`
在界面上显示一个消息，参数定义如下：
* `message`：要显示的消息文本；
* `type`：消息类型，允许值包括 `'primary'`、 `'success'`、 `'danger'`、 `'warning'`、 `'info'`、 `'default'`；
* `autoCloseTime`：消息自动关闭的时间，默认为 `5000`，如果设置为 `0`，则不自动关闭。
```js
// 获取数据表格实例
var myDataGrid = $('#myDataGrid').data('zui.datagrid');
// 在界面上显示 'haha' 消息。
myDataGrid.showMessage('haha', 'success');
```
### `renderLoading(loading)`
切换显示加载中状态指示器，其中参数定义如下：
* `loading`：当设置为 `true` 时则显示加载中状态指示器，否则隐藏状态指示器，也可以设置为一个字符串，用于显示加载中指示器上的提示文本。
```js
var myDataGrid = $('#myDataGrid').data('zui.datagrid');
myDataGrid.renderLoading('正在努力获取数据...');
```
### `getData()`
获取当前界面上显示对数据。
### `getRowLayout(rowIndex)`
获取指定行布局信息，其中参数定义如下：
* `rowIndex`：要获取的行序号。
### `updateLayout()`
更新布局信息。
### `getCell(rowIndex, colIndex)`
获取指定单元格信息，其中参数定义如下：
* `rowIndex`：要获取的单元格所在行序号；
* `colIndex`：要获取的单元格所在列序号。
### `getRowConfig(rowIndex)`
获取行配置信息，其中参数定义如下：
* `rowIndex`：要获取的行序号。
### `getColConfig(colIndex)`
获取列配置信息，其中参数定义如下：
* `colIndex`：要获取的列序号。
### `getColConfigByName(colName)`
根据列名称获取列配置信息，其中参数定义如下：
* `colName`：要获取的列名称。
### `getCellConfig(rowIndex, colIndex)`
获取指定单元格配置信息，其中参数定义如下：
* `rowIndex`：要获取的单元格所在行序号；
* `colIndex`：要获取的单元格所在列序号。
### `isRowChecked(rowId)`
检查指定的行是否被选中，其中参数定义如下：
* `rowId`：要要检查对行编号。
### `checkRow(rowIndex, checked)`
手动设置指定行选中状态，其中参数定义如下：
* `rowIndex`：要设置的行序号；
* `checked`：如果为 true 设置为选中，如果为 false 设置为非选中，否则根据之前第状态切换为另一个状态。
### `getCheckItems()`
获取所有被选中的数据项。
### `renderCell(rowIndex, colIndex)`
重新渲染单元格，其中参数定义如下：
* `rowIndex`：要操作的单元格所在行序号；
* `colIndex`：要操作的单元格所在列序号。
### `renderRow(rowIndex)`
重新渲染行，其中参数定义如下：
* `rowIndex`：要操作的行序号。
### `renderData()`
重新渲染所有行及单元格。
### `renderScrolls()`
重新渲染滚动条。
### `renderFixeds()`
重新渲染固定的行和列。
### `render()`
重新从数据源获取数据并渲染整个数据表格，包括行、列、滚动条等。
### `setScrollbarOffset(offsetX, offsetY)`
设置滚动条位置，其中参数定义如下：
* `offsetX`：滚动条距离左侧的距离，如果设置为 `null`，则不设置左侧滚动条距离；
* `offsetY`：滚动条距离上方的距离，如果设置为 `null`，则不设置上方滚动条距离。
### `scroll(scrollLeft, scrollTop)`
设置滚动距离，其中参数定义如下：
* `scrollLeft`：水平滚动距离，如果设置为 `null`，则不设置水平滚动距离；
* `scrollTop`：垂直滚动距离，如果设置为 `null`，则不设置垂直滚动距离。
## 事件
### `onRender`
当数据表格重新渲染后触发。
```js
// 在初始化的时候设置事件回调函数
$('#dataGrid').datagrid({
onRender: function() {
// 表格已重新渲染
}
});
```
```js
// 使用 jquery 的 $().on() 方法监听事件
$('#dataGrid').on('onRender', function(event) {
// 表格已重新渲染
});
```
### `onScroll`
当滚动位置发生变更时触发，其中回调函数参数包括：
* `scrollLeft`：水平滚动距离；
* `scrollTop`：垂直滚动距离；
* `scrollInfo`：其他信息。
```js
// 在初始化的时候设置事件回调函数
$('#dataGrid').datagrid({
onScroll: function(scrollLeft, scrollLeft, scrollInfo) {
// 处理滚动后的操作
}
});
```
```js
// 使用 jquery 的 $().on() 方法监听事件
$('#dataGrid').on('onScroll', function(event, scrollLeft, scrollLeft, scrollInfo) {
// 处理滚动后的操作
});
```
### `onLoad`
当重新从数据源加载数据后触发，其中回调函数参数包括：
* `result`：如果加载成功，则为加载后的数据列表，否则为 `false`。
```js
// 在初始化的时候设置事件回调函数
$('#dataGrid').datagrid({
onLoad: function(result) {
if (result !== false) {
console.log('数据加载成功', result);
}
}
});
```
```js
// 使用 jquery 的 $().on() 方法监听事件
$('#dataGrid').on('onLoad', function(event, result) {
if (result === false) {
console.log('数据加载失败。');
}
});
```
### `onSelectRow`
当选中或取消选中表格行时触发，其中回调函数参数包括：
* `rowId`：选中状态变更的行 ID；
* `checked`：`true` 表示选中，`false` 表示取消选中；
* `selections`：当前所有选中的行。
```js
// 在初始化的时候设置事件回调函数
$('#dataGrid').datagrid({
onSelectRow: function(rowId, checked, selections) {
console.log('行', rowID, checked ? '选中了' : '取消选中了');
}
});
```
```js
// 使用 jquery 的 $().on() 方法监听事件
$('#dataGrid').on('onLoad', function(event, result) {
if (result === false) {
console.log('数据加载失败。');
}
});
```
<script src="dist/lib/selectable/zui.selectable.js"></script>
<script src="dist/lib/datagrid/zui.datagrid.js"></script>
<link href="dist/lib/datagrid/zui.datagrid.css" rel="stylesheet">
<script>
function afterPageLoad() {
// 获取示例数据
var getSampleData = function() {
var getRandomInt = function(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
var getRandomData = function(arr, start, end) {
if (start === undefined) {
start = 0;
}
if (end === undefined) {
end = arr.length;
}
return arr[getRandomInt(start, end - 1)];
};
var getLuckInt = window.getLuckInt = function(min, max, luck) {
return (luck % (max - min) + min);
};
var getLuckData = window.getLuckData = function(arr, start, end, luck) {
if (start === undefined || start === null) {
start = 0;
}
if (end === undefined || end === null) {
end = arr.length;
}
return arr[getLuckInt(start, end - 1, luck)];
};
var createDataSample = function(size) {
size = size || 100;
var heros = ['力丸', '幻影刺客', '祈求者', '斧王', '巫医', '天辉防御塔', 'Roshan', '嗜血狂魔', '宙斯', '影魔', '米波', '树精卫士'];
var actions = ['击杀', '拾取', '购买', '治疗'];
var items = ['圣剑', '虚灵之刃', '真视宝石', '恐鳌之心', '远行鞋', '治疗指环', '黑皇杖', '刷新球', '金箍棒', '蝴蝶', '诡计之雾', '显影之尘', '侦查守卫', '岗哨守卫', '漩涡', '天堂之戟', '刃甲', '希瓦的守护', '强袭胸甲', '阿托斯之棍', '银月之晶', '斯嘉蒂之眼', '玲珑心', '撒旦之邪力', '否决挂饰', '隐刀', '血棘', '邪恶镰刀', '白银之锋', '辉耀', '代达罗斯之殇', '幻影斧', '林肯法球', '阿哈利姆神杖', '死灵书'];
var runes = ['赏金神符', '双倍神符', '魔法神符', '极速神符', '不朽之守护', '奶酪'];
var cols = [
{label: '时间', name: 'time', width: 130, valueType: 'gametime', sort: true},
{label: '英雄', name: 'hero', width: 80},
{label: '动作', name: 'action', width: 80},
{label: '队友', name: 'teammate', width: 80},
{label: '敌人', name: 'enemy', width: 80},
{label: '物品/神符', name: 'item', width: 80},
{label: '获得经验', name: 'gotexps', width: 80, valueType: 'number'},
{label: '获得金钱', name: 'gotgolds', width: 80, valueType: 'number'},
{label: '累计经验', name: 'exps', width: 80, valueType: 'number'},
{label: '剩余金钱', name: 'golds', width: 80, valueType: 'number'},
{label: '描述', name: 'desc', width: 'auto', minWidth: 200},
{label: '累计人头', name: 'kills', width: 110, valueType: 'number'},
];
var createDataItem = function(index) {
var luckNumber = parseInt((Math.sin(index + 1) + '').substr(3));
var time = 600 + 5*index + getLuckInt(0, 5, luckNumber);
var action = getLuckData(actions, null, null, luckNumber);
var heroIndex = getLuckInt(0, action === '击杀' ? 6 : 4, luckNumber);
var hero = heros[heroIndex];
var teammate, enemy, item;
var heroData = {
golds: heroIndex*500*heroIndex + 71*index + getLuckInt(0, 71, luckNumber),
exps: heroIndex*300*heroIndex + 43*index + getLuckInt(0, 43, luckNumber),
kills: heroIndex + Math.floor(index/10)
};
var gotExps = 0;
var gotGolds = 0;
switch (action) {
case '击杀':
enemy = getLuckData(heros, 6, 9, luckNumber);
gotExps += getLuckInt(0, 1000 + index * 10, luckNumber);
gotGolds += getLuckInt(0, 200 + index * 8, luckNumber);
if (hero === '力丸') {
action = '偷摸';
} else if (hero === '斧王') {
action = '斩杀';
}
break;
case '购买':
item = getLuckData(items, null, null, luckNumber);
break;
case '拾取':
item = getLuckData(runes, null, null, luckNumber);
if (item === '赏金神符') {
gotExps += getLuckInt(0, 50 + index, luckNumber);
gotGolds += getLuckInt(0, 50 + index * 2, luckNumber);
}
break;
case '治疗':
teammate = getLuckData(heros, 0, 4, luckNumber);
if (hero === '巫医') {
action = '奶';
}
break;
}
heroData.golds += gotGolds;
heroData.exps += gotExps;
var desc = hero + action + '了“' + (item || teammate || enemy) + '”';
if (gotGolds) {
desc += '，获得了金钱 ' + gotGolds;
}
if (gotExps) {
desc += '，' + (gotGolds ? '并' : '') + '获得了经验 ' + gotExps;
}
desc += '。';
var dataItem = {
id: time,
time: time,
hero: hero,
action: action,
teammate: teammate || '',
enemy: enemy || '',
item: item || '',
gotgolds: gotGolds || '',
gotexps: gotExps || '',
exps: heroData.exps,
golds: heroData.golds,
kills: heroData.kills,
desc: desc
};
return dataItem;
};
return {
dataSource: {
cols: cols,
length: size,
getByIndex: createDataItem
},
valueOperator: {
gametime: {
getter: function(time) {
var hours = Math.floor(time/3600);
if (hours < 10) {
hours = '0' + hours;
}
var mins = Math.floor(time/60)%60;
if (mins < 10) {
mins = '0' + mins;
}
var secs = time%60;
if (secs < 10) {
secs = '0' + secs;
}
return hours + ':' + mins + ':' + secs;
}
}
},
generate: function (size) {
var result = [];
for(var i = 0; i < size; ++i) {
result.push(createDataItem(i));
}
return result;
}
};
};
var sampleSize = 10000000000000;
return createDataSample(sampleSize);
};
var sampleData = getSampleData();
$('#datagridExample,#datagridBorderlessExample,#datagridStripedExample').datagrid({
configs: {
'R0C0': {
label: '#'
},
'C1': {
style: {textAlign: 'right'}
},
'C2': {
style: {fontWeight: 'bold'}
}
},
dataSource: {
cols: sampleData.dataSource.cols,
data: sampleData.generate(100),
cache: true,
},
valueOperator: sampleData.valueOperator,
states: {
pager: {page: 1, recPerPage: 10},
},
height: 300,
renderDelay: 200,
checkable: true,
sortable: true,
hoverCell: true,
onSelectRow: function(rowIndex, checked, selections) {
console.log('>', rowIndex, checked, selections);
}
});
var simpleDataSource = {
cols: sampleData.dataSource.cols,
data: sampleData.generate(50),
};
$('#tableDataGridExample').datagrid({
height: 184
});
$('#remoteDataGridExample').datagrid({
height: 'page',
states: {
pager: {page: 1, recPerPage: 5},
},
dataSource: {
cache: false,
cols:[
{name: 'time', label: '时间', width: 132},
{name: 'hera', label: '英雄', width: 134},
{name: 'action', label: '动作', width: 109},
{name: 'target', label: '目标', width: 109},
{name: 'desc', label: '描述', width: 287}
],
remote: function(params) {
return {
// 原创请求地址
url: 'docs/partial/remote-data-' + params.page + '.json',
// 请求类型
type: 'GET',
// 数据类型
dataType: 'json'
};
}
},
});
$('#dynamicDataGridExample').datagrid($.extend({
defaultDateFormater: 'hh:mm:ss',
states: {
fixedTopUntil: 0,
fixedBottomFrom: sampleData.dataSource.length,
fixedRightFrom: 12,
pager: {page: 0}
},
configs: {
'C1': {
style: {textAlign: 'right'}
},
'C2': {
style: {fontWeight: 'bold', color: '#448aff'}
}
},
renderDelay: 200,
checkable: false,
sortable: false,
}, sampleData));
$('#datagridFixedExample').datagrid({
dataSource: simpleDataSource,
valueOperator: sampleData.valueOperator,
states: {
pager: {page: 1, recPerPage: 100},
fixedLeftUntil: 0,
fixedRightFrom: 12,
fixedTopUntil: 0,
fixedBottomFrom: 100,
},
height: 300,
});
$('#datagridSortExample').datagrid({
dataSource: {
cols: sampleData.dataSource.cols,
data: sampleData.generate(100),
},
valueOperator: sampleData.valueOperator,
sortable: true,
height: 300,
});
$('#datagridPageExample').datagrid({
dataSource: simpleDataSource,
states: {
pager: {page: 1, recPerPage: 20},
},
valueOperator: sampleData.valueOperator,
sortable: true,
height: 300,
});
$('#datagridSearchExample').datagrid({
dataSource: simpleDataSource,
states: {
pager: {page: 1, recPerPage: 20},
},
valueOperator: sampleData.valueOperator,
sortable: true,
height: 300,
});
$('#datagridCheckableExample').datagrid({
dataSource: simpleDataSource,
states: {
pager: {page: 1, recPerPage: 20},
},
valueOperator: sampleData.valueOperator,
checkable: true,
height: 300,
});
$('#datagridSpanExample').datagrid({
dataSource: simpleDataSource,
states: {
pager: {page: 1, recPerPage: 20},
},
configs: {
R1C1: {colspan: 2},
R2C3: {rowspan: 3}
},
valueOperator: sampleData.valueOperator,
height: 300,
});
$('#datagridValueOperatorExample').datagrid({
dataSource: simpleDataSource,
states: {
pager: {page: 1, recPerPage: 20},
},
valueOperator: {
// date 值转换器会影响所以 valueType 为 `date` 的列
gametime: {
getter: function(dataValue, cell, dataGrid) {
return '第' + (Math.floor(dataValue%60)) + '分钟第' + (dataValue%60) + '秒';
}
}
},
height: 300,
});
$('#datagridConfigsExample').datagrid({
dataSource: simpleDataSource,
states: {
pager: {page: 1, recPerPage: 20},
},
configs: {
C2: {
className: 'text-right',
style: {
color: '#00b8d4',
backgroundColor: '#e0f7fa'
}
},
R1C1: {
style: {textDecoration: 'underline'}
}
},
height: 300,
});
}
</script>