主题定制系列——自定义表格的列宽模式

栏目:云苍穹知识作者:金蝶来源:金蝶云社区发布:2024-09-23浏览:3

主题定制系列——自定义表格的列宽模式

## 变更记录 |产品版本|更新内容|更新日期| |-|-|-| |V6.0.001|主题定制所属的路径从配置工具变更为基础服务云下个性设置的主题定制|2023-10-24| ![image.webp](/download/0100d17fbe1f0eb646d19b1de9a598abbc56.webp) 业务开发小白又发来了一张图:老师老师,为什么我的表格看起来这么空?每个字段都要手动拖拽调整,好辛苦! 平台的列表专家说话了:别着急,表格列宽自适应了解一下?轻松配置,全局应用,解放双手不是梦! ## 用户场景 目前苍穹系统中,列表显示字段个数比较多,而有大部分的用户的分辨率宽度在1500以下,减去左侧导航栏、间距、勾选框、序号、操作列等宽度,所剩宽度不多,用户在查看信息时,还需要手动配置和拖拽表头调整字段的显示宽度, 这就导致了字段之间间距不规律、数据不紧凑、横向滚动条过长、数据查看不直观等问题。 为了解决上述问题,苍穹推出了列宽自适应功能~ ![image.webp](/download/0100a11d82ab1aae4de79bb9a267d16cd113.webp) ## 如何配置 使用前,推荐先阅读[《主题定制》](https://vip.kingdee.com/article/90752877873775360) 1. 页面入口:应用-配置工具-主题定制 ![image.webp](/download/0100d4a12b208f3a499a8bf756ff227e971b.webp) 2. 可以新增主题或者在已有的主题基础上修改 ![image.webp](/download/0100427905088f7b4e8382f8e470254367f6.webp) 列宽自适应,一共有3种方案: 1)`adaptive` 默认模式-自适应居左显示 该方案在没有配置信息时生效 * 列宽按照实际业务数据长度,自动计算宽度显示 * 字段之间固定最小间距,列宽限制默认的最大宽度,内容超长时省略号显示。 * 查看状态拖拽表头修改最大宽度限制,编辑状态拖拽表头修改编辑时显示的固定宽度 * 当列表数据发生变化时(筛选、翻页、搜索、刷新等),列宽将根据实际内容自动计算刷新 ![image.webp](/download/0100367f824f0f7940c592d3518890523e5c.webp) 具体效果如下: ![image.webp](/download/0100331d5c040d1c4ca18b007b941234f245.webp) 2) `fit` 自适应等分间距 在`adaptive`模式的基础上,列表、报表和整表锁定的单据体自适应后,如果表格还有剩余宽度,则把剩余宽度平均分配给每列,达到所有列充满表格的效果。 ![image.webp](/download/010050ab3d2d340645639cc193ce6e3fede2.webp) 配置如下: ![image.webp](/download/01003e353d77f3d548a6974995c69fdd88fc.webp) JSON串如下: ```js { "defaultProps": { "common": { "grid": { "columnResizeMode": "fit" } }, "listGrid": { "columnResizeMode": "fit" }, "entryGrid": { "columnResizeMode": "fit" }, "reportGrid": { "columnResizeMode": "fit" } } } ``` 具体效果如下: ![image.webp](/download/01002ef14e453f6d48d8bca4ff843347babe.webp) 3) `preset` 旧模式(体验较差,不推荐使用) 固定列宽,按用户设置的(或者个性化的)列宽渲染 配置信息如下: ![image.webp](/download/01002a0a0688fa80433fa074be4dc42c82ca.webp) JSON串如下: ```js { "defaultProps": { "common": { "grid": { "columnResizeMode": "preset" } }, "listGrid": { "columnResizeMode": "preset" }, "entryGrid": { "columnResizeMode": "preset" }, "reportGrid": { "columnResizeMode": "preset" } } } ``` 具体效果如下: ![image.webp](/download/0100ad623ed7adb8430ea4349e647798c54c.webp) 注意: * IE浏览器因兼容问题暂不支持`adaptive`、`fit`模式 * 该属性主题提供了4层级别配置 `表格`(grid) `列表` (listGrid) `单据体`(entryGrid) `报表`(reportGrid) 。 如果`列表` `单据体` `报表`无特殊配置,`表格` 层级的配置会在4个层级都生效 * `列表` `单据体` `报表` 分别影响对应的控件,会覆盖`表格` 层级的配置 * 默认的自适应列宽模式下,列表、报表自适应后会存储该宽度,所以打开过的页面,用户再切换成旧模式,其宽度也会保持之前自适应后的宽度,**用户可以通过拖拽列的宽度达到自己的预想宽度** 3.最后保存,在个人配置界面切换刚刚配置好的主题,表格列宽自适应模式就会全局生效了。 ![image.webp](/download/0100bb980c18b87549009849cb404a2a9f56.webp) 今天的内容到这里就结束了,快尝试配置看看吧~

主题定制系列——自定义表格的列宽模式

## 变更记录|产品版本|更新内容|更新日期||-|-|-||V6.0.001|主题定制所属的路径从配置工具变更为基础服务云下个性设置的主题定制|2023-10-...
点击下载文档
确认删除?
回到顶部
客服QQ
  • 客服QQ点击这里给我发消息