jQuery-EasyUI.ppt

数据表格 – DataGrid 数据表格显示的数据以表格的形式，并提供了丰富的选择，排序，分组和编辑数据的支持。这个数据表格被设计以缩短开发时间，并要求开发商没有具体的知识。它是轻量级的，功能丰富的。单元格合并，多列标题，冻结列和页脚是其功能只是一小部分。 案例如下： 通过TABLE标记创建的DataGrid。嵌套的TH标签定义的列的表 table?class=easyui-datagrid?style=width:400px;height:250px?? ????????data-options=url:datagrid_data.json,fitColumns:true,singleSelect:true?? ????thead?? ????????tr?? ????????????th?data-options=field:code,width:100Code/th?? ????????????th?data-options=field:name,width:100Name/th?? ????????????th?data-options=field:price,width:100,align:rightPrice/th?? ????????/tr?? ????/thead?? /table? 1.DataGrid（数据网格）讲解 数据表格属性（DataGrid Properties） 属性继承控制面板，以下是数据表格独有的属性 nowrap boolean 设置为true，当数据长度超出列宽时将会自动截取。 true idField string 表明该列是一个唯一列。 null url string 一个用以从远程站点请求数据的超链接地址。 null pagination boolean 设置true将在数据表格底部显示分页工具栏。 false rownumbers boolean 设置为true将显示行数。 false singleSelect boolean 设置为true将只允许选择一行。 false pagePosition string ?定义的分页栏的位置。可用的值有 top,bottom,both。此属性是可自1.3版本。bottom pageNumber number 当设置分页属性时，初始化分页码。 1 pageSize number 当设置分页属性时，初始化每页记录数。 10 pageList array 当设置分页属性时，初始化每页记录数列表。 [10,20,30,40,50] 列属性（Column Properties） 数据表格的列是一个对象数组，即这个对象中的元素也是一个数组（js中数组是对象）。 对象数组中的每一个元素都是可配置的对象，每个可配置对象定义一个列。 title string 列标题。 undefined field string 列字段。 undefined width number 列宽。 undefined rowspan number 表明一个单元格跨几行。 colspan number 表明一个单元格跨几列。 align string 表明如何对其列数据，可选值：left，right，center。 checkbox boolean 设置为true将显示复选框。 formatter function 格式化单元格函数， 有3个参数：value：字段的值。rowData：行数据。rowIndex：行索引。 示例: $(#dg).datagrid({ columns:[[ {field:userId,title:User, width:80, formatter: function(value,row,index){ if (row.user){ return ; } else { return value; } } } ]] }); 方法： load param 载入并显示第一页的记录，如果传递了‘param’参数，它将会覆盖查询参数属性的值。通过传递一些参数，通常做一个查询，这个方法可以被称为从服务器加载新数据。 案例代码 $(#dg).datagrid(load); reload param 重载记录，跟‘load’方法一样但是重载的是当前页的记录而非第一页。 案例代码 $(#dg).datagrid(reload); getSelected none 返回第一个被选择的行记录或null。案例代码 $(#dg).datagrid(getSelected) 综合案例：使用dataGride分页显示数据