agGrid不允许对指定行做checkbox选择

官方文档如下描述：

https://www.ag-grid.com/javascript-grid-selection/#specify-selectable-rows

界面：

方法一：（只控制点击checkbox时不能选择，但是出了一个bug,如有遇到的伙伴望能够交流一下解决方案。 设置某些行不可进行行选择时，这个方法对全选框也起了作用，导致1、全选时全选checkbox没有选中图标，2、反选也就是取消所有选择失效）

 

解决办法：2019-3-25补充：自己写判断有太多情况需要判断，而且不好找判断条件，所以最后解决步骤：（换了一个方法解决）

1、 不可选的行不渲染checkbox，这里说明：即使没有渲染checkbox框，其实该行仍然可以被选中（比如选中后的颜色会被加上）用的方法是：

checkboxSelection:(params)=>{
    let field=params.data;
    this.actions.getNotSelectAndRowId(params);//获取不可选行的索引和id
    return params.data?!options.includes(field.f8)&&!options.includes(field.f11):false;
}

// 获取冲突行的_id和rowid
getNotSelectAndRowId:function(params){
    let options=['是','是（请假）'];
    let field=params.data;
    let id = field._id;
    //获取所有冲突行的_id /行ID  options.includes(field.f7)||
    if (options.includes(field.f8)||options.includes(field.f11)) {
        !this.data.notSelectData.includes(id)&& this.data.notSelectData.push(id)
        if (params.node) !this.data.notSelectRowId.includes(params.node.id)&&this.data.notSelectRowId.push(params.node.id)
        else if (params.id) !this.data.notSelectRowId.includes(params.id)&&this.data.notSelectRowId.push(params.id)
    }
},

2、从api里获取所有选中的行,然后根据条件筛选不可选的，把这些行存起来，行索引和每行的唯一识别的比如id(有时候id可能是索引，要区别开）方法:api.getSelectedRows()

let rows = this.agGrid.gridOptions.api.getSelectedRows();
//去掉rows中冲突的行数据
if ((this.data.viewMode== "viewFromCorrespondence"||this.data.viewMode=='editFromCorrespondence') &&this.data.parentTableId== "8174_vZhJu4jY8yfZpVTjkmsrhF") {
    for (let r = 0; r < rows.length; r++) {
        for (let j = 0; j < this.data.notSelectData.length; j++) {
            if (rows[r]&&rows[r]._id == this.data.notSelectData[j]) {
                rows.splice(r, 1)
            }
        }
    }
    this.actions.removeNotSelectDataColor()
}

3、

第一个：判断单行点击，单击某个单元格多次可能会选中改行

第二个：点击全选，其实点击全选还是选中的全部数据，这时候通过之前拿到的每行的id的数组，把不可选的行从getSelectedRows()这去除掉，这样保存下来的数据里就不会存在不可选的行数据

此外，因为全选会给所有行加上选中的颜色，这里需要通过行索引的数组把颜色去掉

//移除冲突行的选中颜色
  removeNotSelectDataColor:function(){
console.log('this.data.isSaveSelectData',localStorage.getItem('isSaveSelectData'),localStorage.getItem('isSaveSelectData')=='false',typeof localStorage.getItem('isSaveSelectData'))
      //如果刚刚保存的排期单对应关系数据，就返回不取消颜色
      if (localStorage.getItem('isSaveSelectData')!='false'){
          return;
      }
      for(let i=0;i<$('.ag-row').length;i++){
          let rowId = $('.ag-row')[i].getAttribute('row');
          //let className = $('.ag-row')[i].className;
          if (this.data.notSelectRowId.includes(rowId)){
              $($('.ag-row')[i]).removeClass('ag-row-selected')
          }
      }
  },

总结：这个方法其实就是障眼法，页面看着没选中，其实是选中状态的，只是人为的把选中颜色取消了，把checkbox取消了，把不可选的行数据直接从所有数据里删掉了，这样保存和全选反选就没问题了

 

遇到一个bug:滚动可能之前没有颜色的不可选的行颜色会被再次加上，这个把去掉颜色 的方法在滚动事件里在执行一次就ok

this.el.find('.ag-body-viewport').on('scroll', _.debounce((e) => {
    That.actions.setFloatingFilterInput();
    //解决agGrid滚动冲突行颜色问题
    this.actions.removeNotSelectDataColor();
}, 700));

其他问题针对不同的情况而定，愿大家写代码写的开心