easyUI DataGrid

于 2012-08-03 11:48:21 发布
阅读量1.2w 收藏 4
点赞数 3
分类专栏： javascript 文章标签： datagrid function 服务器 工具 object class

@author YHC

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

datagrid 以列表形式显示数据,和提供丰富的功能支持,选择, 排序, 分组显示 和编辑数据,datagrid 的设计是为了减少开发时间,和开发者不需要对其特定的了解,它是一个拥有丰富功能的轻量级,表格合并,和多表头,列冻结,页脚,仅仅只是它的一部分功能.


相关依赖
  • panel
  • resizable
  • linkbutton
  • pagination
使用示例
从一个已存在的table元素创建 datagrid ,定义列,行还有数据在html中. 

<table class="easyui-datagrid">  
    <thead>  
        <tr>  
            <th data-options="field:'code'">Code</th>  
            <th data-options="field:'name'">Name</th>  
            <th data-options="field:'price'">Price</th>  
        </tr>  
    </thead>  
    <tbody>  
        <tr>  
            <td>001</td><td>name1</td><td>2323</td>  
        </tr>  
        <tr>  
            <td>002</td><td>name2</td><td>4612</td>  
        </tr>  
    </tbody>  
</table>
创建 datagrid 通过<table>标记,和内嵌的<th>标记定义行在table中. 

<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:100">Code</th>  
            <th data-options="field:'name',width:100">Name</th>  
            <th data-options="field:'price',width:100,align:'right'">Price</th>  
        </tr>  
    </thead>  
</table>
使用javascript创建 datagrid 也是允许的. 

<table id="dg"></table>  
$('#dg').datagrid({  
    url:'datagrid_data.json',  
    columns:[[  
        {field:'code',title:'Code',width:100},  
        {field:'name',title:'Name',width:100},  
        {field:'price',title:'Price',width:100,align:'right'}  
    ]]  
});
通过一些参数查询数据 
$('#dg').datagrid('load', {  
    name: 'easyui',  
    address: 'ho'  
});
从服务器改变数据,刷新前面的数据 

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

DataGrid 属性

属性从 pane继承.以下是datagrid新增的属性.

Name Type Description Default
columns array datagrid 行配置对象, 请见column属性得到更多的信息. undefined
frozenColumns array 和columns属性相同,但是这个columns将冻结在左边. undefined
fitColumns boolean true将自动扩展/收缩columns大小适应grid的宽度,防止水平滚动. false
autoRowHeight boolean 定义是否基于某行的内容设置行的高度.设置为false改善加载数据的性能.因为这个操作是在数据加载之后完成的.添加了true会增加加载的时间. true
toolbar array,selector datagrid 顶部的工具栏. 可用值:
1) 一个数组,工具的options(配置项)和linkbutton相同.
2) 一个选择器指定工具栏.

定义工具栏 在div标签:

$('#dg').datagrid({
	toolbar: '#tb'
});
<div id="tb">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>
</div>

通过数组定义工具栏:

$('#dg').datagrid({
	toolbar: [{
		iconCls: 'icon-edit',
		handler: function(){alert('edit')}
	},'-',{
		iconCls: 'icon-help',
		handler: function(){alert('help')}
	}]
});
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,当用户点击一行的时候 checkbox checked(选择)/unchecked(取消选择). 如果为false,当用户点击刚好在checkbox的时候, checkbox checked(选择)/unchecked(取消选择).
注意:这个属性从1.3版本开始可用.		 true
selectOnCheck boolean 如果设置为true,点击checkbox将永远选择这行.如果设置为false, 选择一个行将不会选择checkbox.
注意:这个属性从1.3版本开始可用.		 true
pagePosition string 定义分页工具栏的位置.可用值有: 'top','bottom','both'.
注意:这个属性从1.3版本开始可用.		 bottom
pageNumber number 当设置pagination 属性的时候,初始页码. 1
pageSize number 当设置pagination 属性时候, 初始分页大小. 10
pageList array 当设置 pagination 属性的时候,初始分页大小选择列表. [10,20,30,40,50]
queryParams object 当请求远程服务器数据时候, 并且发送的额外的参数.

示例代码:

$('#dg').datagrid({
	queryParams: {
		name: 'easyui',
		subject: 'datagrid'
	}
});
{}
sortName string 定义那个列可以排序. null
sortOrder string 定义列排序方式, 仅仅只能是 'asc' or 'desc'. asc
remoteSort boolean 定义是否远程排序. true
showHeader boolean 定义是否显示行标题 . true
showFooter boolean 定义是否显示行页脚. false
scrollbarSize number 定义滚动条宽度 (当滚动条是垂直的时候) 或者高度(当滚动条是水平的时候). 18
rowStyler function 返回样式 例如 'background:red'. 这个函数提供连个参数:
rowIndex: 行的下标, 起始值 0
rowData: 这个记录代表这一行

