项目使用 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 扩展 插件的更多相关文章

  1. easyUI datagrid editor扩展dialog

    easyUI datagrid简单使用:着重两点1.editor对象的click事件:2.将dialog窗体内的值填写到当前正编辑的单元格内 <!DOCTYPE html> <htm ...

  2. jquery EasyUI datagrid 的扩展

    接触 easyui 半年,js学的不深.大神请路过. 直接扩展 添加方法: $.extend($.fn.datagrid.methods, { getSelectedIndex: function ( ...

  3. easyUI datagrid view扩展

    //扩展easyuidatagrid无数据时显示界面 var emptyView = $.extend({}, $.fn.datagrid.defaults.view, { onAfterRender ...

  4. 对easyui datagrid进行扩展,当滚动条拉直最下面就异步加载数据。

    以下方法是通用的,只要把datagrid定义为全局的即可,其他部分的代码不用进行修改! 可以把以下代码放入到一个单独的js文件,然后再需要的页面引入即可! $(function(){ try{ $(& ...

  5. (转)扩展jquery easyui datagrid 之动态绑定列和数据

    本文转载自:http://blog.csdn.net/littlewolf766/article/details/7336550 easyui datagrid 不支持动态加载列,上次使用的方法是自己 ...

  6. 扩展jquery easyui datagrid编辑单元格

    扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...

  7. easyui datagrid remoteSort的实现 Controllers编写动态的Lambda表达式 IQueryable OrderBy扩展

    EF 结合easy-ui datagrid 实现页面端排序 EF动态编写排序Lambda表达式 1.前端页面 var mainListHeight = $(window).height() - 20; ...

  8. EasyUI datagrid 明细表格中编辑框 事件绑定 及灵活计算 可根据此思路 扩展其他

    原创 : EasyUI datagrid 明细表格中编辑框 事件绑定 及灵活计算 可根据此思路 扩展其他 转载,请注明出处哦!谢谢! 原创 : EasyUI datagrid 明细表格中编辑框 事件绑 ...

  9. 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

随机推荐

  1. C++ 遇见的一些函数

    1.位与(&)操作,计算十进制数中的为"1"的位数 int cnt_one(int k) { ; //保存位为"1"的数量 while (k) { k ...

  2. 【转载】C#后台声明式验证,远离if验证

    ViewModel public class ViewModel { [Required(ErrorMessage="标题不能为空")] public string Title { ...

  3. PHP开发圣经读书笔记01

    从今天开始,以“圣经”这本书为教材,系统的温习一下php,之前都是看视频学的. 1.访问表单变量--php变量名称必须与表单域的名称一致 例:$_POST['uname'];  //表示把表单域中na ...

  4. 001.XE3添加TPerlRegEx

    TPerlRegEx 官方下载地址:http://www.regular-expressions.info/download/TPerlRegEx.zip 下载解压,打开pcre.pas文件可看到,直 ...

  5. Django基本操作命令

    1.新建一个django项目 django-admin.py startproject project-name 2.新建一个app python manage.py startapp app-nam ...

  6. web2py--------------用web2py写 django的例子 --------开发环境

    我们先从广为人知的例子说起xi 也就是官方的例子,我会在最后给出代码: ============================环境=================== 编译器使用vs code , ...

  7. Web应用工作流程总结

    了解Web应用的工作过程有益于Web测试时更好的理解,Web应用工作的过程分为以下5个步骤: 1. 用户在Web浏览器中输入一个Web地址.选择一个超链接或点击一个按钮 2. Web浏览器将用户的动作 ...

  8. socket编程中用到的头文件整理

    socket编程中需要用到的头文件 sys/types.h:数据类型定义 sys/socket.h:提供socket函数及数据结构 netinet/in.h:定义数据结构sockaddr_in arp ...

  9. node.js 1Million concurrent connections!

    https://github.com/ashtuchkin/node-millenium http://blog.caustik.com/2012/08/19/node-js-w1m-concurre ...

  10. Mac OS系统 - 将视频转换成gif

    github中开源轻量级应用:droptogif