项目使用 springmvc4.x spring4.x hibernate4.x easyui
为了便于开发，扩展了easyui 的 datagrid 功能，下面直接贴上扩展代码：
具体的实现项目可见 ：
/** * context 指定为 项目上下文 * index 如果定义多组dataGrid，index指定为对应的参数：一组dataGrid包含（datagrid;toorbar;dialog;button） * templateUrl 指定为 此次访问操作对应的controller路径 * crud 指定为 对应的toorbar包含什么操作；crud：增加修改删除; c：增加; u：修改; d：删除; */function DataGridEasyui(context, index, templateUrl, crud) { this.context = context; this.index = index; this.templateUrl = templateUrl; this.crud = crud;// 'c','r','u','d','all' this.saving =false; //处理中};$.extend(DataGridEasyui.prototype, { /** * 初始化DataGridEasyui * crud按钮的响应操作 增加：add; 修改：edit; 删除:remove; */ init : function() { this.dataGrid = $("#dg-" + this.index); this.toolBar = $("#toolbar-" + this.index); this.dlg = $("#dlg-" + this.index); this.dlgBtn = $("#dlg-buttons-" + this.index); var fns = [ this.proxy(this.add, this,this.toolBar.find(".add")), this.proxy(this.edit, this,this.toolBar.find(".edit")), this.proxy(this.remove, this,this.toolBar.find(".remove")) ]; //toolBar 响应函数 if (this.crud == 'crud') { this.toolBar.find(".add").bind('click', fns[0]); this.toolBar.find(".edit").bind('click', fns[1]); this.toolBar.find(".remove").bind('click', fns[2]); } else if (this.crud == 'c') { this.toolBar.find(".add").bind('click', fns[0]); } else if (this.crud == 'u') { this.toolBar.find(".edit").bind('click', fns[1]); } else if (this.crud == 'd') { this.toolBar.find(".remove").bind('click', fns[2]); } //dlg-buttons 响应函数 if (this.crud == 'crud' || this.crud == 'c' || this.crud == 'u') { this.dlgBtn.find('.save').bind('click', this.proxy(this.save, this,this.dlgBtn.find('.save'))); this.dlgBtn.find('.cancel').bind('click',this.proxy(this.cancel, this,this.dlgBtn.find('.cancel'))); } }, /** * 改变函数作用域 * * @param fn * @param scope * @returns */ proxy : function(fn, scope,btn) { return function (){ if(btn.is("[class*='disabled']")){ //禁用了不需要响应事件 return ; } return fn.call(scope,arguments[0],btn); }; }, /** * 初始化dialog里面的form表单 */ formInit : function() { }, /** * toorbar的增加按钮 */ add : function() { $('#dlg-' + this.index).dialog('open').dialog('setTitle', '新增'); this.resetForm(this.dlg.find("form:eq(0)")); this.formInit.call(this); }, /** * toorbar的修改按钮 */ edit : function() { var rows = this.dataGrid.datagrid('getSelections'); if (!rows || rows.length == 0) { $.messager.alert('提示', '请选择记录！'); } else { if (rows.length == 1) { this.dlg.dialog('open').dialog('setTitle', '修改'); this.dlg.find("form").form('clear').form('load', rows[0]); this.formLoadData(rows[0]); } else { $.messager.alert('提示', '请选择单行记录！'); } } }, /** * toorbar的删除按钮 */ remove : function() { var this_ = this; var rows = $('#dg-' + this.index).datagrid('getSelections'); if (!rows || rows.length > 0) { $.messager.confirm('确认', '你确定要删除所选的记录吗?', function(r) { if (r) { $.post(this_.getController("logicDelete"), { pids : $.map(rows, function(row) { return row.pid; }).join("::") }, function(result) { if (result.success) { this_.reload.call(this_); $.messager.show({ // show // tips title : '提示', msg : result.msg }); } else { $.messager.alert('错误', result.msg); } }, 'json'); } }); } else { $.messager.alert('提示', '请选择记录！'); } }, /** * 重置dialog里面的form表单 */ resetForm:function(form){ var form = $(form); form[0].reset(); form.find("[type=hidden]").val(""); }, /** * form表单加载数据 */ formLoadData:function (data){ //处理隐藏域 this.dlg.find("form:eq(0) input[type!=radio][type!=checkbox][name*='.']").each(function(){ var name = $(this)[0].name; var value = data[name]; if(value){ $(this).val(value); return ; } if(name.indexOf(".")!=-1){ var names = name.split("."); value =data ; for(var i=0,l = names.length;i 下面的list.jsp页面为使用这个插件的方法：
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><% String context = request.getContextPath(); pageContext.setAttribute("context_", context);%><%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%> Manager | Item ID | realName |
|---|
只需要在页面中 创建一个对象： 并调用init方法即可；
var dg1 = new DataGridEasyui(context_, 1 , templateUrl, 'crud');dg1.init();
列表页对应的元素为 id="dg-1"的datagrid + id="toolbar-1"的toolbar
新增/修改对应的元素为 id="dlg-1"的dialog + id="dlg-buttons-1"的button
效果图如上，具体的代码可见git :