示例代码:

$('#dg').datagrid({
	rowStyler: function(index,row){
		if (row.listprice>80){
			return 'background-color:#6293BB;color:#fff;';
		}
	}
});
 
loader function 定义如何从远程服务器加载数据 .返回false将终止这个动作.这个函数提供以下参数:
param: 这个参数对象是传送给远程服务器的参数.
success(data): 当检索数据成功的时候,这个回调函数将调用.
error(): 当检索数据失败后,这个回调函数将调用.		 json loader
loadFilter function 返回显示过滤数据. 这个函数提供一个参数'data'它指定原始数据,你可以改变原始数据标准格式. 这个函数必须返回一个标准的数据对象,它包含'total'和'rows'属性.

示例代码:

// removing 'd' object from asp.net web service json output
$('#dg').datagrid({
	loadFilter: function(data){
		if (data.d){
			return data.d;
		} else {
			return data;
		}
	}
});
 
editors object 定义一个编辑器,当编辑一行的时候. predefined editors
view object 顶datagrid的view. default view

Column属性

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. ]]  

Name Type Description Default
title string 列标题文本. undefined
field string 列字段名称. undefined
width number 列宽度,如果未定义,宽度自动扩展适应其内容. undefined
rowspan number 指定一个cell应该占据多少行. undefined
colspan number 指定一个cell应该占据多少列. undefined
align string 指定如何对齐列数据 . 'left','right','center' 可以使用. undefined
sortable boolean true允许列可以排序. undefined
resizable boolean true允许列可改变大小. undefined
hidden boolean true将隐藏该列. undefined
checkbox boolean true将显示一个checkbox. checkbox列有固定的宽度. undefined
formatter function 表格转换函数,提供3个参数:
value: 这个字段的值.
rowData: 行数据.
rowIndex: 行下标.

示例代码:

$('#dg').datagrid({
	columns:[[
		{field:'userId',title:'User', width:80,
			formatter: function(value,row,index){
				if (row.user){
					return row.user.name;
				} else {
					return value;
				}
			}
		}
	]]
});
undefined
styler function 表格样式函数,返回样式字符串自定义表格样式例如'background:red'.这个函数提供3个函数:
value: 字段值.
rowData: 行数据.
rowIndex: 行下标.

示例代码:

$('#dg').datagrid({
	columns:[[
		{field:'listprice',title:'List Price', width:80, align:'right',
			styler: function(value,row,index){
				if (value < 20){
					return 'background-color:#ffee00;color:red;';
				}
			}
		}
	]]
});
undefined
sorter function 自定义字段排序函数,使用在本地排序,提供2个参数:
a: 第一个字段的值.
b: 第二个字段的值.

示例代码:

$('#dg').datagrid({
	remoteSort: false,
	columns: [[
		{field:'date',title:'Date',width:80,sortable:true,align:'center',  
			sorter:function(a,b){  
				a = a.split('/');  
				b = b.split('/');  
				if (a[2] == b[2]){  
					if (a[0] == b[0]){  
						return (a[1]>b[1]?1:-1);  
					} else {  
						return (a[0]>b[0]?1:-1);  
					}  
				} else {  
					return (a[2]>b[2]?1:-1);  
				}  
			}  
		}
	]]
});
undefined
editor string,object 指定编辑类型.当用字符串指定编辑类型时,对象包含2个属性:
type: string类型,编辑类型,可用类型有: text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree.
options: object类型,代表编辑类型的编辑选项(options).		 undefined

Editor

覆盖默认值  $.fn.datagrid.defaults.editors.

 每一个编辑器都有以下动作:

Name Parameters Description
init container, options 初始化编辑器 和返回目标对象.
destroy target 销毁编辑器,如果有必要.
getValue target 从编辑器得到值.
setValue target , value 设置editor值.
resize target , width 改变编辑器大小,如果有必要.

例如,一个文本编辑器,定义如下:

  1. $.extend($.fn.datagrid.defaults.editors, {  
  2.     text: {  
  3.         init: function(container, options){  
  4.             var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);  
  5.             return input;  
  6.         },  
  7.         getValue: function(target){  
  8.             return $(target).val();  
  9.         },  
  10.         setValue: function(target, value){  
  11.             $(target).val(value);  
  12.         },  
  13.         resize: function(target, width){  
  14.             var input = $(target);  
  15.             if ($.boxModel == true){  
  16.                 input.width(width - (input.outerWidth() - input.width()));  
  17.             } else {  
  18.                 input.width(width);  
  19.             }  
  20.         }  
  21.     }  
  22. });  

DataGrid View

覆盖默认值 $.fn.datagrid.defaults.view.

