ligerui 表格中设置单元格不可编辑，添加行，删除行

Myth丶恋晨 2022-06-08 04:13 400阅读 0赞

一、需求：开发个表格grid用来显示维护线路段，出发地和目的地已经确定，需要维护中间路段  
二、解析:  
1、既然出发地和目的地已经确定，那么出发地和目的地是不可以编辑的，因为附带有其他字段是可以编辑的，所以不可以直接操作行  
2、添加的线路段需要在目的地之前显示  
三、开发  
上网查了一些资料，还是没有头绪，想了好久终于还是实现了  
1、点击添加时在目的地之前添加一行

toolbar : {
            id   : 'grid_toolbar',
            items: [{
                text   : '添加',
                disable: false,
                id     : 'new_btn',
                click  : function () { 
                    window.routegrid.addRow(
                            {
                                freight_station : '',
                                freight_station_name : '',
                                supplier : '',
                                supplier_name : ''
                            },manager.getData()[manager.getData().length-1],true)
                },
                icon   : 'add'
            }, {
                text : '删除',
                click: function () { 
                    deleteRow();
                },
                icon : 'delete'
            }, {
                text : '提交全部',
                click: function () { 
                    f_total();
                },
                icon : 'save'
            }]
        }

代码贴的有点多，关键代码

window.routegrid.addRow(
                            { freight_station : '', freight_station_name : '', supplier : '', supplier_name : '' },manager.getData()[manager.getData().length-1],true)
                },

其中routegrid是grid的id  
addRow方法有几个参数，具体参考官网  
\{  
freight\_station : ”,  
freight\_station\_name : ”,  
supplier : ”,  
supplier\_name : ”  
\}  
是添加那一行的默认值，  
manager.getData()\[manager.getData().length-1\]是获取最后一行的数据，  
true 是否在此之前，true是

=========================  
2、设置单元格不可编辑

enabledEdit : true,
        rownumbers:true,
        onBeforeEdit : beforeEdit,
        isScroll: false,
        checkbox:true,

表格里有个onBeforeEdit 参数

/** * 编辑前重新渲染 */  
        function beforeEdit(rowData){
            //出发地
            if(rowData.column.columnindex == 2 && rowData.record.__id == manager.getData()[0].__id 
                    && rowData.record.freight_station == dialogData.rowdatas[0].source_location_gid){
                return false; 
            }
            //目的地不可编辑
            if(rowData.record.__id == manager.getData()[manager.getData().length-1].__id 
                    && rowData.record.freight_station == dialogData.rowdatas[0].dest_location_gid){
                return false; 
            }
            return true;
        }

rowData.column.columnindex == 2 是判断第二列  
rowData.record.\_\_id == manager.getData()\[0\].\_\_id 判断是第一行  
rowData.record.freight\_station == dialogData.rowdatas\[0\].source\_location\_gid 判断是否是出发地  
return false; 不可编辑

if(rowData.record.__id == manager.getData()[manager.getData().length-1].__id 
                    && rowData.record.freight_station == dialogData.rowdatas[0].dest_location_gid){
                return false; 
            }

这一段没有判断列，所以限制了这一行

最后return true 是可以编辑

删除行可以参考官网例子