JQuery Easy Ui dataGrid 数据表格

数据表格 - DataGrid

内容

依赖组件（Dependencies）

使用方法（Usage Example）

数据表格属性（DataGrid Properties）

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

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

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

// removing 'd' object from asp.net web service json output
$('#dg').datagrid({
loadFilter: function(data){
if (data.d){
return data.d;
} else {
return data;
}
}
});

列属性（Column Properties）

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

编辑器（Editor）

数据表格视图（DataGrid View）

事件（Events）

// when double click a cell, begin editing and make the editor get focus
$('#dg').datagrid({
onDblClickCell: function(index,field,value){
$(this).datagrid('beginEdit', index);
var ed = $(this).datagrid('getEditor', {index:index,field:field});
$(ed.target).focus();
}
});

方法（Methods）

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

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

// update footer row values and then refresh
var rows = $('#dg').datagrid('getFooterRows');
rows[0]['name'] = 'new name';
rows[0]['salary'] = 60000;
$('#dg').datagrid('reloadFooter');

// update footer rows with new data
$('#dg').datagrid('reloadFooter',[
{name: 'name1', salary: 60000},
{name: 'name2', salary: 65000}
]);

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

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

$('#dg').datagrid('updateRow',{
index: 2,
row: {
name: 'new name',
note: 'new note message'
}
});

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

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

1     /////////////////////////////////////////////
2         //初始化数据
3     function initGrid()
4         {
5             $('#grid').datagrid({
6                 width:'100%',
7                 height:'auto',
8                 nowrap: true,
9                 striped: true,
10                 fitColumns:false,
11                 url:'${contextPath}/cardGift/cardGift.do?method=getCardGiftList&activeId=${information.cardGiftActive.activeId}',
12                 queryParams:queryParam,
13                 remoteSort:false,
14                 //Grid对应的主键列
15                 idField:'',
16                 singleSelect:true,
17                 columns:[[
18                         {field:'serial',title:'',width:15,checkbox:true},
19                         {field:'activeName',title:'活动名称',width:50,sortable:true},
20                         {field:'giftGoodId',title:'赠品商品编码',width:80},
21                         {field:'goodsName',title:'商品名称',width:120},
22                         {field:'giftCodeTotal',title:'赠品码生成数量',width:100},
23                         {field:'genCodeNumber',title:'已生成赠品码数量',width:100},
24                         {field:'startTime',title:'赠品发放起始时间',width:125},
25                         {field:'endTime',title:'赠品发放结束时间',width:125},
26                         {field:'memo',title:'备注',width:120}
27                 ]],
28                 pagination:true,
29                 rownumbers:true,
30                 toolbar:[
31                 '-',{
32                     id:'btnClearSelections',
33                     text:'修改活动商品',
34                     iconCls:'icon-edit',
35                     handler:function(){
36                         editData();
37                     }
38                 },'-',{
39                     id:'btnDel',
40                     text:'删除活动商品',
41                     iconCls:'icon-no',
42                     handler:function(){
43                         deleteData();
44                     }
45                 },
46                 '-',{
47                     id:'btnClearSelections',
48                     text:'清除选择',
49                     iconCls:'icon-cut',
50                     handler:function(){
51                         $('#grid').datagrid('clearSelections');
52                         //设置选中值
53                         document.addForm.reset();
54                         $('#giftCodeTotal').val("0");
55                         $('#memoData').html("");
56                         $('#submitBtn').html("确认提交");
57                         $('#submitBtn').attr('onclick',"addSubmit('insert');");
58                     }
59                 }],
60                 onLoadError:function(){
61                     XW_dialog.alert('','加载数据失败！');
62                 }
63
64             });
65
66             //设置分页控件
67             var p = $('#grid').datagrid('getPager');
68             $(p).pagination(PAGE_TEMPLATE);
69         }
70
71
72         function editData(){
73             var row = $('#grid').datagrid("getSelections");
74             if($(row).length < 1 || $(row).length > 1)
75             {
76                 XW_dialog.alert('',"请选择要查看的记录，只能选取单行！");
77                 return ;
78             }
79             //设置默认选中
80             $('#goodsSelect').combogrid('grid').datagrid('selectRecord',row[0].giftGoodId);
81             $('#goodsSelect').hide();
82             //设置选中值
83             $('#giftCodeTotal').val(row[0].giftCodeTotal);
84             $('#memoData').html(row[0].memo);
85             $('#submitBtn').html("更新");
86             $('#submitBtn').attr('onclick',"addSubmit('update');");
87             $('#resetBtn').hide();
88
89         }
90
91
92         function deleteData(){
93         var data = $('#grid').datagrid("getSelections");
94         //删除
95         var delurl = "${contextPath}/cardGift/cardGift.do?method=deleteCardGift&activeId="+data[0].activeId+"&giftGoodId="+data[0].giftGoodId;
96         //发送删除请求
97         $.ajax({
98            type: "POST",
99            dataType:'json',
100            url: delurl,
101            success: function(msg){
102              if(msg.success)
103                 {
104                     //保存回调函数使用的数据
105                     XW_dialog.addData('callbackData',msg.map);
106                     //删除成功
107                     XW_dialog.tips(msg.errorMsg, 3);
108                     deleteCallBack();
109                 }
110                 else
111                 {
112                     XW_dialog.alert('',msg.errorMsg);
113                 }
114            }
115     });
116 }
117
118
119         //删除记录回调函数，默认调用刷新记录方法，
120         function deleteCallBack(){
121             reloadGrid("grid");
122         }
123