Datagrid(数据表)
依赖的组件
resizable
linkbutton
pagination
DataGrid Options对象的属性
名称(Name) | 类型(Type) | 描述(Description) | 默认值(Default) |
Titile | string | Datagrid数据表的标题 | null |
iconCls | string | 一个样式类提供作为数据表图标的背景图标 | null |
border | boolean | 是否显示数据表边框,true-显示 false-不显示 | true |
width | number | 设置Datagrid的宽度 | auto |
height | number | 设置Datagrid的高度 | auto |
columns | array | 配置Datagrid列属性的Object对象 | null |
frozenColumns | array | 与columns属性一样,但是该属性设置的列会被冻结在Datagrid的左边 | null |
striped | boolean | 是否显示斑马线 | false |
Method | string | 远程数据的获取类型,可取值为post或get | post |
nowrap | boolean | 是否把数据显示在一行上,如果设置为false,当数据长度超过列长度时,超过的部分被截掉 | true |
idField | string | 表明哪个字段是一个标识字段 | null |
url | string | 从远程地址请求数据的url | null |
loadMsg | string | 当从远程站点加载数据时显示的提示消息 | Processing, please wait … |
pagination | boolean | 设置是否有分页功能 | false |
rownumbers | number | 是否显示行号列 | false |
singleSelect | number | 设置是否可只选一行 | false |
fit | boolean | 设置是否可以让表格自动缩放以适应父容器 | false |
pageNumber | number | 当设置pagination属性时,初始化页码 | 1 |
pageSize | number | 当设置pagination属性时,初始化每一页显示的数量 | 10 |
pageList | array | 当设置pagination属性时,初始化每页可选的数据大小清单 | [10,20,30,40,50] |
queryParams | Object | 当请求远程数据时,发送的额外的参数 | {} |
sortName | string | 定义哪一列可以排序 | null |
sortOrder | string | 定义列排序的方式,递增(asc)或递减(desc) | asc |
Columns属性
Name | Type | Description | Default |
title | 字符串 | 列标题文字 | undefined |
field | 字符串 | 列字段名称 | undefined |
width | 数字 | 列宽度 | undefined |
rowspan | 数字 | 该列占几行单元格 | undefined |
colspan | 数字 | 该列占几列单元格 | undefined |
align | 字符串 | 数据对其方式,可选值有left,right,center | undefined |
sortable | 布尔 | 是否允许该列排序 | undefined |
checkbox | 布尔 | 是否显示选择框 | undefined |
formatter | 函数 | 包含三个参数: value: 列字段对应的值 rowData: 行数据对象 rowIndex: 行索引 | undefined |
editor | string,object | 指示编辑类型,有两个子属性,type和options;type可选的编辑框有:text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree;options指定一个对象,与编辑类型对应,数字框对应的options属性中有precision,表示小数点位数 | undefined |
事件
Name | Parameters | Description |
onLoadSuccess | none | 远程数据成功加载时触发 |
onLoadError | none | 远程数据加载发生错误时触发 |
onClickRow | rowIndex,rowData | 用户点击一行时触发,参数包括: rowIndex:被点击行的索引,索引从0开始 rowData:被点击行对应的数据记录 |
onDblClickRow | rowIndex,rowData | 用户双击一行时触发,参数同上 |
onSortColumn | sort,order | 用户对一列进行排序时触发,参数包括: sort:被排序的类字段名称 order:排序的命令,asc 或者 desc |
onSelect | rowIndex,rowData | 用户选择一行时触发 |
onUnselect | rowIndex,rowData | 当用取消选择一行时触发 |
方法
Name | Parameters | Description |
options | none | 返回一个options对象 |
resize | none | 调整表格大小和布局 |
reload | none | 重新加载行 |
fixColumnSize | none | 固定列的大小 |
loadData | param | 加载本地数据,旧行将被删除 |
getSelected | none | 返回被选中的第一行记录或者null |
getSelections | none | 返回所有被选中的行,当没有一条记录别选中时则返回一个空的数组对象 |
clearSelections | none | 取消所有选中 |
selectRow | index | 选择一行,行索引从0开始 |
selectRecord | idValue | 通过行id值选择一行 |
unselectRow | index | 取消选中某行 |
beginEdit | index | 开始编辑某行 |
endEdit | index | 结束编辑某行 |
cancelEdit | index | 取消编辑某行 |
refreshRow | index | 刷新一行的数据 |
appendRow | row | 添加新行 |
deleteRow | index | 删除一行 |
getChanges | type | 自最后一次数据提交开始获取被改变的行,类型参数指示的是行的改变类型,可能的值是:inserted,deleted,updated等,当类型参数没有指定时将返回所有被改变的行 |
acceptChanges | none | 自数据被加载或者最后一次调用acceptChanges的时间开始,提交所有的数据变化 |
rejectChanges | none | 自所有数据被创建或者最后一次调用accepChanges方法开始回滚所有变化了的数据 |
注:示例中用到了分页,Datagrid依赖pagination(分页)组件,下面讲解以下pagination组件的属性和事件
Paginagion
Pagination属性
属性名 | 类型 | 描述 | 默认值 |
total | 数字 | 当分页建立时设置记录的总数量 | 1 |
pageSize | 数字 | 每一页显示的数量 | 10 |
pageNumber | 数字 | 当分页建立时,显示的页数 | 1 |
pageList | 数组 | 用户可以修改每一页的大小,pageList属性定义了多少种大小可以改变. | [10,20,30,50] |
loading | 布尔 | 定义数据是否正在加载 | false |
buttons | 数组 | 定义自定义按钮,每个按钮包含两个属性:iconCls: 显示背景图像的CSS类 handler: 当一个按钮被点击时的处理函数 | null |
showPageList | 布尔 | 定义是否显示页面列表 | true |
showRefresh | 布尔 | 定义是否显示刷新按钮 | true |
beforePageText | 字符串 | 在输入框组件前显示的标签 | Page |
afterPageText | 字符串 | 在输入框组件后显示的标签 | Of {pages} |
displayMsg | 字符串 | 显示一个页面的信息。 | Displaying {from} {to} of {total} items 注:{param}是固定的参数设置,不能修改 |
Pagination事件
事件名 | 参数 | 描述 |
onSelectPage | pageNumber, pageSize | 当用户选择一个新页时触发,回调函数包含两个参数: pageNumber: 新页面的页数pageSize: 新页面的大小 |
onBeforeRefresh | ageNumber, pageSize | 刷新按钮被点击之前触发,如果返回false则取消刷新操作 |
onRefresh | ageNumber, pageSize | 刷新以后触发 |
onChangePageSize | ageSize | 改变页面大小时触发 |