easyui datagrid plunges 扩展 插件

 项目使用 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// tipstitle : '提示',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<l;i++){value = value[names[i]];if(!value){return ;}}$(this).val(value);}});//处理单选多选this.dlg.find("form:eq(0) input[type=radio]").each(function(){var name =  $(this)[0].name;var value  =data[name] ;if(value){if($(this).val() == value){$(this)[0].checked="checked";}return ;}if(name.indexOf(".")!=-1){var names = name.split(".");value = data ;for(var i=0,l = names.length;i<l;i++){try{value = value[names[i]];}catch(e){return ;}}}else{value = data[name];}if($(this).val() == value){$(this)[0].checked="checked";}});//处理单选多选this.dlg.find("form:eq(0) input[type=checkbox]").each(function(){var name =  $(this)[0].name;var value  =data[name] ;var this_ = this ;if(value){$(value).each(function (index ,item ){if($(this_).val() == item){$(this_)[0].checked="checked";}});return ;}if(name.indexOf(".")!=-1){var names = name.split(".");value = data ;for(var i=0,l = names.length - 1;i<l;i++){try{value = value[names[i]];}catch(e){return ;}}if($.isArray(value)){for(var i=0,l =value.length ;i <l;i++ ){if(value[i][names[names.length-1]]==$(this).val()){$(this)[0].checked="checked";return ;}}}}else{value = data[name];}if($(this).val() == value){$(this)[0].checked="checked";}});this.dlg.find("form:eq(0) select").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<l;i++){value = value[names[i]];if(!value){return ;}}}else{value = data[name];}$(this).val(value);});},reload:function (){this.dataGrid.datagrid('reload'); // reload
    },/*** form 表单验证*/validateForm:function (form){return true;},/*** dlg-buttons 保存按钮*/save : function() {if(this.saving==true){  //避免重复提交return ;}var this_ = this;var form = this.dlg.find('form:eq(0)');var url;if (form[0].pid.value) {url = this.getController("doUpdate");} else {url = this.getController("doSave");}form.form('submit', {url : context_ + "/" + url,onSubmit : function() {var validate = $(this).form('validate')&& this_.validateForm(form);if(validate){this_.saving = true;}return validate;},success : function(result) {this_.saving = false ;var result ;try{result = jQuery.parseJSON(result)}catch(e){$.messager.alert('错误', "服务端出错！"); // show errorreturn ;}if (result.success) {this_.dlg.dialog('close');this_.reload.call(this_);$.messager.show({ // show tipstitle : '提示',msg : result.msg});} else {$.messager.alert('错误', result.msg); // show error
                }},onLoadError:function (){this_.saving = false}});},/*** dlg-buttons 取消按钮*/cancel : function() {this.dlg.dialog('close');},/*** 获取响应方法*/getController : function(method) {return this.templateUrl + "/" + method;}})

 

<%@ 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"%>
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Manager</title><link rel="stylesheet" type="text/css" href="<%=context %>/views/admin/jquery-easyui-1.4/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="<%=context %>/views/admin/jquery-easyui-1.4/themes/icon.css"><script type="text/javascript" src="<%=context %>/views/Scripts/jquery-1.4.1.js"></script><script type="text/javascript" src="<%=context %>/views/admin/jquery-easyui-1.4/jquery.min.js"></script><script type="text/javascript" src="<%=context %>/views/admin/jquery-easyui-1.4/jquery.easyui.min.js"></script><script type="text/javascript" src="<%=context %>/views/Scripts/easyui_dataGrid_extend.js"></script>
</head>
<body><table id="dg-1" class="easyui-datagrid" title="列表" style="width: 700px; height: 300px"data-options="toolbar:'#toolbar-1',checkOnSelect:true,selectOnCheck:true,fit:true,rownumbers:true,fitColumns:true,url:'${pageContext.request.contextPath}/${moduleName}/getData',method:'get',pagination:true,method:'get'"><thead><tr><th data-options="field:'ck',checkbox:true"></th><th data-options="field:'pid',width:80">Item ID</th><th data-options="field:'realName',width:80">realName</th></tr></thead></table><div id="toolbar-1"><a href="#" class="easyui-linkbutton add" iconCls="icon-add" plain="true">新增</a> <a href="#" class="easyui-linkbutton edit" iconCls="icon-edit" plain="true">修改</a> <a href="#" class="easyui-linkbutton remove" iconCls="icon-remove" plain="true">删除</a></div><div id="dlg-1" class="easyui-dialog" title="数据参数" style="width: 600px; height: 280px; padding: 10px 20px" closed="true" buttons="#dlg-buttons-1"><form method="post"><table cellpadding="5"><tr><td><input type="hidden" name="pid" /></td></tr><tr><td>用户名:</td><td><input class="easyui-textbox" type="text" name="realName" data-options="required:true"></input></td></tr><tr><td>密码:</td><td><input class="easyui-textbox" type="password" name="password" data-options="required:true"></input></td></tr><tr><td>角色:</td><td><table class="table-info-form"><c:forEach var="sysmanRole" items="${sysmanRoleList}"><tr ><td class="info-label">${sysmanRole.name }</td><td class="info-controller"> <input id="${sysmanRole.pid }" value ="${sysmanRole.pid }"  type ="checkbox" name ="roles.pid" />  </td></tr></c:forEach></table></td></tr></table></form></div><div id="dlg-buttons-1"><a href="#" class="easyui-linkbutton  save" iconCls="icon-ok">保存</a> <a href="#" class="easyui-linkbutton cancel" iconCls="icon-cancel">取消</a></div><script type="text/javascript">var context_ = '${context_}';var templateUrl = '${moduleName}';$( function() {var dg1 = new DataGridEasyui(context_, 1 , templateUrl, 'crud');dg1.init();});</script></body>
</html>

只需要在页面中 创建一个对象： 并调用init方法即可；

?

1 2	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

 

 

http://my.oschina.net/alexgaoyh/blog/317558?p={{currentPage+1}}