表格列表常用方法和事件以及事件触发的时机

一、 获取表格的vm对象

首先要清楚，要想使用表格gridModel原型上的方法和事件，就要先获取表格的实例对象，通过以下代码获取；

function (event) {
    var viewModel = this;
    //页面只有一个表格时，获取表格vm对象的方法，通过如下代码获取
    var gridModel = viewModel.getGridModel();
    //页面有多个表格时，获取某个表格vm对象的方法，通过表格的childrenfield属性值或者cCode，获取指定表格vm对象
    var gridModel = viewModel.get('childrenfield'/'cCode');
}

二、 表格常用方法汇总

1、控制是否显示表格序号

function (event) {
    var viewModel = this;
    var gridModel = viewModel.getGridModel();
    //控制是否显示表格序号，通过'showRowNo'字段状态来控制，bool类型 true:显示，false:隐藏
    gridModel.setState('showRowNo', true);
}

2、控制是否显示列设置(表格右上角三个点)

function (event) {
    var viewModel = this;
    var gridModel = viewModel.getGridModel();
    //控制是否显示列设置，通过'showColumnSetting'字段状态来控制，bool类型 true:显示，false:隐藏
    gridModel.setState('showColumnSetting', true);
}

3、控制是否显示分页(正常元数据渲染情况下)

function (event) {
    var viewModel = this;
    var gridModel = viewModel.getGridModel();
    //控制是否显示分页(正常元数据渲染情况下)，通过'pagination'字段状态来控制，bool类型 true:显示，false:隐藏
    gridModel.setState('pagination', true);    
}

4、获取表格行模型

function (event) {
    var viewModel = this;
    var gridModel = viewModel.getGridModel();
    //获取表格行模型（编辑态）
    gridModel.getEditRowModel();   
}

5、获取表格列模型

function (event) {
    var viewModel = this;
    var gridModel = viewModel.getGridModel();
    //获取表格列模型
    gridModel.getEditRowModel().get('表格列字段名');
}

6、控制是否展示多选框(以下两种方式都可以)

function (event) {
    var viewModel = this;
    var gridModel = viewModel.getGridModel();
    //控制表格是否展示多选框(以下两种方式都可以)
    //1.通过setShowCheckbox()方法来控制，bool类型 true:显示，false:隐藏
    gridModel.setShowCheckbox(true);
    //2.通过'showCheckBox'字段状态来控制，bool类型 true:显示，false:隐藏
    gridModel.setState('showCheckBox', true);   
}

7、控制表格每页显示的数据条数(两种情况，分开讲解)

function (event) {
    var viewModel = this;
    var gridModel = viewModel.getGridModel();
    //1.表格第一次加载，在表格数据加载之前设置分页条数(第一种情况)
    //数据加载之前
    gridModel.on('beforeLoad', function (data){
        //通过setPageInfo()方法设置，参数为object->{pageSize:number,pageIndex:number,recordCount:number}
        //pageSize:分页条数 pageIndex:当前页码 recordCount:数据总条数
        gridModel.setPageInfo({
            pageSize:5,
            pageIndex:1,
            recordCount:20
        })
    });
    //2.表格数据通过API函数调取第三方接口实现时，分页组件需要监听触发分页函数pageInfoChange,设置分页信息(第二种情况)
    //分页触发函数
    gridModel.on('pageInfoChange',function(){
        //获取当前页码
        var pageIndex = gridModel.getPageIndex();
        //获取当前页条数
        var pageSize = gridModel.getPageSize();
        //调取API函数查询数据
        cb.rest.invokeFunction("接口地址", {pageIndex,pageSize,...others},
            function(err, res) {
                var data = res.data;
                //设置数据模式为本地
                gridModel.setState('dataSourceMode','local');
                //设置表格数据
                gridModel.setDataSource(data.recordList);
                //通过setPageInfo()方法设置，参数为object->{pageSize:number,pageIndex:number,recordCount:number}
                //pageSize:分页条数 pageIndex:当前页码 recordCount:数据总条数
                gridModel.setPageInfo({
                    pageSize:data.pageSize,
                    pageIndex:data.pageIndex,
                    recordCount:data.recordCount
                })
            })
        })
}

8、表格动态设置选中行/取消选中,需要在设置数据之后

