on
点击新增用户&＃xff0c;不是弹出一个一个dialog&＃xff0c;而是直接在表格下面增加一行可编辑的&＃xff0c;然后点击保存就可以新增
第一步&＃xff1a;加一个toolbar,在handler中当点击新增用户&＃xff0c;会调用datagrid的appendRow方法&＃xff0c;此方法有个参数&＃xff0c;可以用来初始化&＃xff0c;注意如果以前在格式化定义了全局变量&＃xff0c;新增一行&＃xff0c;会保留记录&＃xff0c;所以不能定义全局变量来格式化
$("#tableid").datagrid("appendRow",{city:&＃39;&＃39;}); &＃xff0c;
第二部 开启编辑哪一行&＃xff0c;调用datagrid的beginEdit方法&＃xff0c;这方法传一个编辑行的索引,调用datagrid的getRow方法
var index&＃61; $("#tableid").datagrid("getRows").length-1;
$("#tableid").datagrid("beginEdit",index);
第三部 在columns中每列中指定编辑类型
{field:"username",title:"姓名",width:100, editor:{ //options就是验证规则&＃xff0c;validatebox的特性&＃xff0c;自定义的验证规则也可以用type:"validatebox",options:{required:true,missingMessage:"姓名必填"} }
| editor | string,object | 指编辑类型。当是 string 时指编辑类型&＃xff0c;当 object 时包含两个特性&＃xff1a; text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。 |
editor中没有datetimebox组件&＃xff0c;所以&＃xff0c;需要扩展&＃xff0c;datagrid的特性里提供了扩展demO
编辑器&＃xff08;Editor&＃xff09;
用 $.fn.datagrid.defaults.editors 重写了 defaults。
每个编辑器有下列行为&＃xff1a;
| 名称 | 参数 | 说明 |
| init | container, options | 初始化编辑器并且返回目标对象。 |
| destroy | target | 如果必要就销毁编辑器。 |
| getValue | target | 从编辑器的文本返回值。 |
| setValue | target , value | 给编辑器设置值。 |
| resize | target , width | 如果必要就调整编辑器的尺寸。 |
$.extend($.fn.datagrid.defaults.editors, {
//自定义命名&＃xff0c;要传到editor的string参数中datetimebox: { init: function(container, options){ var input &＃61; $(&＃39;&＃39;).appendTo(container); input.datetimebox(options);return input; }, getValue: function(target){ //获取值return $(target).datetimebox("getValue") }, setValue: function(target, value){ $(target).datetimebox(&＃39;setValue&＃39;);}, resize: function(target, width){ var input &＃61; $(target); if ($.boxModel &＃61;&＃61; true){ input.width(width - (input.outerWidth() - input.width())); } else { input.width(width); } } } });
这样就可以用了&＃xff0c;不然没效果
{field:"startTime",title:"起始时间",width:100,editor:{type:"datetimebox",options:{required:true,missingMessage:"起始时间必填",editable:false}}}
-------------------------
由于点击新增和修改&＃xff0c;点同一个保存按钮&＃xff0c;向后台发送请求&＃xff0c;所以
可以设置一个全局变量&＃xff0c;保存状态&＃xff0c;当不是undefined,就不能再新增一行和修改记录了&＃xff0c;只有是undefined才可以新增记录
实际开发中是可以批量新增的&＃xff0c;这里就控制只能新增一条记录。
{text:"保存用户",iconCls:"icon-search",handler:function(){if($("#tableid").datagrid("validateRow",editing)){ //验证这一行是否都通过验证&＃xff0c;$("#tableid").datagrid("endEdit",editing);//结束编辑editing&＃61;undefined;//将编辑状态置为初始状态}}}
以上只能将数据保留在前台&＃xff0c;刷新后就没了&＃xff0c;然后调用onAfterEdit结束编辑之后回调函数&＃xff0c;同步到数据库&＃xff0c;
{text:"新增用户",iconCls:"icon-add",handler:function(){flag&＃61;"add";$("#tableid").datagrid("unselectAll"); //当新增一行时&＃xff0c;其他的选中的都取消$("#tableid").datagrid("appendRow",{city:&＃39;&＃39;});editing&＃61; $("#tableid").datagrid("getRows").length-1;// alert(len);$("#tableid").datagrid("beginEdit",editing);}},
编辑&＃xff1a;需要加复选框&＃xff0c;一般可以加在columns的冻结列中&＃xff0c;注意是二维数组
frozenColumns:[[{field:"ck",checkbox:true }]],
删除修改取消
var flag;//保存发送url的判断&＃xff0c;标识全局的&＃xff0c;对同一个保存按钮发送不同的请求的做法
var editing;//编辑状态
$("#tableid").datagrid({
url:"servlet1/userServlet1?method&＃61;getList",
height:300,
// width:1000,
fit:true,
fitColumns:true,
toolbar:[
{text:"新增用户",
iconCls:"icon-add",
handler:function(){
flag&＃61;"add";
$("#tableid").datagrid("unselectAll");
$("#tableid").datagrid("appendRow",{city:&＃39;&＃39;});
editing&＃61; $("#tableid").datagrid("getRows").length-1;
// alert(len);
$("#tableid").datagrid("beginEdit",editing);
}
},
{
text:"编辑用户",
iconCls:"icon-edit",
handler:function(){
flag&＃61;"edit";
var arr&＃61; $("#tableid").datagrid("getSelections");
if(arr.length!&＃61;1){
$.messager.show({
title:"提示",
msg:"请选择一条记录"
})
}else{
if(editing&＃61;&＃61;&＃61;undefined){
editing&＃61; $("#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&＃61;undefined;
}
}
}, {text:"删除用户",
iconCls:"icon-remove",
handler:function(){
var arr&＃61; $("#tableid").datagrid("getSelections");
if(arr.length<&＃61;0){
$.messager.show({
title:"提示",
msg:"请至少选择一条记录"
})
}else{
var ids&＃61;"";
$.each(arr,function(i,ndom){
ids&＃61;ndom.id&＃43;",";
})
$.messager.confirm("友情提示","确定删除吗",function(i){
if(i){
$.post("servlet1/userServlet1?method&＃61;delete",{
ids:ids
},function(){
$.messager.show({
title:"呵呵",
msg:"删除成功"
})
});
$("#tableid").datagrid("reload");
}else{
return ;
}
})
}
}
},
{text:"取消用户",
iconCls:"icon-remove",
handler:function(){
$("#tableid").datagrid("rejectChanges");
editing&＃61;undefined;
}
}
京公网安备 11010802041100号