找回密码
 立即注册

QQ登录

只需一步，快速开始

首页 › SpreadJS & GcExcel专区 › 产品动态 › 查看内容
发新帖

KevinChen 讲师达人认证 悬赏达人认证 SpreadJS 开发认证

论坛元老

195

主题

5459

帖子

9014

积分

论坛元老

积分
9014

讲师达人悬赏达人元老葡萄SpreadJS 认证SpreadJS 高级认证微信认证勋章

最新发帖

【SpreadJS v16.0 新特性预览】支持表格分层数据及树形展示

KevinChen 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于：2022-11-12 22:24  /   查看：2122  /  回复：0
SpreadJS V16 新增了对分层数据的支持，并且可以根据用户提供的分层数据自动生成对应的树形表格。


对分层数据的支持是在 SpreadJS 的 DataManager 中实现的，并通过集算表进行展示和交互。
相关信息请了解集算表相关特性：
https://demo.grapecity.com.cn/sp ... eet/overview/purejs

分层数据源类型：

1. 记录具有id和parentId的属性：

  2. <div>[
  3.   { id: 1, parentId: -1 },
  4.   { id: 2, parentId: -1 },
  5.   { id: 3, parentId:  1 },
  6.   { id: 4, parentId:  1 },
  7.   { id: 5, parentId:  2 }
  8. ]</div>
复制代码


2. 记录有属性表示层级，层级由记录的顺序确定，每条记录都可以有这个属性作为主键：


  2. <div>[
  3.   { name: 'USA', level: -1, id: 1 },
  4.   { name: 'Texas', level: 0, id: 2 },
  5.   { name: 'Houston', level: 1, id: 3 },
  6.   { name: 'California', level: 0, id: 4 },
  7.   { name: 'San Francisco', level: 1, id: 5 },
  8.   { name: 'Los Angeles', level: 1, id: 6 },
  9. ]</div>
复制代码


3. 记录有属性表示分层子级，记录一直是没有根记录的树数据，每个子级都可以有该属性作为主键：


  2. <div>[
  3.     {
  4.         name: 'USA',
  5.         children: [
  6.             {
  7.                 name: 'Texas',
  8.                 children: [
  9.                     {
  10.                         name: 'Houston',
  11.                     }
  12.                 ]
  13.             }
  14.         ]
  15.     }
  16. ]</div>
复制代码


4. 记录有主键，键可以通过自定义函数解析为层次结构：


  2. <div>[
  3.   { id: '1' },
  4.   { id: '2' },
  5.   { id: '1.1' },
  6.   { id: '1.1.1' },
  7.   { id: '2.1' }
  8. ]</div>
复制代码


分层数据源配置
1. 数据源选项可以配置分层选项：

  2. <div>interface GC.Data.IDataSourceOption {
  3.     //others options...
  4.     schema?: {
  5.         hierarchy: GC.Data.IHierarchyOption // define whether the data source is hierarchical
  6.         //others options...
  7.     }
  8. }
  9. interface GC.Data.IHierarchyOption {
  10.   type: 'Parent' | 'ChildrenPath' | 'Level' | 'Custom', // the hierarchy type
  11.   column: string // the hierarachy key that will help to build the hierarchical data
  12.   outlineColumn?: string | GC.Data.IHierarchyOutlineColumnOptions; // the options for self-defined outline
  13.   summaryFields: GC.Data.IHierarchySummaryFieldCollection // define the formulas for the fields
  14.   parse: (options: GC.Data.IHierarchyCustomParseOptions) => any; // parse the primary key of the custom hierarchy type to the parent key
  15.   unparse?: (options: GC.Data.IHierarchyCustomUnparseOptions) => any; // build the primary key of the custom hierarchy type
  16. }
  17. interface GC.Data.IHierarchySummaryFieldCollection {
  18.     [key: string]: string; // the key is the field name, and the value is the formula
  19. }
  20. interface GC.Data.IHierarchyCustomParseOptions {
  21.   data: any,
  22.   index: number,
  23. }
  24. interface GC.Data.IHierarchyCustomUnparseOptions {
  25.   data: any,
  26.   index: number,
  27.   parentData: any
  28. }
  29. interface GC.Data.IOutlineColumnOptions {
  30.     showCheckBox?: boolean;
  31.     showImage?: boolean;
  32.     images?: string[];
  33.     showIndicator?: boolean;
  34.     expandIndicator?: string;
  35.     collapseIndicator?: string;
  36. }
  37. interface GC.Data.IHierarchyOutlineColumnOptions {
  38.     value: string; // specify the column name that will be outline column
  39.     showCheckBox?: boolean;
  40.     showImage?: boolean;
  41.     images?: string[];
  42.     showIndicator?: boolean;
  43.     expandIndicator?: string;
  44.     collapseIndicator?: string;
  45. }
  46. interface GC.Data.IColumn {
  47.   //other options...
  48.   // the rowOrder in the dataType is used for the ordering the records, the value of the column should be a number,
  49.   // it's used by the data manager when moving or inserting
  50.   // it's better to hide the column for the end user
  51.   dataType?: "string" | "number" | "boolean" | "object" | "array" | "date" | "rowOrder";
  52.   outlineColumn?: boolean | GC.Data.IOutlineColumnOptions // indicates the column be an outline column or the outline column options, and there should be only one outline column in the columns
  53. }
  54. </div>
