on

点击新增用户,不是弹出一个一个dialog,而是直接在表格下面增加一行可编辑的,然后点击保存就可以新增

第一步:加一个toolbar,在handler中当点击新增用户,会调用datagrid的appendRow方法,此方法有个参数,可以用来初始化,注意如果以前在格式化定义了全局变量,新增一行,会保留记录,所以不能定义全局变量来格式化

     $("#tableid").datagrid("appendRow",{city:''}); ,

第二部 开启编辑哪一行,调用datagrid的beginEdit方法,这方法传一个编辑行的索引,调用datagrid的getRow方法

    var index= $("#tableid").datagrid("getRows").length-;
      $("#tableid").datagrid("beginEdit",index);

第三部 在columns中每列中指定编辑类型

 {field:"username",
title:"姓名",
width:,
editor:{ //options就是验证规则,validatebox的特性,自定义的验证规则也可以用
type:"validatebox",
options:{ required:true,
missingMessage:"姓名必填"
} }

editor

string,object

指编辑类型。当是 string 时指编辑类型,当 object 时包含两个特性:
type:string,编辑类型,可能的类型是:

text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。
options:对象,编辑类型对应的编辑器选项。

editor中没有datetimebox组件,所以,需要扩展,datagrid的特性里提供了扩展demO

编辑器(Editor

用 $.fn.datagrid.defaults.editors 重写了 defaults。

每个编辑器有下列行为:

名称

参数

说明

init

container, options

初始化编辑器并且返回目标对象。

destroy

target

如果必要就销毁编辑器。

getValue

target

从编辑器的文本返回值。

setValue

target , value

给编辑器设置值。

resize

target , width

如果必要就调整编辑器的尺寸。

$.extend($.fn.datagrid.defaults.editors, {
//自定义命名,要传到editor的string参数中
datetimebox: { init: function(container, options){ var input = $('<input type="text" >').appendTo(container);
input.datetimebox(options); return input; }, getValue: function(target){ //获取值 return $(target).datetimebox("getValue") }, setValue: function(target, value){ $(target).datetimebox('setValue'); }, resize: function(target, width){ var input = $(target); if ($.boxModel == true){ input.width(width - (input.outerWidth() - input.width())); } else { input.width(width); } } } });

这样就可以用了,不然没效果

{field:"startTime",
title:"起始时间",
width:,
editor:{
type:"datetimebox",
options:{
required:true,
missingMessage:"起始时间必填",
editable:false } } }

-------------------------

由于点击新增和修改,点同一个保存按钮,向后台发送请求,所以

可以设置一个全局变量,保存状态,当不是undefined,就不能再新增一行和修改记录了,只有是undefined才可以新增记录

实际开发中是可以批量新增的,这里就控制只能新增一条记录。

   {text:"保存用户",
iconCls:"icon-search",
handler:function(){
if($("#tableid").datagrid("validateRow",editing)){ //验证这一行是否都通过验证,
$("#tableid").datagrid("endEdit",editing);//结束编辑
editing=undefined;//将编辑状态置为初始状态 } } }

以上只能将数据保留在前台,刷新后就没了,然后调用onAfterEdit结束编辑之后回调函数,同步到数据库,

                      {text:"新增用户",
iconCls:"icon-add", handler:function(){
flag="add";
$("#tableid").datagrid("unselectAll"); //当新增一行时,其他的选中的都取消
$("#tableid").datagrid("appendRow",{city:''});
editing= $("#tableid").datagrid("getRows").length-;
// alert(len);
$("#tableid").datagrid("beginEdit",editing); }
},

编辑:需要加复选框,一般可以加在columns的冻结列中,注意是二维数组

     frozenColumns:[[
{field:"ck",
checkbox:true }
]],

删除修改取消


var flag;//保存发送url的判断,标识全局的,对同一个保存按钮发送不同的请求的做法
var editing;//编辑状态
$("#tableid").datagrid({

url:"servlet1/userServlet1?method=getList",
height:300,
// width:1000,
fit:true,
fitColumns:true,
toolbar:[

{text:"新增用户",
iconCls:"icon-add",

handler:function(){
flag="add";
$("#tableid").datagrid("unselectAll");
$("#tableid").datagrid("appendRow",{city:''});
editing= $("#tableid").datagrid("getRows").length-1;
// alert(len);
$("#tableid").datagrid("beginEdit",editing);

}
},
{
text:"编辑用户",
iconCls:"icon-edit",
handler:function(){
flag="edit";
var arr= $("#tableid").datagrid("getSelections");
if(arr.length!=1){
$.messager.show({
title:"提示",
msg:"请选择一条记录"
})

}else{
if(editing===undefined){
editing= $("#tableid").datagrid("getRowIndex",arr[0]);
$("#tableid").datagrid("unselectAll");
$("#tableid").datagrid("beginEdit",editing);

}

}

}

},

{text:"保存用户",
iconCls:"icon-search",
handler:function(){
if($("#tableid").datagrid("validateRow",editing)){
alert(editing);
$("#tableid").datagrid("endEdit",editing);
editing=undefined;

}

}

}, {text:"删除用户",
iconCls:"icon-remove",
handler:function(){
var arr= $("#tableid").datagrid("getSelections");
if(arr.length<=0){
$.messager.show({
title:"提示",
msg:"请至少选择一条记录"
})
}else{
var ids="";
$.each(arr,function(i,ndom){
ids=ndom.id+",";
})
$.messager.confirm("友情提示","确定删除吗",function(i){
if(i){
$.post("servlet1/userServlet1?method=delete",{
ids:ids
},function(){
$.messager.show({
title:"呵呵",
msg:"删除成功"
})
});

$("#tableid").datagrid("reload");
}else{

return ;
}

})

}

}
},
{text:"取消用户",
iconCls:"icon-remove",
handler:function(){
$("#tableid").datagrid("rejectChanges");
editing=undefined;
}

}

 

easyui---editgrid的更多相关文章

  1. JavaScript- jquery easyui 可编辑表格插件 easyui.editgrid

    最近项目前端使用 jquery+easyui来做,用了几个月,觉得easyui是一个很不错的开源前端UI框架, 虽然偶尔会遇到一些小问题,但是凭借多年前端开发的实力积累 都一一解决了,其中比较典型的就 ...

  2. 前端框架 EasyUI (2)页面布局 Layout

    在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...

  3. 前端框架 EasyUI (1)熟悉一下EasyUI

    jQuery EasyUI 官方网站 http://www.jeasyui.com/ .去年新开了个中文网 http://www.jeasyui.net/,不知道是不是官方的,不过看着挺像样.但是,广 ...

  4. 前端框架 EasyUI (0) 重新温习(序言)

    几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...

  5. ASP.NET MVC5+EF6+EasyUI 后台管理系统(1)-前言与目录(持续更新中...)

    开发工具:VS2015(2012以上)+SQL2008R2以上数据库  您可以有偿获取一份最新源码联系QQ:729994997 价格 666RMB  升级后界面效果如下: 任务调度系统界面 http: ...

  6. ASP.NET MVC5+EF6+EasyUI 后台管理系统(81)-数据筛选(万能查询)

    系列目录 前言 听标题的名字似乎是一个非常牛X复杂的功能,但是实际上它确实是非常复杂的,我们本节将演示如何实现对数据,进行组合查询(数据筛选) 我们都知道Excel中是如何筛选数据的.就像下面一样 他 ...

  7. ASP.NET MVC5+EF6+EasyUI 后台管理系统(63)-Excel导入和导出-自定义表模导入

    系列目录 前言 上一节使用了LinqToExcel和CloseXML对Excel表进行导入和导出的简单操作,大家可以跳转到上一节查看: ASP.NET MVC5+EF6+EasyUI 后台管理系统(6 ...

  8. ASP.NET MVC5+EF6+EasyUI 后台管理系统(80)-自由桌面

    系列目录 前言 这次我们来做一个有趣的事情,有朋友跟做了很远,找我要自由桌面的代码,这次我们将演示自由桌面的代码. 自由桌面:用户可以随意增删改桌面的布局.个数(只留自己需要看到的数据),这次纯属Ea ...

  9. ASP.NET MVC5+EF6+EasyUI 后台管理系统(67)-MVC与ECharts

    系列目录 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...

  10. 套用JQuery EasyUI列表显示数据、分页、查询

    声明,本博客从csdn搬到cnblogs博客园了,以前的csdn不再更新,朋友们可以到这儿来找我的文章,更多的文章会发表,谢谢关注! 有时候闲的无聊,看到extjs那么肥大,真想把自己的项目改了,最近 ...

随机推荐

  1. Android上实现各种风格的隐藏菜单,比如左右滑动菜单、上下滑动显示隐藏菜单

    Android上的菜单展示风格目前是各式各样的,但用的最多且体验最好的莫过于左右滑动来显示隐藏的菜单本示例实现了各种方式的菜单展示效果,只有你想不到的源码:https://github.com/Sim ...

  2. <转>vmp3.0.9全保护拆分解析

    以下为了避免插件干扰,故采用x64dbg原版进行分析. 首先我通过检测到调试器的弹窗进行栈回溯,定位到该关键点:CALL eax   由于才接触Vmp,所以是把各个保护拆分开来进行的分析,会比较简单一 ...

  3. Android——SQLite/数据库 相关知识总结贴

    android SQLite简介 http://www.apkbus.com/android-1780-1-1.html Android SQLite基础 http://www.apkbus.com/ ...

  4. awk的些许小技巧

    一句话kill掉名为navimain进程的shell脚本(利用awk的列操作能力) `ps|grep navimain | awk 'NR==1 {print $1}'`

  5. 利用linux的mtrace命令定位内存泄露(Memory Leak)

    一谈到内存泄露, 多数程序猿都闻之色变. 没错, 内存泄露非常easy引入. 但非常难定位.  以你我的手机为例(如果不常常关机). 如果每天泄露一些内存, 那么開始的一个星期, 你会发现手机好好的. ...

  6. iOS开发支付宝支付

    iOS支付宝支付(Alipay)详细接入流程以及项目中遇到的问题分析    浏览: 149 发布日期: 2016-10-19  分类: ios 最近在项目中接入了微信支付和支付宝支付,总的来说没有那么 ...

  7. stm32之TIM+ADC+DMA采集50HZ交流信号

    http://cache.baiducontent.com/c?m=9d78d513d98207f04fece47f0d01d7174a02d1743ca6c76409c3e03984145b5637 ...

  8. Mybatis使用MySQL模糊查询时输入中文检索不到结果怎么办--转自http://www.jb51.net/article/88236.htm

    这篇文章主要介绍了Mybatis使用MySQL模糊查询时输入中文检索不到结果的解决办法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下   项目开发中,在做Mybatis动态查询时,遇到了 ...

  9. python一天一题(3)

    #--coding=utf8-- from selenium import webdriver import time import logging import os.path ''' 搜索取搜索的 ...

  10. Spring配置-数据库连接池proxool[转]

    数据库连接是一种关键的有限的昂贵的资源,这一点在多用户的网页应用程序中体现得尤为突出.对数据库连接的管理能显著影响到整个应用程序的伸缩性和健壮性,影响到程序的性能指标.数据库连接池正是针对这个问题提出 ...