datagrid java_java_easyui体系之DataGrid（3）[转]

一：简介

在2的基础上实现增删改、增、改都是通过行编辑来实现的。具体业务逻辑：

1、 增加一条记录的时候：

a) 在datagrid表格最前端增加一行(当然也可在指定位置增加、)增加的行的字段必须与要显示的行的字段相同、或者用于存入数据库的更多信息，

b) 当有一条新增记录没有被保存时不能再增加新的行

c) 点击保存按钮、保存新增记录

d) 未保存之前点击撤销按钮、取消新增行

2、 修改一条记录的时候

a) 可以选择一条记录、点击修改之后出现可编辑状态

b) 可以双击一条记录直接出现可编辑状态、

c) 不管是那种进入修改的方式、都只能同时修改一条记录、并且密码列不允许编辑

3、 撤销功能：

a) 当点击新增、出现新增行之后、不想修改则可以取消新增

b) 当进入修改状态时、不想修改、点击撤销可取消修改状态

4、 删除：

a) 可同时删除多条记录、在删除之前会给出确认框、用于避免误删。

5、 关于新增、修改的与后台的交互操作、都是通过datagrid的onAfterEdit事件来完成的。具体的逻辑可根据自己的需要自行扩展

6、 对处于可编辑状态行的输入信息框进行了扩展：

a) 对用于选择时间的input扩展了一个datetimebox可以精确选择时间的功能

b) 对某列是否具有可编辑功能进行了扩展

二：关键之处

1、效果图：

2、datetimebox的扩展及使用方式

a)扩展代码：在自己定义的js中、页面必须引入此js文件

/**

* 扩展的关于编辑状态的 对要输入日期的控件使用*/$.extend($.fn.datagrid.defaults.editors, {

datetimebox: {

init:function(container, options){var editor = $('').appendTo(container);

options.editable= false;

editor.datetimebox(options);returneditor;

},

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

},

}

});

b)使用方式：是在datagrid初始化时用于显示时间的相应列上加的属性、可见页面源码

title : '创建时间',

field :'createTime',

width :100,//必须要给

editor : {

type:'datetimebox',//扩展的用于选择具体时间的类型

options:{

required:true,

}

}

3、editor的扩展及使用方式

a)扩展代码：在自己定义的js中、页面必须引入此js文件

/**

* 动态的选择处于修改状态的行中的某些列是否可编辑*/$.extend($.fn.datagrid.methods, {

addEditor :function(jq, param){if(param instanceofArray){

$.each(param,function(index, item){var e = $(jq).datagrid('getColumnOption', item.field);

e.editor=item.editor;

});

}else{var e = $(jq).datagrid('getColumnOption', param.field);

e.editor=param.editor;

}

},

removeEditor :function(jq, param){if(param instanceofArray){

$.each(param,function(index, item){var e = $(jq).datagrid('getColumnOption', item);

e.editor={};

});

}else{var e = $(jq).datagrid('getColumnOption', param);

e.editor={};

}

}

});

b)使用方式：是在点击修改按钮时触发的函数中、同样双击事件中也要加上、保持一致。

text : '修改',

iconCls :'icon-edit',

handler :function() {var rows = $('#datagrid').da