复制代码

  2. <div>var taskTable = dataManager.addTable("Tasks", {
  3.     remote: { ... },
  4.     schema: {
  5.         hierarchy: {
  6.           type: 'Parent',
  7.           column: 'TaskParentId',
  8.         },
  9.         columns: {
  10.           TaskName: {dataName: 'name' },
  11.           TaskId: { dataName: 'id', isPrimaryKey: true }, // using primary key to indicate the hierarchy id
  12.           TaskParentId: { dataName: 'parentId' },
  13.           TaskRowOrder: { dataName: 'rowOrder', dataType: "rowOrder" }, // optional property for inserting and moving up/down
  14.         }
  15.     }
  16. });

  18. var taskView = taskTable.addView('TaskView',[
  19.   {
  20.     value: 'TaskName', outlineColumn: true // this option indicates the column showing as outline column
  21.   }
  22. ]);
  23. </div>
复制代码

  2. <div>var taskTable = dataManager.addTable("Tasks", {
  3.     remote: { ... },
  4.     schema: {
  5.         hierarchy: {
  6.           type: 'Level',
  7.           column: 'TaskLevel',
  8.         },
  9.         columns: {
  10.           TaskName: {dataName: 'name' },
  11.           TaskId: { dataName: 'id', isPrimaryKey: true }, // using primary key to indicate the hierarchy id optionally if exist
  12.           TaskLevel: { dataName: 'level' },
  13.           TaskRowOrder: { dataName: 'rowOrder', dataType: "rowOrder" }, // optional property for inserting and moving up/down
  14.         }
  15.     }
  16. });

  18. var taskView = taskTable.addView('TaskView',[
  19.   {
  20.     value: 'TaskName', outlineColumn: true// this option indicates the column showing as outline column
  21.   }
  22. ]);
  23. </div>
复制代码

  2. <div>var taskTable = dataManager.addTable("Tasks", {
  3.     remote: { ... },
  4.     schema: {
  5.         hierarchy: {
  6.           type: 'ChildrenPath',
  7.           column: 'TaskChildren',
  8.         },
  9.         columns: {
  10.           TaskName: {dataName: 'name' },
  11.           TaskChildren: { dataName: 'children' },
  12.           // other columns in the child
  13.         }
  14.     }
  15. });
  16. var taskView = taskTable.addView('TaskView',[
  17.   {
  18.     value: 'TaskName', outlineColumn: true // this option indicates the column showing as outline column
  19.   }
  20. ]);
  21. </div>
