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

时间:2021-09-03 09:16:39

一、需求:开发个表格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 是可以编辑

删除行可以参考官网例子