ps做图游戏下载网站,衡水淘宝的网站建设,dedecms 门户网站制作,wordpress 好用加速插件我们接着看表格相关的事件#xff0c;用友的文档打不开#xff0c;真的是天大的404#xff0c;客观请看这个开发文档网址#xff0c;找不到了#xff0c;你说holy 不咯#xff1f;http://tinper.org/mdf/#xff08;如果有哪位小伙伴知道这个地址是不是迁移了的话#…我们接着看表格相关的事件用友的文档打不开真的是天大的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、控制表格每页显示的数据条数情况2API接口调用 //表格数据通过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 gridModelviewModel.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);
