easyui---editgrid

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;
}

}