function (event) {
    var viewModel = this;
    var gridModel = viewModel.getGridModel();
    //表格数据加载完成-钩子
    gridModel.on('afterSetDataSource',function(data){
        //表格动态设置选中行,需要在设置数据之后
        var rowIndex=[0,1,4];
        gridModel.select(rowIndex);//参数也可以是数组
        //取消选中 rowIndexes 参数也可以是数组
        gridModel.unselect(rowIndexes) 
    }) 
}

9、表格数据列合并方法

function (event) {
    var viewModel = this;
    var gridModel = viewModel.getGridModel();
    /*  表格数据列合并方法
        目前列合并有两种方式：
          1、顺序合并；2、按数据合并。表格模型中mergeMode来标识当前合并的方式，1为顺序合并，2为数据合并。默认为顺序合并。
          最好使用顺序合并！！！
    */
    //开启合并模式
    gridModel.setState('mergeCells',true);
    //某个列是否开启列合并的功能通过设置bMergeCol 属性来控制，true开启，false为关闭。通过扩展脚本可以动态设置
    gridModel.setColumnState('new1','bMergeCol',true);
}

10、表格动态设置行颜色、列颜色 column:列名 index:行号

function (event) {
    var viewModel = this;
    var gridModel = viewModel.getGridModel();
    //表格动态设置行颜色、列颜色  column:列名 index:行号
    //设置表格列CSS样式
    gridModel.setColumnState('new1','style',{backgroundColor:'red'});
    gridModel.setColumnState('giftstype', 'className', 'highlight-red');
    //设置表格行CSS样式
    gridModel.setRowState(3, 'className', 'highlight-red');
}

11、表格自定义列输出(可参考前端扩展开发-组件扩展-表格组件扩展)

function (event) {
    var viewModel = this;
    var gridModel = viewModel.getGridModel();
    //在项目中增加扩展的组件 加在extend formatter目录下
    //将组件注册到扩展组件中 
    //在init初始化去调用 column：列名字段
    gridModel.setColumnState(column, 'formatter', (rowInfo, rowData, fullName = "bd.project.ProjectVO") => {
        return { 
            formatterKey: 'DeleteLabel',//自定义输出组件
            props: {
                rowInfo,
                rowData,
                fullName
            }
        }
    })
}

12、动态控制表格列的显示隐藏，需要在设置数据之后(触发时机：表格数据加载完成)(两种方式)

function (event) {
    var viewModel = this;
    var gridModel = viewModel.getGridModel();
    //表格数据加载完成-钩子
    gridModel.on('afterSetDataSource',function(data){
        //1.动态控制表格列的显示隐藏，需要在设置数据之后，根绝'visible'属性判断，bool类型 true:显示，false:隐藏
        gridModel.setColumnState('new3', 'visible', true);
        //2.表格动态新增虚拟列标准做法是 把这列配进去 根据条件显示隐藏(效果同上)
        gridModel.setColumnState('new1', 'bShowIt', true);
    }) 
}

13、表格动态赋值(需要考虑赋值后，分页控件的设置)

function (event) {
    var viewModel = this;
    var gridModel = viewModel.getGridModel();
    //1、直接赋值
    var data = [];
    gridModel.setState('dataSourceMode', 'local'); // 确保是local模式
    gridModel.setDataSource(data);

    //2、调用接口赋值
    gridModel.set('dataSourceMode', null);
    gridModel.setDataSource({
        method: 'POST',
        options: { mask: true, uniform: false },
        url: 'xxx/xxx/xxx/xx'
        }, params, function (res) {

    })
}

14、表格里面自定义按钮动作逻辑处理（触发时机：表格数据加载完成之后）

function (event) {
    var viewModel = this;
    var gridModel = viewModel.getGridModel();
    //表格数据加载完成-钩子
    gridModel.on('afterSetDataSource',function(data){
        //获取行数据集合
        const rows = gridModel.getRows();
        //获取动作集合
        const actions = gridModel.getCache('actions');
        const actionsStates = [];
        //动态处理每行动作按钮展示情况
        rows.forEach(data => {
            const actionState = {};
            actions.forEach(action => {
                if (action.cItemName == "btnStop") {

                    if (data.enable == 0 || data.enable == 2) {
                        actionState[action.cItemName] = { visible: false };
                    }
                    else {
                        actionState[action.cItemName] = { visible: true };
                    }
                } else if (action.cItemName == "btnUnstop") {
                    if (data.enable == 1) {
                        actionState[action.cItemName] = { visible: false };
                    }
                    else {
                        actionState[action.cItemName] = { visible: true };
                    }
                }
                else {
                    actionState[action.cItemName] = { visible: true };
                }
            });
            actionsStates.push(actionState);
        });
        gridModel.setActionsState(actionsStates);
    }) 
}

