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:'内容',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动态编辑行就完成啦

========================================================================================================

分割线 ========================================================================================================
上次写的这个行编辑还是有点问题的，就是没有验证，而且添加的时候没有获取到焦点。所以这里修改一下：
1.editor类型改为textBox,因为text不支持easyui的验证

columns:[[ 
                {field:'id',editor:{
                    type:'textBox',options:{
                        required:true,validType:'length[0,30]',invalidMessage:'不能超过30个字!'
                    }
                }}
            ]],

2.添加获取焦点：

function addRemark(){
        if (editIndex != undefined){
            return ;
        }
        $('#remark_dg').datagrid('insertRow',{
            index: 0,0);
        $('#remark_dg').datagrid('beginEdit',0);
        var ed = $('#remark_dg').datagrid('getEditor',{index:0,field:'text'});
        $(ed.target).textBox('textBox').focus(); 
        editIndex = 0;
    }

3.添加撤销操作：

function reject(){
            $('#remark_dg').datagrid('rejectChanges');
            editIndex = undefined;
    }

<a href="javascript:reject()" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" >取消</a>

原文链接：https://www.f2er.com/ajax/162545.html

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

猜你在找的Ajax相关文章