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

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>

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     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;';
5         }
6     }
7 });

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

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

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

1 $('#dg').datagrid({
2     remoteSort: false,
3     columns: [[
4         {field:'date',title:'Date',width:80,sortable:true,align:'center',
5             sorter:function(a,b){
6                 a = a.split('/');
7                 b = b.split('/');
8                 if (a[2] == b[2]){
9                     if (a[0] == b[0]){
10                         return (a[1]>b[1]?1:-1);
11                     } else {
12                         return (a[0]>b[0]?1:-1);
13                     }
14                 } else {
15                     return (a[2]>b[2]?1:-1);
16                 }
17             }
18         }
19     ]]
20 });

1 // 当双击一个单元格时，赋予Editor编辑器焦点，以开始编辑
2 $('#dg').datagrid({
3     onDblClickCell: function(index,field,value){
4         $(this).datagrid('beginEdit', index);
5         var ed = $(this).datagrid('getEditor', {index:index,field:field});
6         $(ed.target).focus();
7     }
8 });

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

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');
6
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');  // 固定‘name’列的大小
2 $('#dg').datagrid('fixColumnSize');  // 固定所有列大小

1 // 获取 DateBox 编辑器，并且更改它的值
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 // 在第二行插入新行
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 });