码迷,mamicode.com
首页 > 其他好文 > 详细

easyui datagrid plunges 扩展 插件

时间:2014-10-23 01:19:12      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   os   ar   使用   java   

 

 项目使用 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<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 error return ; } if (result.success) { this_.dlg.dialog(‘close‘); this_.reload.call(this_); $.messager.show({ // show tips title : ‘提示‘, 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 扩展 插件

标签:style   blog   http   color   io   os   ar   使用   java   

原文地址:http://www.cnblogs.com/hubing/p/4044780.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!