复制代码

  2. <div>var taskTable = dataManager.addTable("Tasks", {
  3.     remote: { ... },
  4.     schema: {
  5.         hierarchy: {
  6.           type: 'Custom',
  7.           column: 'TaskId',
  8.           parse: function(options){
  9.             // parse the primary key "1.1.1" to "1.1"
  10.             // the returned value will be treated as parentId
  11.             let seg = options.data.TaskId.split('.');
  12.             return seg.slice(0,seg.length-1).join('.')
  13.           },
  14.           unparse: function(options){
  15.             let parentIds, currentIndex = options.index, parentData = options.parentData, parentKey = parentData && parentData.TaskId;
  16.             if (parentKey) {
  17.               let sp = parentKey.split('.');
  18.               parentIds = sp;
  19.             } else {
  20.               parentIds = [];
  21.             }
  22.             parentIds.push(currentIndex + 1);
  23.             return parentIds.join('.');
  24.           }
  25.         },
  26.         columns: {
  27.           TaskName: {dataName: 'name' },
  28.           TaskId: { dataName: 'id', isPrimaryKey: true }, // using primary key to indicate the hierarchy id optionally
  29.         }
  30.     }
  31. });
  32. var taskView = taskTable.addView('TaskView',[
  33.   {
  34.     value: 'TaskName', outlineColumn: true // this option indicates the column showing as outline column
  35.   }
  36. ]);
  37. </div>
复制代码



image.png664732970.png

2. 降级记录，将当前记录的 parentId 替换为其上面记录的 id，如果 withChildren 为 true，则当前记录的子级将降低：



  3. <div>    /**
  4.      * Demote the hierarchy data level of the specified row.
  5.      * @param {number} row - The row index.
  6.      * @param {boolean} withChildren - Optional, the children will be demoted with the record by default.
  7.      * @returns {void}
  8.      * @example
  9.      * //This example demote the hierarchy data level by specified index.
  10.      * tableSheet.demoteHierarchyLevel(8);
  11.      */
  12.      function demoteHierarchyLevel(row: number, withChildren?: boolean): void
  13. </div>
复制代码


image.png722710571.png

3. 上移一条记录：
当列的 dataType 为 rowOrder 且列的 value 类型为 number 时，记录可以上下移动。
在层次数据中，向上移动只能在同一父级下的记录之间移动，
当父记录移动时，子记录将移动。

  2. <div>    /**
  3.      * Move the hierarchy data by the specified row up.
  4.      * @param {number} row - The row index.
  5.      * @returns {void}
  6.      * @example
  7.      * //This example move the hierarchy data by specified index up.
  8.      * tableSheet.moveUp(8);
  9.      */
  10.      function moveUp(row: number): void</div>
复制代码

image.png770778503.png

4. 向下移动一个记录，它与向上移动相同：

    /**
     * Move the hierarchy data by the specified row down.
     * @param {number} row - The row index.
     * @returns {void}
     * @example
     * //This example move the hierarchy data by specified index down.
     * tableSheet.moveDown(8);
     */
     function moveDown(row: number): void

image.png408199462.png

5. 添加记录：
默认情况下，它将在选择位置之前插入一条记录，并且插入的记录应该是选择记录的兄弟。

image.png677301330.png

5.1 选中前添加记录：

  2. <div>    /**
  3.      * Add a new row data before the specified row.
  4.      * @param {number} row - The row index.
  5.      * @param {Object} rowData - The row data.
  6.      * @returns {void}
  7.      * @example
  8.      * //This example adds a new row data before the specified row.
  9.      * tableSheet.addHierarchyItemBefore(8, {id: 8, name: "grapecity"});
  10.      */
  11.      function addHierarchyItemBefore(row: number, rowData: any): void</div>
复制代码


5.2 选中后添加记录：



  3. <div>    /**
  4.      * Add a new row data after the specified row.
  5.      * @param {number} row - The row index.
  6.      * @param {Object} rowData - The row data.
  7.      * @returns {void}
  8.      * @example
  9.      * //This example adds a new row data after the specified row.
  10.      * tableSheet.addHierarchyItemAfter(8, {id: 8, name: "grapecity"});
  11.      */
  12.      function addHierarchyItemAfter(row: number, rowData: any): void</div>
复制代码


