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组件的属性和事件
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 | 改变页面大小时触发 |
1.实例 (1)代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>EasyUI Datagrid</title> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <script type="text/javascript" src="../jquery-1.4.2.min.js"></script> <script type="text/javascript" src="../jquery.easyui.min.js"></script> <script> $(function(){ $('#test').datagrid({ title:'My Title', iconCls:'icon-save', 800, height:450, nowrap: true, striped: true, url:'datagrid_data.json', sortName: 'code', sortOrder: 'desc', idField:'code', frozenColumns:[[ {field:'ck',checkbox:true}, {title:'code',field:'code',80,sortable:true} ]], columns:[[ {title:'Base Information',colspan:3}, {field:'opt',title:'Operation',100,align:'center' ,rowspan:2,formatter:function(value,rec){ return '<span style="color:red">Edit Delete</span>'; } }], [{field:'name',title:'Name',120}, {field:'addr',title:'Address',120,rowspan:2,sortable:true}, {field:'col4',title:'Col41',150,rowspan:2} ]], pagination:true, rownumbers:true, singleSelect:true, //事件调用的方式 onLoadSuccess: function (){alert('load data successfully!');} toolbar:[{ //设置工具条，该工具条中设置了三个功能按钮 text:'Add', //标题为’Add’的工具条按钮 iconCls:'icon-add',//工具条按钮显示的图标 handler:function(){//工具条按钮实现的功能函数 alert('add') } },{ text:'Cut', //标题为’Cut’的工具条按钮 iconCls:'icon-cut', disabled:true, handler:function(){ alert('cut') } },'-',{ text:'Save', iconCls:'icon-save', handler:function(){ alert('save') } }] }); //获取页面分页对象 var p = $('#test').datagrid('getPager'); if (p){ $(p).pagination({ //设置分页功能栏 //分页功能可以通过Pagination的事件调用后台分页功能来实现 onBeforeRefresh:function(){ alert('before refresh'); } }); } }); function resize(){ $('#test').datagrid({ title: 'New Title', striped: true, 650, queryParams:{ p:'param test', name:'My Name' } }); } //获取Datagrid Options对象属性的方式 function getGridProperty(){ //先获取Options对象，然后通过Options获取其属性 var optionsObj = $('#test').datagrid('options'); var queryParams = optionsObj.queryParams; } //以下为调用Datagrid的函数的自定义方法 function getSelected(){ var selected = $('#test').datagrid('getSelected'); alert(selected.code+":"+selected.name); } function getSelections(){ var ids = []; var rows = $('#test').datagrid('getSelections'); for(var i=0;i<rows.length;i++){ ids.push(rows[i].code); } alert(ids.join(':')) } function clearSelections(){ $('#test').datagrid('clearSelections'); } function selectRow(){ $('#test').datagrid('selectRow',2); } function selectRecord(){ $('#test').datagrid('selectRecord','002'); } function unselectRow(){ $('#test').datagrid('unselectRow',2); } </script> </head> <body> <h1>DataGrid</h1> <div style="margin-bottom: 10px;"> <a href="#" onclick="resize()">resize</a> <a href="#" onclick="getSelected()">getSelected</a> <a href="#" onclick="getSelections()">getSelections</a> <a href="#" onclick="clearSelections()">clearSelections</a> <a href="#" onclick="selectRow()">selectRow</a> <a href="#" onclick="selectRecord()">selectRecord</a> <a href="#" onclick="unselectRow()">unselectRow</a> </div> <table id="test"></table> </body> </html>