?

?項目使用 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}}

總結

以上是生活随笔為你收集整理的easyui datagrid plunges 扩展 插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。