DataGrid( 数据表格) 组件[5]

本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法，这个组件依赖于
Panel(面板)、Resizeable(调整大小)、LinkButton(按钮)、Pageination(分页)组件。

一． 新增功能

columns : [[
{
field : 'user',
title : '帐号',
sortable : true,
width : 100,
editor : {
type : 'validatebox',
options : {
required : true,
},
},
},
{
field : 'email',
title : '邮件',
sortable : true,
width : 100,
editor : {
type : 'validatebox',

options : {
required : true,
validType: 'email',
},
},
},
{
field : 'date',
title : '创建时间',
sortable : true,
width : 100,
editor : {
type : 'datetimebox',
options : {
required : true,
},
},
},
]],
//扩展 dateTimeBox
$.extend($.fn.datagrid.defaults.editors, {
datetimebox : {
init: function(container, options){
var input = $('<input type="text">').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');
},
}
});

//实现添加方法
obj = {
editRow : false,
search : function () {
$('#box').datagrid('load', {
user : $.trim($('input[name="user"]').val()),
date_from : $('input[name="date_from"]').val(),
date_to : $('input[name="date_to"]').val(),
});
},
add : function () {
$('#save').show();
$('#redo').show();
if (!this.editRow) {
$('#box').datagrid('endEdit', this.editRow);
} else {
$('#box').datagrid('insertRow', {
index : 0,
row : {
//date : (new Date()).Format("yyyy-MM-dd hh:mm:ss"),
},
});
$('#box').datagrid('beginEdit', 0);
this.editRow = true;
}
},
save : function () {
$('#save,#redo').hide();
this.editRow = false;
//将新增的一行设置为结束编辑状态
$('#box').datagrid('endEdit', 0);
},
redo : function () {
$('#save,#redo').hide();
this.editRow = false;
$('#box').datagrid('rejectChanges');
},
};
onAfterEdit : function (rowIndex, rowData, changes) {
console.log(rowData)

},
L //HTML 部分
<div style="margin-bottom:5px">
<a href="#" class="easyui-linkbutton" iconCls="icon-add"
plain="true" onclick="obj.add();">添加</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit"
plain="true">修改</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove"
plain="true">删除</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save"
plain="true" style="display:none;" id="save" onclick="obj.save();">保存
</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-redo"
plain="true" style="display:none;" id="redo" onclick="obj.redo();">取消编
辑</a>
</div>