5.3 在选中的上面添加记录，添加的记录会替换选中记录的位置，选中的记录会是被添加记录的子：

  2. <div>    /**
  3.      * Add a new row data as the parent of the specified row.
  4.      * @param {number} row - The row index.
  5.      * @param {Object} rowData - The row data.
  6.      * @returns {void}
  7.      * @example
  8.      * //This example adds a new row data as the parent of the specified row.
  9.      * tableSheet.addHierarchyItemAbove(8, {id: 8, name: "grapecity"});
  10.      */
  11.      function addHierarchyItemAbove(row: number, rowData: any): void</div>
复制代码


5.4 在选中的下方添加记录，添加的记录将是选中记录的最后一个子记录：

  2. <div>    /**
  3.      * Add a new row data as the child of the specified row.
  4.      * @param {number} row - The row index.
  5.      * @param {Object} rowData - The row data.
  6.      * @returns {void}
  7.      * @example
  8.      * //This example adds a new row data as the child of the specified row.
  9.      * tableSheet.addHierarchyItemBelow(8, {id: 8, name: "grapecity"});
  10.      */
  11.      function addHierarchyItemBelow(row: number, rowData: any): void</div>
复制代码

6. 删除一条记录，它会删除子记录和它自己。
7. 展开所有级别：
单击列标题时将显示菜单项。

  2. <div>    /**
  3.      * Expand the all hierarchy levels.
  4.      * @returns {void}
  5.      * @example
  6.      * //This example expand the all hierarchy levels.
  7.      * tableSheet.expandAllHierarchyLevels();
  8.      */
  9.      function expandAllHierarchyLevels(): void
  10. </div>
复制代码


image.png320039672.png

8. 折叠所有级别：

  2. <div>    /**
  3.      * Collapse the all hierarchy levels.
  4.      * @returns {void}
  5.      * @example
  6.      * //This example collapse the all hierarchy levels.
  7.      * tableSheet.collapseAllHierarchyLevels();
  8.      */
  9.      function collapseAllHierarchyLevels(): void</div>
复制代码

image.png974017333.png

9. 将记录扩展到指定级别：

单击列标题时会显示菜单，最多支持9级菜单项。

  2. <div>    /**
  3.      * Expand the hierarchy data by specified level.
  4.      * @param {number} level - The level to expand.
  5.      * @returns {void}
  6.      * @example
  7.      * //This example expand the hierarchy data by specified level.
  8.      * tableSheet.expandHierarchyLevel(8);
  9.      */
  10.      function expandHierarchyLevel(level: number): void</div>
复制代码

image.png73657530.png

10. 切换菜单项的可见性：

提升、降级、上移/下移、前/后/上/下添加、展开/折叠级别的菜单项可以通过选项显示或隐藏：


  3. <div>interface GC.Spread.Sheets.TableSheet.ITableSheetOptions {
  4.   // other properties...
  5.   menuItemVisibility?: {
  6.         // the options below be on the row header
  7.         promoteMenuItemVisible?: boolean;
  8.         demoteMenuItemVisible?: boolean;
  9.         // the options below be on the row header
  10.         // and the menu items be enable for the dataType of the column be rowOrder
  11.         moveUpMenuItemVisible?: boolean;
  12.         moveDownMenuItemVisible?: boolean;
  13.         addBeforeMenuItemVisible?: boolean;
  14.         addAfterMenuItemVisible?: boolean;
  15.         addAboveMenuItemVisible?: boolean;
  16.         addBelowMenuItemVisible?: boolean;
  17.         // the options below be on the column header
  18.         expandAllLevelMenuItemVisible?: boolean;
  19.         collapseAllLevelMenuItemVisible?: boolean;
  20.         expandToLevelMenuItemVisible?: boolean;
  21.     };
  22. }

  24. tableSheet.options.menuItemVisibility = {
  25.         promoteMenuItemVisible: true,
  26.         demoteMenuItemVisible: true,
  27.         moveUpMenuItemVisible: true,
  28.         moveDownMenuItemVisible: true,
  29.         addBeforeMenuItemVisible: true,
  30.         addAfterMenuItemVisible: true,
  31.         addAboveMenuItemVisible: true,
  32.         addBelowMenuItemVisible: true,
  33.         expandAllLevelMenuItemVisible: true,
  34.         collapseAllLevelMenuItemVisible: true,
  35.         expandToLevelMenuItemVisible: true,
  36.     }</div>
