eaysui datagrid 点击添加单元格

效果图

div

					 
                        ********
                        
                            

                                
                            
                        
                    

按钮

    添加
    删除

script

 function renderNbyjyFormPrnd(prndList) {
        $("#dg-nbyjy-prndList").datagrid({
         // 传入主表id
            // method:"post",
            data: prndList,
            rownumbers: true,
            fit:true,
            // striped : true,  // 隔行变色
            // border: false,
            // idField: "id",
            fitColumns:true, //去除滚动条
            toolbar:"#dd-nbyjy-prnd-buttons",
            loadMsg:'加载中...', //加载提示
            onClickCell: onClickCellPrnd,
            singleSelect:false, // 如果为true，则只允许选择一行。
            // queryParams:{},   //在请求数据是发送的额外参数，如果没有则不用写
            // onLoadSuccess:function(data){},
            // rowStyler:function(index,row){}
            columns:[[
                {field:'id',title:'id',width:100,align:'center',checkbox: true},
                {field:'prnd',title:'****',width:100,align:'center',editor:{type: 'text',options:{}}}
            ]]
        });
    }
    // 查询信息
    // 由于首页查询没有直接获取子表信息， 编辑时， 这里需要单独查询
    function renderNbyjyFormJtsbPrnd(zbid) {
        $("#dg-nbyjy-prndList").datagrid({
            url:"******", // 传入
            method:"post",
            // data: prndList,
            rownumbers: true,
            fit:true,
            // striped : true,  // 隔行变色
            // border: false,
            // idField: "id",
            fitColumns:true, //去除滚动条
            toolbar:"#dd-nbyjy-prnd-buttons",
            loadMsg:'加载中...', //加载提示
            onClickCell: onClickCellPrnd,
            singleSelect:false, // 如果为true，则只允许选择一行。
            // queryParams:{},   //在请求数据是发送的额外参数，如果没有则不用写
            // onLoadSuccess:function(data){},
            // rowStyler:function(index,row){}
            columns:[[
                {field:'id',title:'id',width:100,align:'center',checkbox: true},
                {field:'prnd',title:'****',width:100,align:'center',editor:{type: 'text',options:{}}}
            ]]
        });
    }
    //可编辑行
    var editIndex = undefined;
    function endEditingPrnd(){
        if (editIndex == undefined){return true}
        if ($('#dg-nbyjy-prndList').datagrid('validateRow', editIndex)){
            $('#dg-nbyjy-prndList').datagrid('endEdit', editIndex);
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }
    //修改单元格
    //修改的方式是直接点击单元格，所以table要加上onClickCell属性，然后重写onClickCell方法
    function onClickCellPrnd(index, field){
        if (editIndex != index){
            if (endEditingPrnd()){
                $('#dg-nbyjy-prndList').datagrid('selectRow', index)
                    .datagrid('beginEdit', index);
                var ed = $('#dg-nbyjy-prndList').datagrid('getEditor', {index:index,field:field});
                ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
                editIndex = index;
            } else {
                $('#dg-nbyjy-prndList').datagrid('selectRow', editIndex);
            }
        }
    }
    // 添加行
    function addPrnd(){
        $('#dg-nbyjy-prndList').datagrid('appendRow',{id:''}); // 写入隐藏的id字段
    }
    // 删除行
    function removePrnd(){
        $.messager.confirm('Confirm','确认删除?',function(r){
            if (r) {
                var sels = $('#dg-nbyjy-prndList').datagrid('getSelections');
                for (var i in sels){
                    var rindex = $('#dg-nbyjy-prndList').datagrid('getRowIndex', sels[i]);
                    $("#dg-nbyjy-prndList").datagrid('deleteRow', rindex);
                }
            }
        });
    }
   
    function endEditPrnd() {
        var endRows = $('#dg-nbyjy-prndList').datagrid("getRows");// 获取所有的行，并且结束掉编辑
        for(var i =0; i < endRows.length; i++){
            $('#dg-nbyjy-prndList').datagrid('endEdit', i);
        }
    }