表格常见扩展

yonyouhmm

1、设置表格固定高度

1. viewModel.getGridModel().setState('fixedHeight', 300);

复制代码

表格吸底：扩展属性中增加 {subTableFullHeight: true}
2、开启表格简版分页

1. viewModel.getGridModel().setCache('useSimplePagination', true);

复制代码

3、表格表头设置

1. viewModel.on('afterLoadMeta',()=>{
   
2.     let gridModel = viewModel.getGridModel();
   
3.     //隐藏表头排序
   
4.     gridModel._set_data('multiSort',false);
   
5.     //隐藏表头锁定列
   
6.     gridModel._set_data('unLock',true);
   
7.     //隐藏表头锁定定位
   
8.     gridModel._set_data('unLookUp',true);
   
9.     //隐藏表头筛选
   
10.     gridModel._set_data('unColFilter',true);
    
11. })

复制代码

隐藏指定列的：viewModel.getGridModel().setColumnState('new1','unColFilter',true)

4、监听表格页码跳转的动作

1. viewModel.getGridModel().setCache('lazyLoadByPage', true)
   
2. viewModel.getGridModel().on('lazyLoadByPageInfo',function(data){
   
3.     //data 包含pageIndex pageSize两个入参
   
4.     debugger;
   
5. })

复制代码

5、多行表头

编辑器中给字段增加属性："multiLayeredNames": "顶层|测试|字段2"

6、设置子表某一列不能修改

1. viewModel.getGridModel().getEditRowModel().get('new3').setState('bCanModify',false)

复制代码

7、脚本控制主子切换

1. //第二个参数为true 页面才正常刷新
   
2. viewModel.get('sumSwitch').setValue(false,true);

复制代码

8、列表中某列数据相同合并

1. let gridModel = viewModel.getGridModel();
   
2. gridModel.setColumnState("new2", "bMergeCol", true);
   
3. gridModel.setColumnState("staffNew_name", "bMergeCol", true);
   
4. gridModel.setState('mergeCells', true);
   
5. gridModel.setState('mergeMode', 2);//数据合并
   
6. gridModel.setState('mergeSourceName', 'new2'); //根据哪个字段合并，默认根据主键id合并
   
7. gridModel.setState('mergeSourceName', 'staffNew_name');
   
8. gridModel.setState('mergePosition','first');//合并方式向上对齐，  默认是居中center合并

复制代码

9、列表中有afterCellValueChange事件，怎么在gridModel.setCellValue之后用脚本触发

1. viewModel.get('button27hg') && viewModel.get('button27hg').on('click', function (data) {
   
2.     viewModel.getGridModel().setCellValue(0,'new1','8');
   
3.     viewModel.getGridModel().execute('afterCellValueChange', {rowIndex: 0, cellName: 'new2',value:viewModel.getGridModel().getCellValue(0,'new1')});
   
4. });

复制代码

10、表格颜色控制

1. function loadStyle(params){
   
2.           var headobj=document.getElementsByTagName('head')[0];
   
3.           var style = document.createElement('style');
   
4.           style.type = 'text/css';
   
5.           headobj.appendChild(style);
   
6.           style.sheet.insertRule(params, 0);
   
7.         }
   
8.   loadStyle('.public_fixedDataTableRow_highlight-red [role="gridcell"] {background-color:red;}')
   
9.   
   
10.   gridModel.on('afterSetDataSource',()=>{
    
11.     //修改单元格字体颜色
    
12.     //前两个参数分别为行号和字段编码
    
13.     gridModel.setCellState(1,'new2','style',{color:'red'})
    
14.     //修改单元格背景色
    
15.     gridModel.setCellState(0,'new2','style',{background:'red'})
    
16.     //修改某列颜色
    
17.         gridModel.setColumnState('new4', 'style', {backgroundColor:'red'});
    
18.         //修改某行颜色
    
19.         gridModel.setRowState(2, 'className', 'highlight-red');
    
20.   })

复制代码

11、表格取消行点击和checkbox联动
表格的扩展属性中增加：selectOnChecked: false


12、如何自定义表格数据并设置分页
前端函数：

