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);
			return editor;
		},
		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 instanceof Array){
			$.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 instanceof Array){
			$.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').datagrid('getSelections');
					if(rows.length ==1){
						//修改时、取消密码一栏的可编辑状态
						$('#datagrid').datagrid('removeEditor', 'passWord');
						
						if(editRow != undefined){
							$('#datagrid').datagrid('endEdit', editRow);
						}
						if(editRow == undefined){
							var rowIndex = $('#datagrid').datagrid('getRowIndex',rows[0]);
							$('#datagrid').datagrid('beginEdit',rowIndex);
							editRow = rowIndex;
							$('#datagrid').datagrid('unselectAll');
						}
					}else if( rows.length == 0){
						$.messager.alert('提示', '请选择一条修改记录！','info');
					}else if(rows.length >= 1){
						$.messager.alert('提示', '只能选择一条修改记录！','info');
					}
				}

三：页面源码

各个方法代码中都有很明确的注释、不再单独赘述。

1、首页 datagrid2

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


  
    
    My JSP 'original.jsp' starting page
    
    
  
    
  
    
  
    <script type="text/java script" src="js/jquery.min.js">
    <

java_easyui体系之DataGrid（3）(一)