easyui---editgrid
on
点击新增用户，不是弹出一个一个dialog，而是直接在表格下面增加一行可编辑的，然后点击保存就可以新增
第一步：加一个toolbar,在handler中当点击新增用户，会调用datagrid的appendRow方法，此方法有个参数，可以用来初始化，注意如果以前在格式化定义了全局变量，新增一行，会保留记录，所以不能定义全局变量来格式化
$("#tableid").datagrid("appendRow",{city:''}); ，
第二部 开启编辑哪一行，调用datagrid的beginEdit方法，这方法传一个编辑行的索引,调用datagrid的getRow方法
var index= $("#tableid").datagrid("getRows").length-1;
$("#tableid").datagrid("beginEdit",index);
第三部 在columns中每列中指定编辑类型
{field:"username",
title:"姓名",
width:100,
editor:{ //options就是验证规则，validatebox的特性，自定义的验证规则也可以用
type:"validatebox",
options:{
required:true,
missingMessage:"姓名必填"
}
}
|
editor |
string,object |
指编辑类型。当是 string 时指编辑类型，当 object 时包含两个特性： text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。 |
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:100,
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-1; // 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;
}
}