15、获取表格数据方法

function (event) {
  var viewModel = this;
  var girdModel = viewModel.getGridModel();
  //触发按钮点击事件
  viewModel.get('button5xa').on('click',function(args){
      //获取点击行的行数据（根据行号）
      const rowData = gridModel.getRow(args.index);
      //获取表格当前页面所有的行数据
      const rowAllDatas = gridModel.getRows();
      //获取表格当前页面表体数据(比getRows多了_status字段)
      const tabelDatas = gridModel.getData();
      //获取表格已勾选行的行数据(不使用行号查找)
      const selecteDatas = gridModel.getSelectedRows();
  })
}

16、获取选中行的索引号

function (event) {
  var viewModel = this;
  var girdModel = viewModel.getGridModel();
  //触发按钮点击事件
  viewModel.get('button5xe').on('click',function(){
      //获取表格已选中的行的索引集合
      const indexArr = gridModel.getSelectedRowIndexes();
      //点击表格行内按钮时，或者触发在任何绑定在列表行上的事件时，获取当前行的index
      const index = gridModel.getFocusedRowIndex();
  })
}

17、取消双击列表行打开卡片页

function (event) {
  var viewModel = this;
  var girdModel = viewModel.getGridModel();
  //取消双击列表行打开卡片页 通过'forbiddenDblClick'字段来判断 bool类型 默认为false
  gridModel._set_data('forbiddenDblClick',true);
}

18、表格数据为空时，取消表格自动增加一行的功能

function (event) {
  var viewModel = this;
  var girdModel = viewModel.getGridModel();
  //表格数据为空时，取消表格自动增加一行的功能
  viewModel.getParams().autoAddRow = false;
}

19、控制可编辑行数据列的必输校验

function (event) {
  var viewModel = this;
  var girdModel = viewModel.getGridModel();

  gridModel.on('afterSetDataSource',function(){
      //控制可编辑行数据列的必输校验 column:列名  bIsNull为true为必输校验
      gridModel.setColumnState(column,'bIsNull',false);
  })
}

20、列表页面数据取消自动查询

function (event) {
  var viewModel = this;
  //列表页面数据取消自动查询  autoLoad  默认为true
  viewModel.getParams().autoLoad = false;
}

21、设置列表页面固定高度

function (event) {
  var viewModel = this;
  var girdModel = viewModel.getGridModel();
  //设置列表页面固定高度 设置表格fixedHeight属性  取值为number类型 单位：px
  girdModel.setState('fixedHeight',xxx)
}

22、设置列表页面固定列

function (event) {
  var viewModel = this;
  var girdModel = viewModel.getGridModel();
  //设置列表页面固定列 设置表格列状态bFixed属性
  girdModel.setColumnState('new2','bFixed',true)
}

注意以下方法为卡片页面表格单独支持的操作方法，列表页面表格一般不支持

23、表格增行、插行、删行（一般用于卡片页面子表表格中，列表页面是有BUG的暂不支持）

function (event) {
  var viewModel = this;
  var girdModel = viewModel.getGridModel();
  //制造批量拆入行时假数据
  const rowDatas=[
      {
        "shouhuoren":"李四",
        "tenant_id":"gkjxg2z2",
        "huowuzhiliangpingji":'客商',
        "huowuzhiliangdengji":"二等",
        "huowuxiangximiaoshu":"货物详情描述test",
        "pubts":"2021-07-28 13:56:51"
      },
      {
        "shouhuoren":"张三",
        "tenant_id":"gkjxg2z2",
        "huowuzhiliangpingji":'客商',
        "huowuzhiliangdengji":"二等",
        "huowuxiangximiaoshu":"货物详情描述test",
        "pubts":"2021-07-28 13:56:51"
      }
  ]
  //制造单行假数据
  const rowData={
        "shouhuoren":"张三",
        "tenant_id":"gkjxg2z2",
        "huowuzhiliangpingji":'客商',
        "huowuzhiliangdengji":"二等",
        "huowuxiangximiaoshu":"货物详情描述test",
        "pubts":"2021-07-28 13:56:51"
  }
  //表格增行操作
  gridModel.appendRow(rowData);
  //表格插行功能（单条数据） 入参：rowIndex:行号  rowData:行数据
  gridModel.insertRow(rowIndex,rowData);  
  //表格批量插入数据 入参：rowIndex:行号  rowDatas:行数据
  gridModel.insertRows(rowIndex,rowDatas);
  //表格删行功能 入参：rowIndexes:行号集合 [0,1]
  gridModel.deleteRows(rowIndexes);
  //表格删除所有行
  gridModel.deleteAllRows();
}

