DataGrid Document

							
<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> 
<script type="text/javascript">
    $('#dg').datagrid({
	  toolbar: '#tb'
	});
</script>
							
						

							
$('#dg').datagrid({
	toolbar: [{
		iconCls: 'icon-edit',
		handler: function(){alert('编辑按钮')}
	},'-',{
		iconCls: 'icon-help',
		handler: function(){alert('帮助按钮')}
	}]
});
							
						

							
$('#dg').datagrid({
  data: [
    {f1:'value11', f2:'value12'},
    {f1:'value21', f2:'value22'}
  ]
});
							
						

							
$('#dg').datagrid({
  queryParams: {
    name: 'easyui',
    subject: 'datagrid'
  }
});
							
						

							
$('#dg').datagrid({
  rowStyler: function(index,row){
    if (row.listprice>80){
      return 'background-color:#6293BB;color:#fff;';
    }
  }
});
							
						

							
$('#dg').datagrid({
  rowStyler: function(index,row){
    if (row.listprice>80){
      return 'rowStyle';    // rowStyle是一个已经定义了的ClassName(类名)
    }
  }
});
							
						

							
// 从Web Service（asp.net、java、php等）输出的JSON对象中移除'd'对象
$('#dg').datagrid({
  loadFilter: function(data){
    if (data.d){
      return data.d;
    } else {
      return data;
    }
  }
});
							
						

							
$('#dg').datagrid({
  columns:[[
    {field:'userId',title:'User', width:80,
      formatter: function(value,row,index){
        if (row.user){
          return row.user.name;
        } else {
          return value;
        }
      }
    }
  ]]
});
							
						

							
$('#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;';
        }
      }
    }
  ]]
});
							
						

							
$('#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();
  }
});
							
						

							
var opts = $('#dg').datagrid('getColumnFields');               // 获取解冻列
var opts = $('#dg').datagrid('getColumnFields', true);       // 获取冻结列
							
						

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

							
// 更新页脚行的值并刷新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}
]);
							
						

							
$('#dg').datagrid('fixColumnSize', 'name');        // 固定'name'列大小
$('#dg').datagrid('fixColumnSize');                    // 固定所有列大小
							
						

							
// 跳转到第3页
$('#dg').datagrid('gotoPage', 3);

// 跳转到第3页并执行回调函数
$('#dg').datagrid('gotoPage', {
  page: 3,
  callback: function(page){
    console.log(page)
  }
})
							
						

							
// 获取日期输入框编辑器并更改它的值
var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'});
$(ed.target).datebox('setValue', '5/4/2012');
							
						

							
$('#dg').datagrid('updateRow',{
  index: 2,
  row: {
    name: '新名称',
    note: '新消息'
  }
});
							
						

							
$('#dg').datagrid('appendRow',{
  name: '新名称',
  age: 30,
  note: '新消息'
});
							
						

							
// 在第二行的位置插入一个新行
$('#dg').datagrid('insertRow',{
  index: 1, // 索引从0开始
  row: {
    name: '新名称',
    age: 30,
    note: '新消息'
  }
});
							
						

							
$('#dg').datagrid('sort', 'itemid');    // 排序一个列
$('#dg').datagrid('sort', {         // 指定了排序顺序的列
  sortName: 'productid',
  sortOrder: 'desc'
});