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

最新推荐文章于 2024-12-06 09:23:01 发布

cc_yy_zh

最新推荐文章于 2024-12-06 09:23:01 发布

阅读量5.2k

点赞数

分类专栏：前端文章标签： ligerui

本文链接：https://blog.youkuaiyun.com/cc_yy_zh/article/details/77978656

版权

前端专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何使用ligerui表格实现特定单元格不可编辑及在目的地前添加新行的需求。通过onBeforeEdit事件判断并阻止编辑，以及在表格末尾添加新行的方法，确保出发地和目的地字段保持不变。同时，提供了删除行的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、需求：开发个表格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; 
        }