BIP表格列表常用方法和事件以及事件触发的时机
| 一、获取表格的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:``+ rowData.live_url +`` } } }) } 三、表格常用事件汇总 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、beforeDelectRows删行前事件 function (event) { var viewModel = this; var girdModel = viewModel.getGridModel(); //删行前事件 data为要删除的行数据 gridModel.on("beforeDeleteRows", function (data) { /* to do someing... */ //返回true为允许删行，返回false为终止操作 return false; }); } 16、afterDelectRows删行后事件 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、beforeSetTitle表格右上角三道竖设置数据前事件 function (event) { var viewModel = this; var girdModel = viewModel.getGridModel(); //点击列表右上角三道竖 调整其中的字段 gridModel.on('beforeSetTitle', function(data){ //修改data中的数据 即可调整展示的字段 /* to do someing... */ }) } |
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！