view是一个对象,他将告诉datagrid如何渲染行.对象必须定义下列函数:

Name Parameters Description
render target, container, frozen 当数据加载完毕后调用.
target: DOM 对象, datagrid 对象.
container: rows(行) 容器.
frozen:指定是否渲染冻结容器.
renderFooter target, container, frozen 这个选项函数渲染行页脚.
renderRow target, fields, frozen, rowIndex, rowData 这个选项函数将通过render函数调用.
refreshRow target, rowIndex 定义如何刷新特定的行.
onBeforeRender target, rows 在view渲染之前触发.
onAfterRender target 在view渲染之后触发.

Events

 事件从panel触发,以下是datagrid的新增事件.

Name Parameters Description
onLoadSuccess data 当数据加载成功触发.
onLoadError none 当加载远程数据的时候有一些问题发生时触发.
onBeforeLoad param 在一个请求加载数据之前触发. 如果返回fales将取消加载动作.
onClickRow rowIndex, rowData 当用户点击一行的时候触发,参数包含:
rowIndex: 点击行的下标,起始值 0
rowData: 这个记录代表点击行数据
onDblClickRow rowIndex, rowData 当用户双击的时候触发,参数包含:
rowIndex: 点击行下标,起始值 0
rowData: 这个记录代表点击行数据.
onClickCell rowIndex, field, value 当用户点击一个表格的时候触发.
onDblClickCell rowIndex, field, value 当用户双击表格的时候触发.
示例代码: 
// 当用户双击一个表格的时候,开始编辑使编辑器获得焦点
$('#dg').datagrid({
	onDblClickCell: function(index,field,value){
		$(this).datagrid('beginEdit', index);
		var ed = $(this).datagrid('getEditor', {index:index,field:field});
		$(ed.target).focus();
	}
});
onSortColumn sort, order 当用户为一行排序的时候触发,参数包含:
sort: 排序的列的字段名称
order: 列排序的方式
onResizeColumn field, width 当用户改变列大小的时候触发.
onSelect rowIndex, rowData 当用户选择一行的时候触发, 参数包含:
rowIndex: 选择行下标, 起始值 0
rowData: 这个记录代表的是选择行的数据
onUnselect rowIndex, rowData 当用户取消一行选择的时候触发,参数包含:
rowIndex: 取消选择行的下标,起始值0
rowData: 这个记录代表的是取消行的数据
onSelectAll rows 当用户选择所有行时触发.
onUnselectAll rows 当用户取消选择所有行时触发.
onCheck rowIndex,rowData 当用户选中一行的时候触发,参数包含:
rowIndex:选中行下标, 起始值 0
rowData: 这个记录代表的是选中行的数据
注意:这个事件从1.3版本开始可用.
onUncheck rowIndex,rowData 当用户取消选中一行的时候触发, 参数包含:
rowIndex: 取消选中行下标,起始值0
rowData: 这个记录代表的是取消选中行的数据
注意:这个事件从1.3版本开始可用.
onCheckAll rows 当用户选中所有行时触发.注意:这个事件从1.3版本开始可用.
onUncheckAll rows 当用户取消选中所有行时触发.注意:这个事件从1.3版本开始可用.
onBeforeEdit rowIndex, rowData 当用户开始编辑一行的时候触发,参数包含:
rowIndex: 编辑行下标, 起始值0
rowData: 这个记录代表编辑行数据.
onAfterEdit rowIndex, rowData, changes 当用户完成编辑时触发,参数包含:
rowIndex:编辑行下标,起始值0
rowData:这个记录代表的是编辑行的数据 
changes: 更改 字段/值 对
onCancelEdit rowIndex, rowData 当用户取消编辑行时触发,参数包含:
rowIndex: 编辑行下标,起始值0
rowData:这个记录代表编辑行数据
onHeaderContextMenu e, field datagrid 的header上右键点击的时候触发
onRowContextMenu e, rowIndex, rowData 当在某行右键点击的时候触发.

Methods
Name Parameter Description
options none 返回 options 对象.
getPager none 返回 pager 对象.
getPanel none 返回panel 对象.
getColumnFields frozen 返回所有column字段. 如果forzen设置为true那么forzen(冻结列)列返回.
示例代码:
var opts = $('#dg').datagrid('getColumnFields');	// 得到未冻结列
var opts = $('#dg').datagrid('getColumnFields', true); // 得到冻结列
getColumnOption field 返回特定的列选项.
resize param 改变大小和布局.
load param 加载数据和显示第一页的行数据.如果'param'是定义的,将替换queryParams属性. 通常在做查询的时候传入一些参数,这个方法可以调用从远程服务器加载新的数据. 
$('#dg').datagrid('load',{
	code: '01',
	name: 'name01'
});
reload param 重新加载行数据.和'load'一样,但是停留在当前页.
reloadFooter footer 重新加载页脚行数据.示例代码: 
//更新页脚行值然后刷新
var rows = $('#dg').datagrid('getFooterRows');
rows[0]['name'] = 'new name';
rows[0]['salary'] = 60000;
$('#dg').datagrid('reloadFooter');

