jQuery EasyUI API - Grid - DataGrid [原创汉化官方API]

easyui 中datagrid
$('#dg').datagrid('getSelected');返回第一个被选中的行或如果没有选中的行则返回null。
$('#dg').datagrid('getSelections');返回所有被选中的行,当没有记录被选中的时候将返回一个空数组。
$('#dg').datagrid('getRows');
$("#dg").datagrid('getChanges',"inserted");//获取新添加的行
$("#dg").datagrid('getChanges',"deleted");//获取删除的行
$("#dg").datagrid('getChanges',"updated");//获取修改的行
$('#dg').datagrid('getChanges');
$('#dg').datagrid('validateRow', editIndex);//返回bool 值,用来验证选项

DataGrid

$('#dg').datagrid('appendRow',{status:'P'});
$('#dg').datagrid('selectRow',index);
$('#dg').datagrid('deleteRow',index);
$('#dg').datagrid('updateRow', {
index: index,
row: {}
});

  继承自 $.fn.panel.defaults,覆盖默认值 $.fn.datagrid.defaults.

$('#dg').datagrid('beginEdit', getRowIndex(target));
$('#dg').datagrid('endEdit', getRowIndex(target));
$('#dg').datagrid('cancelEdit', getRowIndex(target));

 

 

 

  DataGrid控件显示数据以表格的形式提供了丰富的选择,支持排序,组和编辑数据。

 

  DataGrid控件被设计来减少开发时间和要求开发商没有特定的知识。它是轻量级的和功能丰富的。合并单元格,多列标题,冻结列和页脚是仅有的几个特点。

 

 

 

 

[依赖于]

 

panel

resizable

linkbutton

pagination

 

[使用实例]

在HTML标签中,从现有的元素创建表元素、定义列、行中的数据:

 

复制代码

 1 <table class="easyui-datagrid">  

 2     <thead>  

 3         <tr>  

 4             <th data-options="field:'code'">Code</th>  

 5             <th data-options="field:'name'">Name</th>  

 6             <th data-options="field:'price'">Price</th>  

 7         </tr>  

 8     </thead>  

 9     <tbody>  

10         <tr>  

11             <td>001</td><td>name1</td><td>2323</td>  

12         </tr>  

13         <tr>  

14             <td>002</td><td>name2</td><td>4612</td>  

15         </tr>  

16     </tbody>  

17 </table>  

复制代码

 

 

通过<table>标签创建DataGrid,在table表格里嵌套<th>标签定义。

 

复制代码

 1 <table class="easyui-datagrid" style="width:400px;height:250px"  

 2         data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">  

 3     <thead>  

 4         <tr>  

 5             <th data-options="field:'code',width:100">Code</th>  

 6             <th data-options="field:'name',width:100">Name</th>  

 7             <th data-options="field:'price',width:100,align:'right'">Price</th>  

 8         </tr>  

 9     </thead>  

10 </table>  

复制代码

 

 

使用Javascript也可以创建DataGrid:

 

1 <table id="dg"></table>  

复制代码

1 $('#dg').datagrid({   

2     url:'datagrid_data.json',   

3     columns:[[   

4         {field:'code',title:'Code',width:100},   

5         {field:'name',title:'Name',width:100},   

6         {field:'price',title:'Price',width:100,align:'right'}   

7     ]]   

8 });  

复制代码

 

 

使用一些参数查询数据:

 

1 $('#dg').datagrid('load', {   

2     name: 'easyui',   

3     address: 'ho'  

4 });  

 

 

改变数据到服务器后,更新之前的数据:

 

1 $('#dg').datagrid('reload');    // 重新加载当前页的数据 

 

 

[DataGrid 属性]

属性继承自 panel 面板,下面是从 panel 新增的属性列表:

 

名称 类型

描述 默认值

columns array DataGrid列的配置对象,更多详细请参见列属性。 undefined

frozenColumns array 相同列的属性,但是这些列会被冻结在左边。 undefined

fitColumns boolean 为“true”则自动 展开/收缩 列的大小,为了自动填充Grid的宽度,防止出现水平滚动条。 false

autoRowHeight boolean 定义是否基于行的内容设置行高,设置“false”可以提高加载性能。 true

toolbar array,selector DataGrid面板顶部的 ToolBar 工具条,可以设置的值如下:

1) 一个数组,每个options项是相同的LinkButton。

2) 一个 selector 选择器 指定 ToolBar 工具条。

使用<div>标签定义 ToolBar 工具条:

 

复制代码

 1 $('#dg').datagrid({

 2     toolbar: '#tb'

 3 });

 4 <div id="tb">

 5   <a href="#" 

 6       class="easyui-linkbutton" 

 7       data-options="iconCls:'icon-edit',plain:true"></a>

 8   <a href="#" 

 9       class="easyui-linkbutton" 

10       data-options="iconCls:'icon-help',plain:true"></a>

11 </div>

复制代码

 

 

通过数组定义 ToolBar:

 

复制代码

1 $('#dg').datagrid({

2     toolbar: [{

3         iconCls: 'icon-edit',

4         handler: function(){alert('edit')}

5     },'-',{

6         iconCls: 'icon-help',

7         handler: function(){alert('help')}

8     }]

9 });

复制代码

null

striped boolean 设置“True”实现各行变色的功能。 false

method string 这个方法需要远程数据类型。 post

nowrap boolean 设置为“True”则将数据显示在一行内,设置为“True”可以提高加载性能。 true

idField string 指定哪些字段是标识字段。 null

url string 一个用于请求远程站点的URL路径。 null

loadMsg string 当从远程站点加载数据时,显示一个提示信息。 Processing, please wait …

