DateGrid

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

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. });

1. $('#dg').datagrid({
2. data: [
3. {f1:'value11', f2:'value12'},
4. {f1:'value21', f2:'value22'}
5. ]
6. });

1. $('#dg').datagrid({
2. queryParams: {
3. name: 'easyui',
4. subject: 'datagrid'
5. }
6. });

1. $('#dg').datagrid({
2. rowStyler: function(index,row){
3. if (row.listprice>80){
4. return 'background-color:#6293BB;color:#fff;'; // return inline style
5. // the function can return predefined css class and inline style
6. // return {class:'r1', style:{'color:#fff'}};
7. }
8. }
9. });

1. // removing 'd' object from asp.net web service json output
2. $('#dg').datagrid({
3. loadFilter: function(data){
4. if (data.d){
5. return data.d;
6. } else {
7. return data;
8. }
9. }
10. });

单元格的格式化函数，需要三个参数：
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;
}
}
}
]]
});

单元格的样式函数，返回样式字符串来自定义该单元格的样式，例如 'background:red' 。该函数需要三个参数：
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;';
					// the function can return predefined css class and inline style
					// return {class:'c1',style:'color:red'}
				}
			}
		}
	]]
});

用于本地排序的自定义字段的排序函数，需要两个参数：
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);  
				}  
			}  
		}
	]]
});

当用户双击一个单元格时触发。
代码实例：

$('#dg').datagrid({
	onDblClickCell: function(index,field,value){
		$(this).datagrid('beginEdit', index);
		var ed = $(this).datagrid('getEditor', {index:index,field:field});
		$(ed.target).focus();
	}
});

1. var opts = $('#dg').datagrid('getColumnFields'); // get unfrozen columns
2. var opts = $('#dg').datagrid('getColumnFields', true); // get frozen columns

1. $('#dg').datagrid('load',{
2. code: '01',
3. name: 'name01'
4. });

1. // update footer row values and then refresh
2. var rows = $('#dg').datagrid('getFooterRows');
3. rows[0]['name'] = 'new name';
4. rows[0]['salary'] = 60000;
5. $('#dg').datagrid('reloadFooter');
7. // update footer rows with new data
8. $('#dg').datagrid('reloadFooter',[
9. {name: 'name1', salary: 60000},
10. {name: 'name2', salary: 65000}
11. ]);

1. $('#dg').datagrid('fixColumnSize', 'name'); // fix the 'name' column size
2. $('#dg').datagrid('fixColumnSize'); // fix all columns size

1. // get the datebox editor and change its value
2. var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'});
3. $(ed.target).datebox('setValue', '5/4/2012');

1. $('#dg').datagrid('updateRow',{
2. index: 2,
3. row: {
4. name: 'new name',
5. note: 'new note message'
6. }
7. });

1. $('#dg').datagrid('appendRow',{
2. name: 'new name',
3. age: 30,
4. note: 'some messages'
5. });

1. // insert a new row at second row position
2. $('#dg').datagrid('insertRow',{
3. index: 1, // index start with 0
4. row: {
5. name: 'new name',
6. age: 30,
7. note: 'some messages'
8. }
9. });