// 更新页脚行数据为新数据
$('#dg').datagrid('reloadFooter',[
	{name: 'name1', salary: 60000},
	{name: 'name2', salary: 65000}
]);
loading none 显示加载状态.
loaded none 隐藏加载状态.
fitColumns none 使行自动 扩展/折叠 适应datagrid的宽度.
fixColumnSize field 固定列大小.如果'field'参数没有分配, 所有列大小将固定.

示例代码:

$('#dg').datagrid('fixColumnSize', 'name');  // 固定 'name' 列大小
$('#dg').datagrid('fixColumnSize');  // 固定所有列大小
fixRowHeight index 固定特定行高度.如果'index'没有分配,所有行高度将固定.
autoSizeColumn field 调整行的宽度适应内容.注意:这个方法从1.3版本开始可用.
loadData data 加载本地数据,之前的原始行数据将被移除.
getData none 返回加载数据.
getRows none 返回当前页行数据.
getFooterRows none 返回页脚行数据.
getRowIndex row 返回特定的行下标,row参数可以是一个行记录或者是一个标识列的id值.
getChecked none 返回checkbox被选中的所有行数据.注意:这个方法从1.3版本开始可用.
getSelected none 返回第一个被选择的行数据记录或者null.
getSelections none 返回所有选中行数据,当没有记录选择时候, 一个空数组将返回.此空(内容为空,也就是length为0)非彼null
clearSelections none 清空所有选择.
selectAll none 选中当前页的行.
unselectAll none 取消选择所有当前页行.
selectRow index 通过传入下标选择一行,下标起始值:0.
selectRecord idValue 通过传入id值参数选择一行.
unselectRow index 取消选择一行.
checkAll none 选中当前页所有行.注意:这个方法从1.3版本开始可用.
uncheckAll none 取消选中当前页所有行.注意:这个方法从1.3版本开始可用.
checkRow index 选中一行,行的下标的起始值是0. 注意:这个方法从1.3版本开始可用.
uncheckRow index 取消选择一行,行的下标起始值0.注意:这个方法从1.3版本开始可用.
beginEdit index 开始编辑一行.
endEdit index 结束编辑一行.
cancelEdit index 取消编辑一行.
getEditors index 得到一个特定行编辑器.所有编辑器都有以下属性:
actions: 编辑器可以做的动作,类似于编辑器的定义.
target:目标编辑器的jQuery对象.
field:字段名.
type: 编辑器类型, 例如 'text','combobox','datebox', 等等...
getEditor options 得到一个特定的编辑器,options包含两个属性:
index: 行下标.
field: 字段名称.

示例代码:

//得到datebox编辑器,改变其值
var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'});
$(ed.target).datebox('setValue', '5/4/2012');
refreshRow index 刷新行.
validateRow index 验证特定行,当值有效返回true.
updateRow param 更新一个特定的行,param 包含以下属性:
index:需要更新的行下标.
row: 新的行数据.

示例代码:

$('#dg').datagrid('updateRow',{
	index: 2,
	row: {
		name: 'new name',
		note: 'new note message'
	}
});
appendRow row 添加一个新行.这个新行将被添加到最后的位置: 
$('#dg').datagrid('appendRow',{
	name: 'new name',
	age: 30,
	note: 'some messages'
});
insertRow param 插入一个新行,param包含以下属性:
index: 插入位置的行下标, 如果未定义, 使用append一个新行.
row: 行数据. 示例代码: 
// 插入一个新行到第二行位置
$('#dg').datagrid('insertRow',{
	index: 1,	// 下标从0开始
	row: {
		name: 'new name',
		age: 30,
		note: 'some messages'
	}
});
deleteRow index 删除一行.
getChanges type 得到直到最后提交改变值的行.type参数指定那个类型改变的行,可用值有: inserted,deleted,updated,等等.当type参数没有分配时返回所有类型改变行.
acceptChanges none 提交所有改变数据从加载之后或者最后一次调用acceptChanges 方法.
rejectChanges none 回滚所有改变数据,从它被创建,或者是最后一次调用acceptChanges方法.
mergeCells options 合并多个表格到一个表格,options包含以下属性:
index:行下标.
field: 字段名.
rowspan: 合并行数量.
colspan: 合并列数量.
showColumn field 显示特定的列.
hideColumn field 隐藏特定的列.

   如有错误信息,请指出,thanks!





雨泽
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值