1. viewModel.getGridModel().on('afterSetDataSource', function (data) {
   
2.     let b = viewModel.getCache("remark");
   
3.     let gridModel = viewModel.getGridModel();
   
4.     if (!b) {
   
5.       let pageIndex = gridModel.getPageIndex();
   
6.       let pageSize = gridModel.getPageSize();
   
7.       let res = cb.rest.invokeFunction("AT166892061D00000A.backDesignerFunction.queryModelList", {pageIndex:pageIndex,pageSize:pageSize},function(err, res) {},viewModel,{async:false})
   
8.       debugger;
   
9.       let total = res.result.total;
   
10.       viewModel.setCache("remark", 1);
    
11.             gridModel.setState('dataSourceMode','local');
    
12.       gridModel.setDataSource(res.result.data);
    
13.             gridModel.setPageInfo({
    
14.                          pageSize: pageSize,
    
15.                          pageIndex: pageIndex,
    
16.                          recordCount:total
    
17.                      });
    
18.     } else {
    
19.       viewModel.clearCache('remark');
    
20.     }
    
21.   });

复制代码

后端api函数：

1. let AbstractAPIHandler = require('AbstractAPIHandler');
   
2.   class MyAPIHandler extends AbstractAPIHandler {
   
3.    execute(request){
   
4.      let pageIndex = request.pageIndex;
   
5.      let pageSize = request.pageSize;
   
6.      let sql = "select id, new1,new2,new3 from AT166892061D00000A.AT166892061D00000A.modalFrom limit "+ pageIndex +","+ pageSize;
   
7.      let sql2 = "select count(1) as count from AT166892061D00000A.AT166892061D00000A.modalFrom"
   
8.      var res = ObjectStore.queryByYonQL(sql);
   
9.      var total = ObjectStore.queryByYonQL(sql2);
   
10.      
    
11.    return {data:res,total:total[0].count};
    
12. }
    
13. }
    
14. exports({"entryPoint":MyAPIHandler});

复制代码

13、子表中禁止某行批量粘贴：

gridModel.on("beforePasteForbidden", function(data, column){console.log(data.cellName);if(data.cellName === 'qty') return false})

14、子表高度自适应
// 卡片页(第一个子表)表体横向滚动条吸底显示在table容器的cStyle中配置属性：{subTableFullHeight: true}


15、如何自定义表格分页组件每页多少条？
cExtPRops里配 pageSizeOptions，值的格式：['10', '20', '50', '100']   注意转成字符串
行编辑表，打开table编辑器，加入"pageSizeOptions": [20,50000

16、子表行支持行拖拽  变换子表行的顺序
viewModel.getGridModel().setRowDraggable(true);

17、表格小计和合计扩展
   //小计扩展
viewModel.getGridModel().on('afterCalcSubTotal',args=>{
    debugger;
    //自己按照需求遍历求和 然后赋值
    args.new4 = 2;
})
合计：viewModel.getGridModel().doPropertyChange('setSum', [{new2:5,new3:5}]);


18、列表页表格单元格中的内容怎么自动换行？

将列的cControlType改成'textarea'，然后表格扩展属性增加openContentHeight'：true

yonyouhmm

如何设置表格空表提示信息？

在表格的cStyle属性中配置：{noDataText: ''} 或者 {noSearchDataText: ''}

爱丽丝没有仙境

列表的列顺序能否自定义方案

yonyouhmm

BIP45551 · 2023-4-27 08:05列表的列顺序能否自定义方案

支持用户级的配置  列表右上角的  三道竖 里，设置的顺序是用户级的

BIP310443

通过addColumns添加表头，如何更改已有表头和新增表头顺序

yonyouhmm

BIP310443 · 2023-7-13 14:42通过addColumns添加表头，如何更改已有表头和新增表头顺序

更改已有表头  setColumnState  。你要调整和修改column，就观察gridModel里的column属性。修改里面的数据

BIP734344

有没有动态设置表头的Api呢

BIP734344

addColumns接收的参数结构是什么样的

BIP571303

大佬你好

如红框所示，对子表进行循环设置单元格禁用操作时，当数据量少的时候，代码执行无误，当数据量多时，整个页面会卡死
有没有其他方法能批量设置某些行单元格的禁用属性

yonyouhmm

BIP571303 · 2023-8-10 11:08大佬你好

如红框所示，对子表进行循环设置单元格禁用操作时，当数据量少的时候，代码执行无误，当数据量多时，整个页面会卡死

就是把现在的setCellState改成setCellStates 拼成数组 一次修改