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

前端之家收集整理的这篇文章主要介绍了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

猜你在找的Ajax相关文章