easyUI--datagrid
1. 数据表格:DataGrid
a) 模版:
// 加载datagrid
$("#datagridModel").datagrid({
url : '/personnel/customerAction!datagrid.action',
title : 'datagridModel',
iconCls : 'icon-help',
pagination : true,
fit : true,
fitColumns : true,//缩放时是否会自动压缩width显示
nowrap : false,//字数多了是否会自动再补行全显示
border : false,//边框
pageSize : 2,//初始化时每页显示多少条,必须在pageList也指定
pageList : [ 2, 10, 20, 50, 100 ],//可选每页显示多少条
idField : 'cid', //该列是唯一列,避免翻页之后还选中上一页的数据
sortName : 'cid',
sortOrder : 'desc',
frozenColumns : [ [ { // 当有水平滚动条时,该列始终可见
title : '编号',
field :'cid',
width :150,
sortable: true,
checkbox: true
}, {
title : '姓名',
field :'cname',
width :150,
sortable: true
} ] ],
columns : [ [ {
title : '性别',
field : 'csex',
width :150,
sortable: true
}, {
title : '联系电话',
field :'cphone',
width :150
}, {
title : '地址',
field :'caddress',
width :150
}, {
title : '最后操作时间',
field :'ctime',
width :250,
sortable: true
}, {
title : '最后操作用户',
field :'tusername',
width :250,
sortable: true
}, {
title : '是否可用',
field :'cstatus',
width :250,
formatter: function(value, row, index) {
return"可用";
}
} ] ]
});
b) 后台返回数据格式
c) 日期组合框 - DateBox, 时间组合框– DateTimeBox
最好别让用户自己输入,加上: editable="false"
d) Reload和Load的区别
i. Reload刷新的是当前页面,与pagination里面的刷新按钮一样
ii. Load刷新的是所有的信息,并且会返回到第一页
e) 行级增删改
i. 流程:
1. 在开始编辑需要对表格字段进行处理,加上约束,字段类型和约束
2. 在toolbar上加上添加和保存俩按钮
3. 在添加按钮事件上操作:添加一行,并且开起行编辑
4. 在保存按钮事件上操作:验证数据,并且保存
ii. 常用方法
1. 在最前面插入一行: 可在row参数中添加默认参数row : {cid : sy.UUID()}
centerDatagridModel.datagrid('insertRow',{index : 0, row : {} });
2. 开始编辑第一行:
centerDatagridModel.datagrid('beginEdit',0);
3. 结束编辑第一行:
centerDatagridModel.datagrid('endEdit',0);
4. 取消编辑第一行
centerDatagridModel.datagrid('cancelEdit',0);
5. 删除第一行
centerDatagridModel.datagrid('deleteRow',0);
6. 回滚当前编辑
centerDatagridModel.datagrid('rejectChanges');
7. 提交当前行, 一般是在异步处理完成服务器数据成功后执行该方法
centerDatagridModel.datagrid('acceptChanges');
8. 获取所有选择到的列
centerDatagridModel.datagrid('getSelections');
9. 获取第一个被选择的行记录或null。
centerDatagridModel.datagrid(' getSelected');
10. 获取某一row所在的index
centerDatagridModel.datagrid('getRowIndex',selectrows[0]);
11. 取到新增, 修改的行: 一般都是放在放在onAfterEdit事件之后
centerDatagridModel.datagrid('getChanges','inserted');
centerDatagridModel.datagrid('getChanges','updated');
12. 事件: onAfterEdit, 编辑成功之后执行事件
13. 事件:onDblClickRow, 双击事件,可在双击之后开起编辑模式
{
title : '姓名',
field : 'cname'
field : 'cname'
editor: {
type : "validatebox",
options : {
required : true
}
}
}
iv. 扩展datatimebox
$.extend($.fn.datagrid.defaults.editors,{
datatimebox: {
init : function(container, options) {
var input = $('<input/>').appendTo(container);
options.editable = false;
input.datetimebox(options);
return input;
},
getValue : function(target) {
return$(target).datetimebox("getValue");
},
setValue : function(target, value) {
$(target).datetimebox("setValue",value);
},
resize : function(target, width) {
$(target).datetimebox("resize",width);
},
destroy : function(target) {
$(target).datetimebox("destroy");
}
}
});
本人测试例子
layout.html, 包含两个页面:layout-center.html, layout-west.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI demo</title>
<link rel="stylesheet" href="../jquery-easyui-1.3.1/themes/icon.css" type="text/css"></link>
<link rel="stylesheet" href="../jquery-easyui-1.3.1/themes/default/easyui.css" type="text/css"></link>
<script type="text/javascript" src="../jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="../syUtil.js"></script>
</head>
<script type="text/javascript">
$(function() {
// 扩展$.fn.datagrid.defaults.editors : datatimebox
$.extend($.fn.datagrid.defaults.editors, {
datatimebox : {
init : function(container, options) {
var input = $('<input />').appendTo(container);
options.editable = false;
input.datetimebox(options);
return input;
},
getValue : function(target) {
return $(target).datetimebox("getValue");
},
setValue : function(target, value) {
$(target).datetimebox("setValue", value);
},
resize : function(target, width) {
$(target).datetimebox("resize", width);
},
destroy : function(target) {
$(target).datetimebox("destroy");
}
}
});
var centerPanel;
var centerDatagridModel;
var centerTabs;
var westPanel;
var westTree;
var centerForm;
var editRow;
// 属性的设置方法
$("#bodyPanel").layout({
fit : true
});
// 事件的执行方法
centerPanel = $("#bodyPanel").layout("panel", "center");
console.info(centerPanel);
centerPanel.panel({
onLoad : function() {
// layou-center页面对象操作
centerTabs = $('#centerTabs').tabs({
border : false,
onSelect : function(title, index) {
console.info(title + "-" + index);
if (index == "0") {
// 加载datagrid
centerDatagridModel = $("#centerDatagridModel").datagrid({
url : '/personnel/customerAction!datagrid.action',
title : 'datagridModel',
iconCls : 'icon-help',
pagination : true,
fit : true,
fitColumns : true,
nowrap : false,
border : false,
pageSize : 2,
pageList : [ 2, 10, 20, 50, 100 ],
idField : 'cid', //该列是唯一列,避免翻页之后还选中上一页的数据
sortName : 'cid',
sortOrder : 'desc',
frozenColumns : [ [ { // 当有水平滚动条时,该列始终可见
title : '编号',
field : 'cid',
width : 150,
sortable : true,
checkbox : true
}, {
title : '姓名',
field : 'cname',
width : 150,
sortable : true,
editor : {
type : "validatebox",
options : {
required : true
}
}
} ] ],
columns : [ [ {
title : '性别',
field : 'csex',
width : 150,
sortable : true,
editor : {
type : "combobox",
options : {
required : true,
valueField : 'label',
textField : 'value',
data : [ {
label : '男',
value : '男'
}, {
label : '女',
value : '女'
} ],
editable : false
}
}
}, {
title : '联系电话',
field : 'cphone',
width : 150,
editor : {
type : "validatebox",
options : {
required : true,
validType : "phone"
}
}
}, {
title : '地址',
field : 'caddress',
width : 150,
editor : {
type : "validatebox",
options : {
required : true
}
}
}, {
title : '最后操作时间',
field : 'ctime',
width : 250,
sortable : true,
editor : {
type : "datatimebox",
options : {
required : true,
editable : false
}
}
}, {
title : '最后操作用户',
field : 'tusername',
width : 250,
sortable : true,
editor : {
type : "validatebox",
options : {
required : true
}
}
}, {
title : '是否可用',
field : 'cstatus',
width : 250,
formatter : function(value, row, index) {
return "可用";
}
} ] ],
toolbar : [ {
text : '添加',
iconCls : 'icon-add',
handler : function() {
console.info("add");
// 一次编辑一条
if (editRow == undefined) {
// insertRow
centerDatagridModel.datagrid('insertRow', {
index : 0,
row : {
cid : sy.UUID()
}
});
centerDatagridModel.datagrid('beginEdit', 0);
editRow = centerDatagridModel.datagrid('getRows')[0];
}
}
}, '-', {
text : '编辑',
iconCls : 'icon-edit',
handler : function() {
console.info("edit");
var rowIndex;
if (editRow != undefined) {
rowIndex = centerDatagridModel.datagrid('getRowIndex', editRow);
if (centerDatagridModel.datagrid('validateRow', rowIndex)) {
centerDatagridModel.datagrid('endEdit', rowIndex);
centerDatagridModel.datagrid('acceptChanges'); // 提交数据
editRow = undefined;
} else {
return;
}
}
var selectrows = centerDatagridModel.datagrid('getSelections');
if (selectrows.length == 0) {
console.info("sorry, 还未选择编辑的行");
} else if (selectrows.length > 1) {
console.info("sorry, 一次只能编辑一行");
} else {
rowIndex = centerDatagridModel.datagrid('getRowIndex', selectrows[0]);
centerDatagridModel.datagrid('beginEdit', rowIndex);
editRow = selectrows[0];
}
}
}, '-', {
text : '删除',
iconCls : 'icon-remove',
handler : function() {
console.info("remove");
var selectrows = centerDatagridModel.datagrid('getSelections');
if (selectrows.length == 0) {
console.info("sorry, 还未选择编辑的行");
} else {
$.messager.confirm('提示', 'Are you sure you want to delete all record?', function(r) {
if (r) {
// 获取所有的ID传入后台
var ids = [];
for ( var x = 0; x < selectrows.length; x++) {
ids.push(selectrows[x].cid);
rowIndex = centerDatagridModel.datagrid('getRowIndex', selectrows[x]);
console.info(rowIndex);
centerDatagridModel.datagrid('deleteRow', rowIndex);
x--;
}
console.info(ids.join(','));
editRow = undefined;
}
});
}
}
}, '-', {
text : '保存',
iconCls : 'icon-save',
handler : function() {
console.info("save");
if (editRow != undefined) {
var rowIndex = centerDatagridModel.datagrid('getRowIndex', editRow);
if (centerDatagridModel.datagrid('validateRow', rowIndex)) {
centerDatagridModel.datagrid('endEdit', rowIndex);
}
}
}
}, '-', {
text : '取消编辑',
iconCls : 'icon-cancel',
handler : function() {
console.info("cancel");
centerDatagridModel.datagrid('rejectChanges');
editRow = undefined;
}
} ],
onAfterEdit : function(rowIndex, rowData, changes) { //编辑成功之后执行异步保存工作
console.info(rowData);
// 获取不同的操作方式inserted，deleted，updated: 更改,添加,删除
var insertedRow = centerDatagridModel.datagrid('getChanges', 'inserted');
var updatedRow = centerDatagridModel.datagrid('getChanges', 'updated');
var url = "";
if (insertedRow.length > 0) {
url = "/personnel/customerAction!add.action";
} else if (updatedRow.length > 0) {
url = "/personnel/customerAction!edit.action";
}
// 异步请求
$.ajax({
type : "POST",
url : url,
data : rowData,
dataType : "json",
success : function(msg) {
$.messager.progress("close");
console.info("Success Saved: " + msg.msg);
centerDatagridModel.datagrid('acceptChanges'); // 提交数据
}
});
},
onDblClickRow : function(rowIndex, rowData) { // 双击事件
console.info("onDblClickRow");
var rowIndex1;
if (editRow != undefined) {
rowIndex1 = centerDatagridModel.datagrid('getRowIndex', editRow);
if (centerDatagridModel.datagrid('validateRow', rowIndex1)) {
console.info("validateRow true");
centerDatagridModel.datagrid('endEdit', rowIndex1);
centerDatagridModel.datagrid('acceptChanges'); // 提交数据
editRow = undefined;
} else {
console.info("validateRow false");
return;
}
}
centerDatagridModel.datagrid('beginEdit', rowIndex);
editRow = this;
}
});
}
}
});
}
});
// 事件的执行方法
westPanel = $("#bodyPanel").layout("panel", "west");
console.info(westPanel);
westPanel.panel({
onLoad : function() {
westTree = $('#westTree').tree({
data : [ {
text : 'Item1',
attributes : {
"url" : "/demo/book/abc",
"price" : 100
}
}, {
text : 'Item2',
attributes : {
"url" : "/demo/book/abc",
"price" : 100
}
} ],
onClick : function(node) {
if (node.text == "Item1") {
console.info(node);
centerTabs.tabs('add', {
title : 'Tab2',
content : 'Tab Body',
closable : true,
tools : [ {
iconCls : 'icon-mini-refresh',
handler : function() {
alert('refresh');
}
} ]
});
}
}
});
}
});
});
function searchCustomer() {
$("#centerDatagridModel").datagrid("load", {
cname : $("#centerForm input[name='cname']").val(),
ctime : $("#centerForm input[name='ctime']").val()
});
}
</script>
<body>
<div id="bodyPanel" class="easyui-layout">
<div data-options="region:'north',title:'North Title'" style="height: 10px;"></div>
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width: 50px;"></div>
<div data-options="region:'west',title:'West',split:true,href:'layout-west.html'" style="width: 200px;"></div>
<div data-options="region:'center',title:'center title',href:'layout-center.html'"
style="padding: 5px; background: #eee;"></div>
</div>
</body>
</html>
layout-center.html
<div id="centerTabs" class="easyui-tabs" fit="true">
<div title="Tab1" style="padding: 20px; display: block;">
<div class="easyui-layout" fit="true">
<div data-options="region:'north',title:'过滤'" style="height: 60px;">
<form id="centerForm" method="post">
<table style="width: 100%; height: 100%; overflow: hidden;">
<tr>
<td>
姓名:
</td>
<td>
<input name="cname" class="easyui-validatebox" />
</td>
<td>
最后操作时间:
</td>
<td>
<input name="ctime" type="text" class="easyui-datebox" editable="false"></input>
</td>
<td>
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'"
onclick="searchCustomer();">searchCustomer</a>
</td>
</tr>
</table>
</form>
</div>
<div data-options="region:'center',title:'用户列表'" style="padding: 5px; background: #eee;">
<table id="centerDatagridModel">
</table>
</div>
</div>
</div>
<div title="Tab2" data-options="closable:true" style="overflow: auto; padding: 20px; display: none;">
tab2
</div>
</div>
layout-west.html
<ul id="westTree"></ul>