Grid - ChinaSS/Util GitHub Wiki
功能说明
Grid为数据列表组件，遵循AMD标准，依赖boostrap,jquery, 主要功能如下:
- 自定义工具栏
- 前/后端排序
- 表格数据分页
- 表格根据新参数重新加载，当页刷新
- 列可拖动, 动态调整列宽
- 表格行事件绑定
用法
require(["PDUtilDir/grid"], function(Grid){
Grid(config);
})
可通过
Grid.getGrid(id)取得实例化的grid对象 所有带下划线的属性或方法建议都不要使用 详细请见Demo样例
表格config对象
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| id | string | 无 | 存放表格面板id，表格缓存id，通过getGrid获取表格时使用，需保证唯一 |
| pageSize | number | 10 | 规定表格(每页,若设置分页)显示的数据条数 |
| title | string | 数据列表 | 表格标题 |
| index | boolean | false | 是否显示行数 |
| hidden | boolean | false | 表格初始化时显示或隐藏状态；若不设置该字段, 则表格默认显示；若设置该字段为true/false, 则初始化时会增加控制显示/隐藏的按钮 |
| multi | boolean | null | true/多选，false/单选 |
| draggable | boolean | false | 表格数据列是否可拖动 |
| pagination | boolean | true | 设置表格是否分页 |
| toolbar | array | null | 表格操作栏对象，详见后续说明 |
| layout | array | null | 表格列定义对象，详见后续说明 |
| data | array/object | null | 表格数据对象，详见后续说明 |
| trEvent | object | null | 设置表格行事件，详见后续说明 |
| queryParam | object | null | json键值对，表格查询时需要传递到后端的查询参数 |
toolbar
数组，数组项为json对象
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| id | string | 无 | 可选，按钮id |
| name | string | 无 | 必选，按钮名称 |
| icon | string | 无 | 可选，按钮图标，从图标库中选择即可 |
| callback | function | 无 | 必选，点击按钮后的回调函数 |
layout
数组，数组项为json对象
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| name | string | 无 | 必选，列标题 |
| field | string | 无 | 必选，字段名 |
| width | string | 无 | 可选，列宽度(ps:最小像素宽度30px) |
| align | string | 无 | 可选，列文字对齐方向（left/center/right） |
| sort | boolean | 无 | 可选，列数据是否可排序（静态数据自动前端排序，动态数据需后端支持） |
| click | function | 无 | 可选，列数据可点击，点击后的回调函数 |
| format | function | 无 | 可选，列数据格式化函数, 传入行数据, 返回处理后的字符串 |
data
- 为数组时，数组元素为json对象，加载静态数据
- 为对象时，其格式为:
data:{type:"URL",value:"url"},加载动态数据
trEvent
数组，设置行事件
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | string | 无 | 必选，标准事件类型 |
| callback | function | 无 | 必选，触发事件的回调函数 |
queryParam
Json对象，表格查询时，可以设置该属性的值，自动会发送到后端，可从iReq中获取Key
方法
通过实例化的Grid对象调用，即:
grid.getSelectedRow()
| 名称 | 参数 | 返回值 | 说明 |
|---|---|---|---|
| getGridPanel | 无 | jquery DOM | 得到表格DOM对象 |
| appendRow | json行数据对象 | 无 | 向当前页增加一行 |
| deleteRow | index | 无 | 删除指定index的行 |
| updateRow | json:{index:2,row:{}} |
无 | 更新指定行 |
| getChanges | type | array | type参数表明修改的类型，可选值：inserted，deleted，updated,没有传递type参数时，返回所有被修改的行. |
| getSelectedRow | 无 | array | 获取当前Grid所有选中数据 |
| getSelectedRowIndex | 无 | array | 获取当前Grid所有选中数据的index |
| getCurPageData | 无 | array | 得到当前页的数据 |
| clearSelectedRow | 无 | 无 | 清空选中的行 |
| refresh | 无 | 无 | 刷新表格当前页的数据 |
| reload | config对象 | 无 | 重新加载表格，如果config对象中有id属性不生效 |
事件
在config对象中配置
| 名称 | 参数 | 说明 |
|---|---|---|
| onSelectAll | boolean,全选/全不选 | 点击全选和选不选复选框时调用 |
| onSeletedChanged | rows，当前选中的数据 | 选中数据变更时自动调用 |
| onBeforeRenderRow | row,行数据 | this为grid对象，可对row做处理再return row，若增加row["_checked"]=true，则选中单选或多选框 |
| onAfterRenderRow | rows，行数据 | this为$tr对象 |
| onAfterRenderTableBody | 无 | this为grid对象，只要重新渲染表格内容就会触发（翻页、切换每页显示条数、点击列排序） |