复制代码


11. 对层次记录进行排序意味着按级别对记录的任何属性进行排序。

12. 过滤结果将显示父记录及其本身，如果记录有孩子，孩子也会显示。

13. 自定义轮廓列，带有outlineColumn选项的列将在表格中显示轮廓样式，并且只有一列是轮廓：

13.1 . 在架构中：



  3. <div>var taskTable = dataManager.addTable("Tasks", {
  4.     remote: { ... },
  5.     schema: {
  6.         hierarchy: {
  7.           type: 'Parent',
  8.           column: 'TaskParentId',
  9.           outlineColumn: {
  10.               value: 'TaskName', // specify the column name that will be outline column
  11.               showCheckBox: true
  12.             }
  13.         },
  14.         columns: {
  15.           TaskName: {dataName: 'name' },
  16.           TaskId: { dataName: 'id', isPrimaryKey: true }, // using primary key to indicate the hierarchy id
  17.           TaskParentId: { dataName: 'parentId' },
  18.           TaskRowOrder: { dataName: 'rowOrder', dataType: "rowOrder" }, // optional property for inserting and moving up/down
  19.         }
  20.     }
  21. });</div>
复制代码


13.2. 在视图列中，优先级更高：



  3. <div>var taskTable = dataManager.addTable("Tasks", {
  4.     remote: { ... },
  5.     schema: {
  6.         hierarchy: {
  7.           type: 'Parent',
  8.           column: 'TaskParentId',
  9.           outlineColumn: 'TaskName'
  10.         },
  11.         columns: {
  12.           TaskName: {dataName: 'name' },
  13.           TaskId: { dataName: 'id', isPrimaryKey: true }, // using primary key to indicate the hierarchy id
  14.           TaskParentId: { dataName: 'parentId' },
  15.           TaskRowOrder: { dataName: 'rowOrder', dataType: "rowOrder" }, // optional property for inserting and moving up/down
  16.         }
  17.     }
  18. });

  20. var taskView = taskTable.addView('TaskView',[
  21.   {
  22.     value: 'TaskName', outlineColumn: { showCheckBox: true } // this option indicates the column showing as outline column
  23.   }
  24. ]);</div>
复制代码


14. 该功能可能与层次结构发生冲突
14.1 . groupBy 不能处理层次结构数据；
14.2. 固定行不能与层次结构数据一起使用；
14.3 . 对于仅影响当前行数据的特征，resetRow 不能很好地处理层次数据，但一些用于层次特征的属性不会受到影响。

层次结构远程接口
在父层级类型中，远程接口和之前一样，
但如果它是级别或子路径层次结构类型，每个远程接口都会将整个记录发送到远程而不被删除，
因为它不能识别插入记录的父记录。

0 个回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
产品与服务
活字格低代码平台
Wyn 商业智能软件
SpreadJS纯前端表格控件
技术服务体系
技术博客
低代码技术
客户与案例
典型客户
成功案例
用户访谈
合作与生态
合作伙伴网络
葡萄城市场
葡萄城与国产化
活字格用友客开工具
品牌活动
葡萄城公开课
品牌战略发布会
赋能开发者高峰论坛
企业级低代码发展研讨会
企业级低代码应用大赛
表格技术研讨会
了解葡萄城
葡萄城简介
愿景使命
研发与创新
荣誉奖项
加入我们
联系方式
联系我们
400-657-6008

葡萄城社区二维码

关注“葡萄城社区”

赋能开发者

西安葡萄城软件有限公司
专业的软件开发技术和低代码平台提供商

陕ICP备2020018819号  |   陕公网安备：61019002000258  |   隐私政策  |   网站地图  

邮箱： info.xa@grapecity.com  |  © 2024 葡萄城软件，保留所有权利

Archiver| 手机版| 小黑屋|

返回顶部