GridModel事件集合——yonBIP低代码

本文主要是介绍GridModel事件集合——yonBIP低代码，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

我们接着看表格相关的事件，用友的文档打不开，真的是天大的404，客观请看这个开发文档网址，找不到了，你说holy 不咯？http://tinper.org/mdf/（如果有哪位小伙伴知道这个地址是不是迁移了的话，麻烦告知一下哦，必将大谢也）
否则哪里有那么多的事？！

进入正文。
用友低代码的GridModel表格事件。

一、表格事件

• beforeCellValueChange

• afterCellValueChange

• beforeRowStateChange

• afterRowStateChange

• beforeColumnStateChange

• afterColumnStateChange

• beforeColumnValueChange

• afterColumnValueChange

• beforeCellStateChange

• afterCellStateChange

• beforeSetColumns

• afterSetColumns

• beforeSetDataSource

• afterSetDataSource

• beforeSelect

• afterSelect

• beforeUnSelect

• afterUnSelect

• beforeSelectAll

• afterSelectAll

• beforeUnSelectAll

• afterUnSelectAll

• beforeInsertRow

• afterInsertRow

• beforeDeleteRows

• afterDeleteRows

1、beforeCellValueChange
说明:grid单元格数据改变前事件, 返回true继续单元格数据改变，返回false终止单元格数据改变。

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

2、afterCellValueChange
说明:grid单元格数据改变后事件

viewModel.getGridModel().on("afterCellValueChange", function (event) {//rowIndex:'行号', cellName: '列名', value: '新值', oldValue: '旧值'let { rowIndex, cellName, value, oldValue, childrenField } = event;/*to do someing...*/
});

3、beforeRowStateChange
说明：行状态改变前事件,返回true继续行状态改变，返回false终止改变

//示例中data格式为{ rowIndex: ‘行号’, propertyName: ‘状态名’, value: ‘状态新值’, oldValue: ‘旧值’}
viewmodel.get(propertyName).on(' beforeRowStateChange',function (data) {return true;
});

4、afterRowStateChange
说明：行状态改变后事件

//示例中data格式为{ rowIndex: ‘行号’, propertyName: ‘状态名’, value: ‘状态新值’, oldValue: ‘旧值’}
viewmodel.get(propertyName).on(' afterRowStateChange',function (data) {});

5、beforeColumnStateChange
说明：列状态改变前事件, 返回true继续列状态改变，返回false终止状态改变

//示例中data格式为{ cellName: ‘列名’, propertyName: ‘状态名’, value: ‘状态名’, oldValue: ‘旧值’}
viewmodel.get(propertyName).on(' beforeColumnStateChange',function (data) {return true;
});

6、afterColumnStateChange
说明：列状态改变后事件

//示例中data格式为{ cellName: ‘列名’, propertyName: ‘状态名’, value: ‘状态名’, oldValue: ‘旧值’}
viewmodel.get(propertyName).on(' afterColumnStateChange',function (data) {});

7、beforeColumnValueChange
说明：列值改变前事件,返回true允许列值改变，返回false终止列值改变

//示例中data格式为{ cellName: ‘列名’, value: ‘列值’}
viewmodel.get(propertyName).on(' beforeColumnValueChange',function (data) {return true;
});

8、afterColumnValueChange
说明：列值改变后事件
//示例中data格式为{ cellName: ‘列名’, value: ‘列值’}

viewmodel.get(propertyName).on(' afterColumnValueChange',function (data) {});

9、beforeCellStateChange
说明：单元格状态改变前事件,返回true则允许状态改变，返回false终止改变

//示例中data格式为{ rowIndex: ‘行号’, cellName: ‘列名’, propertyName: ‘状态名’, value: ‘新值’, oldValue: ‘旧值’ }
viewmodel.get(propertyName).on(' beforeCellStateChange',function (data) {return true;
});

10、afterCellStateChange
说明：单元格状态改变后事件

//例：示例中data格式为{ rowIndex: ‘行号’, cellName: ‘列名’, propertyName: ‘状态名’, value: ‘新值’, oldValue: ‘旧值’ }
viewmodel.get(propertyName).on(' afterCellStateChange',function (data) {});

11、beforeSetColumns
说明：设置grid栏目前事件,返回true为允许设置栏目，返回false终止设置

//例：示例中columns格式为栏目数据格式
viewmodel.get(propertyName).on(' beforeSetColumns',function (columns) {return true;
});

12、afterSetColumns
说明：设置grid栏目后事件

//例：示例中columns格式为栏目数据格式
viewmodel.get(propertyName).on(' afterSetColumns',function (columns) {});

13、beforeSetDataSource
说明：设置grid数据前事件,返回true为允许设置grid数据，返回false为终止设置数据

//例：示例中data为grid数据格式
viewmodel.get(propertyName).on(' beforeSetDataSource',function (data) {return true;
});

