easyui行编辑：利用append row添加行，直接在行中编辑，ajax提交保存

今天工作用到了easyui行编辑，在这里总结一下，不会的同学可以看看，顺便吐槽一下，网上的很多博客都是粘贴复制的，内容很乱 ，而且看不懂，不知道这些粘贴复制的怀的是什么心，不但没用，还影响别人搜索。

呼吁大家在写博客的时候认真一些，别只粘贴复制，至少可以自己运行好了贴上自己的代码和一点感想，对别人用处很大的。

好了，正题开始——>

我用的是easyui 1.4

效果如下：

点击添加按钮，在第二行的位置添加新行，点击单元格输入内容，点保存通过ajax提交。

修改则直接点击单元格修改，点保存提交。

代码如下：

首先table还是平常的table，只不过要在需要编辑的列加上editor:‘text‘ 我这里只是编辑文本，所以是text，其他时间等类型请查api,

另外因为我触发修改的方式是直接点击单元格，所以table要加上onClickCell属性，然后重写onClickCell方法。

$("#remark_dg").datagrid({
            url:‘‘,
            columns:[[
                {field:‘cb‘,checkbox:true,align:‘center‘},
                {field:‘id‘,title:‘编号‘,width:80,hidden:true},
                {field:‘text‘,title:‘内容‘,width:80,editor:‘text‘}
            ]],
            toolbar:‘#remark_tb‘,  //表格菜单
            fit:true,
            fitColumns:true,
            loadMsg:‘加载中...‘, //加载提示
            rownumbers:true, //显示行号列
            singleSelect:true,//是允许选择一行
            onClickCell: onClickCell,
            queryParams:{   //在请求数据是发送的额外参数，如果没有则不用写
            },
            onLoadSuccess:function(data){
            },
            rowStyler:function(index,row){
            }
        });

简单说明下可编辑的实现方法：

首先通过beginEdit让选中的行启动编辑，保存的时候，获得选中的行，通过row取到编辑的信息，使用ajax提交，提交完成，使用endEdit属性结束行编辑。

 //可编辑行
    var editIndex = undefined;
    function endEditing(){
        if (editIndex == undefined){return true}
        if ($(‘#remark_dg‘).datagrid(‘validateRow‘, editIndex)){
            $(‘#remark_dg‘).datagrid(‘endEdit‘, editIndex);
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }
    function onClickCell(index, field){
        if (editIndex != index){
            if (endEditing()){
                $(‘#remark_dg‘).datagrid(‘selectRow‘, index)
                        .datagrid(‘beginEdit‘, index);
                var ed = $(‘#remark_dg‘).datagrid(‘getEditor‘, {index:index,field:field});
                ($(ed.target).data(‘textbox‘) ? $(ed.target).textbox(‘textbox‘) : $(ed.target)).focus();
                editIndex = index;
            } else {
                $(‘#remark_dg‘).datagrid(‘selectRow‘, editIndex);
            }
        }
    }
    function accept(){
        if (endEditing()){
            var row = $(‘#remark_dg‘).datagrid(‘getSelected‘);
            var text = row.text;
            var remarkid = row.id;
            var typeid = $("#typeid").val();
            $.ajax({
                url:"${ctx}/typeRemark/addTypeRemark.do",
                type:"post",
                dataType:"json",
                data:{
                    remarkid:remarkid,
                    text:text,
                    typeid:typeid
                },
                success:function(data){
                    if(data.status == "success"){
                        $.messager.show({
                            title : ‘提示‘,
                            msg : ‘操作成功‘
                        });
                        $(‘#dg‘).datagrid(‘load‘, {});
                    }else{
                        $.messager.show({
                            title : ‘提示‘,
                            msg : ‘操作失败，请联系管理员 ------‘
                        });
                    }
                },
                error:function(){
                        $.messager.show({
                            title : ‘提示‘,
                            msg : ‘系统错误，请联系管理员------‘
                        });
                }
            });
        }
    }
    function addRemark(){
         function addRemark(){
        if (editIndex != undefined){
            return ;
        }
        $(‘#remark_dg‘).datagrid(‘insertRow‘,{
            index: 1,   // 索引从0开始
            row: {
                text:‘‘
            }
        });
        $(‘#remark_dg‘).datagrid(‘selectRow‘, 1);
        $(‘#remark_dg‘).datagrid(‘beginEdit‘, 1);
        var ed = $(‘#remark_dg‘).datagrid(‘getEditor‘, {index:1,field:‘text‘});
        $(ed.target).focus();
        editIndex = 1;
    }
    }

这里有必要提一下，我的添加和修改方法用了一个方法accpet(),同时后台也用一个方法处理的，有需要的可以借鉴一下：

表现层用的是spring mvc，持久成用的hibernate:

@RequestMapping(value = "/addTypeRemark.do",method = RequestMethod.POST)
    @ResponseBody
    public Map<String,String> addTypeRemark(String text,String typeid,@RequestParam(value = "remarkid", required = false)Integer remarkid,HttpServletRequest request){
        Map<String,String>  map = new HashMap<String,String> ();
        System.out.println(typeid);
        try {
            BatchType batchType=batchTypeMag.find(Integer.parseInt(typeid));
            TypeRemark typeRemark = new TypeRemark();
            if(remarkid!=null){
                typeRemark = typeRemarkMag.find(remarkid);
            }
            typeRemark.setBatchType(batchType);
            typeRemark.setText(text);
            typeRemarkMag.saveOrUpdate(typeRemark);
            map.put("status","success");
        } catch (Exception e) {
            e.printStackTrace();
            map.put("status","fail");
        }
        return map;
    }

也就是说，添加的时候，没有这条记录的id,修改的时候需要通过记录的id修改，所以可以判断一下。

这样，easyui动态编辑行就完成啦