24、控制卡片页面表格不可编辑的方法（表格编辑态和新增态）

function (event) {
  var viewModel = this;
  var girdModel = viewModel.getGridModel();

  //整个表格不可编辑
  gridModel.setReadOnly(true);
  //控制某个单元格不可编辑   入参： rowIndex:行号  column:列名  
  gridModel.setCellState(rowIndex,column,'readOnly',true);  
  //控制表格某列不可编辑  入参：column:列名  bCanModify:取值true为可修改  fasle为不可修改
  gridModel.selColumnState(column,'bCanModify',false);
  //控制表格某行不可编辑 入参：rowIndexe:行号  disabled:true为启动禁用，false为取消禁用
  gridModel.setRowState(rowIndexe,'disabled',true);
}

25、表格常用其他方法

function (event) {
  var viewModel = this;
  var girdModel = viewModel.getGridModel();
  //清空表格数据和状态
  gridModel.clear();
  //全选
  gridModel.selectAll();
  //取消全选
  gridModel.unselectAll();
  //设置表格分页条数 number类型
  gridModel.setPageSize(pageSize);
  //获取分页条数
  gridModel.getPageSize();
  //设置分页页码   pageIndex页码  refresh 
  gridModel.setPageIndex(pageIndex, refresh, isMask);
  //获取分页页码
  gridModel.getPageIndex();
}

26、表格自定义列展示（非组件类）

function (event) {
  var viewModel = this;
  var gridModel=viewModel.getGridModel();
  //@params columnName 表格列名 （必填）
  //@params formatter 元数据参数 （固定，必填）
  gridModel.setColumnState('live_url', 'formatter', function(rowInfo, rowData) {
      if(rowData.live_url){
        //自定义展示列
        return {
          //是否重写  true：是 false:否
          override: true,
          //自定义展示的内容
          html:`<a href=${rowData.live_url} target='_blank'>`+ rowData.live_url +`</a>`
        } 
      }
  })
}

27、表格详细方法汇总地址

访问地址：https://www.showdoc.com.cn/89974793848004/511806707024978

三、 表格常用事件汇总

1、beforeCellValueChange 单元格数据改变前事件

function (event) {
  var viewModel = this;
  var girdModel = viewModel.getGridModel();
  //单元格数据改变前事件
  gridModel.on("beforeCellValueChange", function (event) {
    //rowIndex:'行号', cellName: '列名', value: '新值', oldValue: '旧值'
    let { rowIndex, cellName, value, oldValue, childrenField } = event;
    /*
      to do someing...
    */
    //返回true继续单元格数据改变，返回false终止单元格数据改变
    return true;
  });
}

2、afterCellValueChange 单元格数据改变后事件

function (event) {
  var viewModel = this;
  var girdModel = viewModel.getGridModel();
  //单元格数据改变后事件
  gridModel.on("afterCellValueChange", function (event) {
    //rowIndex:'行号', cellName: '列名', value: '新值', oldValue: '旧值'
    let { rowIndex, cellName, value, oldValue, childrenField } = event;
    /*
      to do someing...
    */
  });
}

3、beforeSetDataSource 设置表格数据前事件

function (event) {
  var viewModel = this;
  var girdModel = viewModel.getGridModel();
  //设置表格数据前事件 data为grid数据格式
  gridModel.on("beforeSetDataSource", function (data) {
    /*
      to do someing...
    */
    //返回true为允许设置grid数据，返回false为终止设置数据
    return true;
  });
}

4、afterSetDataSource 设置表格数据后事件

function (event) {
  var viewModel = this;
  var girdModel = viewModel.getGridModel();
  //设置表格数据后事件  data为grid数据格式
  gridModel.on("afterSetDataSource", function (data) {
    /*
      to do someing...
    */
  });
}

5、beforeSelect 选中select前事件

function (event) {
  var viewModel = this;
  var girdModel = viewModel.getGridModel();
  //选中select前事件 rowIndexs为行号，单行(整形)or多行(数组)
  gridModel.on("beforeSelect", function (rowIndexs) {
    /*
      to do someing...
    */
    //返回true为允许选中，返回false为终止选中
    return false;
  });
}

6、afterSelect 选中select后事件

function (event) {
  var viewModel = this;
  var girdModel = viewModel.getGridModel();
  //选中select后事件 rowIndexs为行号，单行(整形)or多行(数组)
  gridModel.on("afterSelect", function (rowIndexs) {
    /*
      to do someing...
    */
  });
}

7、beforeUnselect 取消选中select前事件

function (event) {
  var viewModel = this;
  var girdModel = viewModel.getGridModel();
  //取消选中select前事件 rowIndexs为行号，单行(整形)or多行(数组)
  gridModel.on("beforeUnselect", function (rowIndexs) {
    /*
      to do someing...
    */
    //返回true为允许取消选中，返回false为终止取消选中
    return true;
  });
}

8、afterUnselect 取消选中select后事件

function (event) {
  var viewModel = this;
  var girdModel = viewModel.getGridModel();
  //取消选中select后事件 rowIndexs为行号，单行(整形)or多行(数组)
  gridModel.on("afterUnselect", function (rowIndexs) {
    /*
      to do someing...
    */
  });
}

9、beforeSelectAll 表格全选前事件

function (event) {
  var viewModel = this;
  var girdModel = viewModel.getGridModel();
  //单元格全选前事件
  gridModel.on("beforeSelectAll", function () {
    /*
      to do someing...
    */
    //返回true为允许全选，返回false为终止全选
    return true;
  });
}

10、afterSelectAll 表格全选后事件

function (event) {
  var viewModel = this;
  var girdModel = viewModel.getGridModel();
  //表格全选后事件  data为选中行的数据
  gridModel.on("afterSelectAll", function (data) {
    /*
      to do someing...
    */
  });
}

11、beforeUnselectAll 表格全选取消前的事件

function (event) {
  var viewModel = this;
  var girdModel = viewModel.getGridModel();
  //表格全选取消前的事件
  gridModel.on("beforeUnselectAll", function (event) {
    /*
      to do someing...
    */
    //返回true为允许取消全消，返回false为终止取消全消
    return true;
  });
}

12、afterUnselectAll 表格全选取消后的事件

function (event) {
  var viewModel = this;
  var girdModel = viewModel.getGridModel();
  //表格全选取消后的事件
  gridModel.on("afterUnselectAll", function () {
    /*
      to do someing...
    */
  });
}

13、beforeInsertRow 增行/插行前事件

function (event) {
  var viewModel = this;
  var girdModel = viewModel.getGridModel();
  //增行/插行前事件
  gridModel.on("beforeInsertRow", function (data) {
    /*
      to do someing...
    */
    //返回true为允许增/插行，返回false为终止操作
    return false;
  });
}

14、afterInsertRow 增行/插行后事件

function (event) {
  var viewModel = this;
  var girdModel = viewModel.getGridModel();
  //增行/插行后事件 data格式为{ index: '增/插行行号', row: '行数据'}
  gridModel.on("afterInsertRow", function (data) {
    /*
      to do someing...
    */
  });
}

15、beforeDeleteRows 删行前事件

function (event) {
  var viewModel = this;
  var girdModel = viewModel.getGridModel();
  //删行前事件 data为要删除的行数据
  gridModel.on("beforeDeleteRows", function (data) {
    /*
      to do someing...
    */
    //返回true为允许删行，返回false为终止操作
    return false;
  });
}

16、afterDeleteRows 删行后事件

function (event) {
  var viewModel = this;
  var girdModel = viewModel.getGridModel();
  //删行后事件 data为已删除的行数据
  gridModel.on("afterDeleteRows", function (data) {
    /*
      to do someing...
    */
  });
}

17、beforeLoad 搜索表格数据之前事件

function (event) {
  var viewModel = this;
  var girdModel = viewModel.getGridModel();
  //搜索表格数据之前，可以修改params参数
  gridModel.on('beforeLoad', function(params){
    //一般主要修改默认查询的过滤条件
    /*
      to do someing...
    */
  })
}

18、表格详细事件汇总地址

访问地址：https://www.showdoc.com.cn/89974793848004/511923336454970