14、afterSetDataSource
说明：设置grid数据后事件

//例：示例中data为grid数据格式
//设置表格数据后事件  data为grid数据格式
viewModel.getGridModel().on("afterSetDataSource", function (data) {/*to do someing...*/
});

15、beforeSelect
说明：选中select前事件,返回true为允许选中，返回false为终止选中

//例：示例中rowIndexes为行号，单行(整形)or多行(数组)
viewModel.getGridModel().on("beforeSelect", function (rowIndexs) {/*to do someing...*///返回true为允许选中，返回false为终止选中return true;
});

16、afterSelect
说明：选中select后事件

//例：示例中rowIndexes为行号，单行(整形)or多行(数组)
viewmodel.get(propertyName).on(' afterSelect',function (rowIndexes) {});

17、beforeUnSelect
说明：取消选中select前事件,返回true为允许取消选中，返回false为终止取消选中

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

18、afterUnSelect
说明：选中select后事件

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

19、beforeSelectAll
说明：全选前事件,返回true为允许全选，返回false为终止全选

viewModel.getGridModel().on("beforeSelectAll", function () {/*to do someing...*///返回true为允许全选，返回false为终止全选return true;});

20、afterSelectAll
说明：全选后事件

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

21、beforeUnSelectAll
说明：全消前事件,返回true为允许全消，返回false为终止全消

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

22、afterUnSelectAll
说明：全消后事件

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

23、beforeInsertRow
说明：增行/插行前事件,返回true为允许增/插行，返回false为终止操作

//例：示例中data格式为{ index: ‘增/插行行号’, row: ‘行数据’}
viewModel.getGridModel().on('beforeInsertRow',function (data) {return false;
});

24、afterInsertRow
说明：增行/插行后事件

//例：示例中data格式为{ index: ‘增/插行行号’, row: ‘行数据’}
viewModel.getGridModel().on('afterInsertRow',function (data) {});

25、beforeDeleteRows
说明：删行前事件,返回true为允许删行，返回false为终止操作

//例：示例中rows为要删除的行数据
viewModel.getGridModel().on('beforeDeleteRows',function (rows) {return false;
});

26、afterDeleteRows
说明：删行后事件

//例：示例中rows为已删除的行数据
viewmodel.get(propertyName).on('afterDeleteRow',function (rows) {});

二、表格常见（常用）方法

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

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

2、控制是否显示表格序号
示例：

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

3、控制是否显示列设置（表格右上角三个点）
示例：

function (event) {var viewModel = this;var gridModel = viewModel.getGridModel();//控制是否显示列设置，通过'showColumnSetting'字段状态来控制，bool类型 true:显示，false:隐藏gridModel.setState('showColumnSetting', 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、控制表格每页显示的数据条数（情况1）

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})});

8、控制表格每页显示的数据条数（情况2，API接口调用）
//表格数据通过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})})})
}

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

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)})
}

10、表格数据列合并方法

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);
}

11、表格动态设置行颜色、列颜色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');
}

12、表格自定义列输出（可参考前端扩展开发-组件扩展-表格组件扩展）

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}}})
}

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

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);})
}

14、表格动态赋值（需要考虑赋值后，分页空间的设置）【本地直接赋值】

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

15、表格动态赋值【接口】

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

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

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);})
}

17、隐藏行按钮，列表上鼠标放上去的按钮

/***@hideActionsBtns隐藏行按钮**params viewModel*/ function hideActionsBtns(viewModel) { // 隐藏具体的行按钮const actions = viewModel.getGridModel("prjResponsibleList").getCache('actions');const actionsStates = [];if (actions) {const rows = viewModel.getGridModel("prjResponsibleList").getRows();rows.forEach(element => {const actionState = {};actions.forEach(action => {actionState[action.cItemName] = {visible: false};});actionsStates.push(actionState);});}viewModel.getGridModel("prjResponsibleList").setActionsState(actionsStates);}

18、获取表格数据方法

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();})
}

19、获取选中行的索引号

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

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

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

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

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

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

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

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

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

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

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

25、设置列表页面固定列

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

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

26、表格增行、插行、删行（一般用于卡片页面子表表格中，列表页面是有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();
}

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

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);
}

28、一般常用的方法

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

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

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>`}}})
}

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

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

31、beforeSetTitle表格右上角三道竖设置数据前事件

function (event) {var viewModel = this;var girdModel = viewModel.getGridModel();//点击列表右上角三道竖 调整其中的字段gridModel.on('beforeSetTitle', function(data){//修改data中的数据 即可调整展示的字段/*to do someing...*/})
}

32、设置表格行上下拖拽

gridModel.setRowDraggable(true);

33、表格取消复现框

var gridModel = viewModel.getGridModel();//设置取消复现框gridModel.setState("showCheckBox",false);//或者gridModel.setShowCheckbox(false);

这篇关于GridModel事件集合——yonBIP低代码的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---