pagination boolean 设置为“True”则在DataGrid底部显示分页工具条按钮。 false

rownumbers boolean 设置为“True”则显示行数列。 false

singleSelect boolean 设置为“True”则只允许选择一行。 false

checkOnSelect boolean

如果设置为“True”,当用户点击一行时 选中/取消选中 该复选框。

 

如果设置为“False”,当用户准确点击复选框时,选中/取消选中 该复选框。

这个属性时1.3版本之后可用的。

 

true

selectOnCheck boolean

如果设置为True,点击复选框将总会选择行。

 

如果设置为False,选中行将不会选中该复选框。

这个属性在1.3版本后可用。

 

true

pagePosition string 定义分页工具条的位置,有效值是:'top','bottom','both'。

这个属性在1.3版本后可用。 bottom

pageNumber number 当设置分页的属性时,初始化页面数量。 1

pageSize number 当设置分页属性时,初始化页面大小。 10

pageList array 当设置分页属性时,初始化页面大小选择列表、 [10,20,30,40,50]

queryParams object 当请求远程数据时,附带发送额外的参数。

代码示例:

 

1 $('#dg').datagrid({

2     queryParams: {

3         name: 'easyui',

4         subject: 'datagrid'

5     }

6 });

{}

sortName string 定义哪些列可以被排序。 null

sortOrder string 定义列的排序方式,只能是升序“asc”或降序“desc”。 asc

remoteSort boolean 定义是否接受来自远程服务器的排序数据。 true

showHeader boolean 定义是否显示行的页眉。 true

showFooter boolean 定义是否显示行的页脚。 false

scrollbarSize number 滚动条的款(当是垂直滚动条时) 或者 高(当是水平滚动条的时候) 18

rowStyler function 返回例如 'background:red' 一样的风格样式,这个方法带两个参数:

rowIndex: 行的下标索引,从0开始

rowData: 符合记录数的行

代码示例:

 

复制代码

1 $('#dg').datagrid({

2     rowStyler: function(index,row){

3         if (row.listprice>80){

4             return 'background-color:#6293BB;color:#fff;';

5         }

6     }

7 });

复制代码

 

loader function

定义如何从远程服务器加载数据,返回“false”可以终止这个请求。

 

这个函数需要以下参数:

param: 向远程服务器传递的参数对象。

success(data): 这个回调函数会在检索数据成功后调用。

error(): 这个函数会在检索数据失败时调用。

 

json loader

loadFilter function

显示返回过滤后的数据。这个函数带一个参数 'data',它表示原始数据。

 

你可以将原始数据源更改为标准的数据格式。

 

这个函数必须返回一个包含“total”和“rows”属性的标准数据对象。

 

代码示例:

 

复制代码

 1 // 从 ASP.NET Web Service Json 输出中删除“d”对象

 2 $('#dg').datagrid({

 3     loadFilter: function(data){

 4         if (data.d){

 5             return data.d;

 6         } else {

 7             return data;

 8         }

 9     }

10 });

复制代码

 

editors object 定义编辑行时的编辑器。 predefined editors

view object 定义DataGrid的View视图。 default view

 

 

 

 

 

 

 

[列属性]

DataGrid的列是一个数组对象,它的元素也是一个数组。元素的元素数组是一个配置对象,它定义了每一列的字段。

 

 

 

代码示例:

 

复制代码

 1 columns:[[   

 2     {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},   

 3     {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},   

 4     {title:'Item Details',colspan:4}   

 5 ],[   

 6     {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},   

 7     {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},   

 8     {field:'attr1',title:'Attribute',width:100},   

 9     {field:'status',title:'Status',width:60}   

10 ]]  

复制代码

名称 类型 描述 默认值

title string 列的标题文本。 undefined

field string 列的字段名称。 undefined

width number 列的宽度,如果没有定义,宽度将会自动扩展以容纳其内容。 undefined

rowspan number 表示应该占据多少行。 undefined

colspan number 表示应该占据多少列。 undefined

align string 表示如何排列对齐列数据,可以用的值有:'left','right','center'。 undefined

sortable boolean 设置为“True”则指定列可以排序。 undefined

resizable boolean 设置为“True”则可以调整列的大小。 undefined

hidden boolean 设置为“True”则隐藏列。 undefined

checkbox boolean 设置为“True”则显示一个复选框,该复选框有固定的宽度。 undefined

formatter function 单元格格式化的函数,带有三个参数:

value: 字段值

rowData: 行数据记录

rowIndex: 行下标

代码示例:

 

复制代码

 1 $('#dg').datagrid({

 2     columns:[[

 3         {field:'userId',title:'User', width:80,

 4             formatter: function(value,row,index){

 5                 if (row.user){

 6                     return row.user.name;

 7                 } else {

 8                     return value;

 9                 }

10             }

11         }

12     ]]

13 });

复制代码

undefined

styler function 单元格样式函数,返回例如 'background:red' 一样的用户自定义的样式字符串。这个函数带有三个参数:

value: 字段值

rowData: 行数据记录

rowIndex: 行下标

代码示例:

 

复制代码

 1 $('#dg').datagrid({

 2     columns:[[

 3         {field:'listprice',title:'List Price', width:80, align:'right',

 4             styler: function(value,row,index){

 5                 if (value < 20){

 6                     return 'background-color:#ffee00;color:red;';

 7                 }

 8             }

 9         }

10     ]]

11 });

本文由金沙官网线上发布于Web前端,转载请注明出处:jQuery EasyUI API - Grid - DataGrid [原创汉化官方API]

您可能还会对下面的文章感兴趣: