EasyUI 之datagrid 使用
来自:http://ycx211314.blog.163.com/blog/static/101670862011229105845754/
可选的参数
DataGrid 属性
覆写了 $.fn.datagrid.defaults.
参数名 | 类型 |
|
|
|
|
|
|
|
|
|
| 描述 | 默认值 |
---|
title | string |
|
|
|
|
|
|
|
|
|
| Datagrid面板的标题
| null | iconCls | string |
|
|
|
|
|
|
|
|
|
| 在面板上通过一个CSS类显示16x16图标。 | null | border | boolean |
|
|
|
|
|
|
|
|
|
| 设置面板是否具有边框
| true | width | number |
|
|
|
|
|
|
|
|
|
| datagrid面板的宽度 | auto | height | number |
|
|
|
|
|
|
|
|
|
| datagrid面板的高度 | auto | columns | array |
|
|
|
|
|
|
|
|
|
| DataGrid列配置对象 | null | frozenColumns | array |
|
|
|
|
|
|
|
|
|
| 冻结的列,被现实在左边 | null | striped | boolean |
|
|
|
|
|
|
|
|
|
| 设置是否让单元格显示条纹。默认false。 | false | method | string |
|
|
|
|
|
|
|
|
|
| 通过该方法类型请求远程数据。默认post。 | post | nowrap | boolean |
|
|
|
|
|
|
|
|
|
| 是否包裹数据,默认为包裹数据显示在一行
| true | idField | string |
|
|
|
|
|
|
|
|
|
| 标识字段,或者说主键字段
| null | url | string |
|
|
|
|
|
|
|
|
|
| 请求数据的URL. | null | loadMsg | string |
|
|
|
|
|
|
|
|
|
| 加载数据时显示的信息
| Processing, please wait … | pagination | boolean |
|
|
|
|
|
|
|
|
|
| 是否显示分页工具栏 | false | rownumbers | boolean |
|
|
|
|
|
|
|
|
|
| 是否显示行号
| false | singleSelect | boolean |
|
|
|
|
|
|
|
|
|
| 是否单选 | false | fit | boolean |
|
|
|
|
|
|
|
|
|
| 是否自动适应父容器
| false | pageNumber | number |
|
|
|
|
|
|
|
|
|
| 分页初始化行号 | 1 | pageSize | number |
|
|
|
|
|
|
|
|
|
| 初始化分页大小 | 10 | pageList | array |
|
|
|
|
|
|
|
|
|
| 分页大小选择列 | [10,20,30,40,50] | queryParams | object |
|
|
|
|
|
|
|
|
|
| 请求数据时额外发送的参数 | {} | sortName | string |
|
|
|
|
|
|
|
|
|
| 排序列 | null | sortOrder | string |
|
|
|
|
|
|
|
|
|
| 升序还是降序 'asc' 或者 'desc'. | asc |
|
Column 属性
DataGrid Columns 是一个数组对象, 数组里的对象也是一个数组,数组里的每一个小对象就是一个列字段,例如:
columns:[[
{field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},
{field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},
{title:'Item Details',colspan:4}
],[
{field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
{field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
{field:'attr1',title:'Attribute',width:100},
{field:'status',title:'Status',width:60}
]]
名称 | 类型
| 描述 | 默认值
|
---|
title | string | 列字段要现实的名称 | undefined | field | string | 列字段
| undefined | width | number | 宽度 | undefined | rowspan | number | 单元格行数 | undefined | colspan | number | 单元格列数 | undefined | align | string | 文本对齐方式,同align属性. | undefined | sortable | boolean | 是否可以被排序. | undefined | checkbox | boolean | 是否具有多选框 | undefined |
|
Events(事件)
Name | Parameters | Description |
---|
onLoadSuccess | none | 调用远程数据成功是激活 | onLoadError | none | 装载错误时激活 | onClickRow | rowIndex, rowData | 点击一行时激活,参数包括: rowIndex:点击的行数,从0开始 rowData: 当前行的数据 | onDblClickRow | rowIndex, rowData | 双击一行是触发,参数包括: rowIndex:点击的行数,从0开始 rowData: 当前行的数据 | onSortColumn | sort, order | 对一列进行排序时激活,参数包括: sort:排序字段名称 order: 排序规则,升序,降序 | onSelect | rowIndex, rowData | 选中一行时激活,参数有: rowIndex:选中的行数 rowData: 数据 | onUnselect | rowIndex, rowData | 取消选中时激活,参数: rowIndex:选中的行数 rowData: 数据 |
|
Methods(方法)
Name | Parameter | Description |
---|
options | none | 返回所有属性 |
resize | none | 重置大小布局 |
reload | none | 重新加载数据 |
fixColumnSize | none | 调整列的大小 |
loadData | param | 装载数据,以前的数据会被移除 |
getSelected | none | 返回选中的行,没有则返回空 |
getSelections | none | 返回所有的行,空则返回空数组 |
clearSelections | none | 取消所有选中
|
selectRow | index | 选中一行,参数为行号 |
selectRecord | idValue | 根据主键查询出一条记录 |
unselectRow | index | 取消选中一行 |