如何自定义sapui5 TreeTable控件的可展开列

古德摸零

　　参考sapui5 TreeTable控件的示例，我们发现所有的可展开列（即所谓的hierarchical data column）默认都在第一列，而且API中并没有给出对应的属性或方法来重新指定可展开列在table中的位置。
　　我们可以编写一个自定义控件，使其继承sapui5的TreeTable控件，并修改其中的renderTableCellControl方法，从而实现该功能。下面给出了该自定义控件的代码：

1. 1 var colIndex = 0;
2. 2 var treeTableRenderer = sap.ui.core.Renderer.extend(sap.ui.table.TableRenderer);
3. 3
4. 4 treeTableRenderer.renderTableCellControl = function(rm, oTable, oCell, bIsFirstColumn) {
5. 5     var oTargetCell = oCell.getParent().getCells()[colIndex];
6. 6     if (oTable.isTreeBinding("rows") &&
7. 7         oCell.getId() === oTargetCell.getId() &&
8. 8         !oTable.getUseGroupMode()) {
9. 9         rm.write("<span");
10. 10         rm.addClass("sapUiTableTreeIcon");
11. 11         rm.addClass("sapUiTableTreeIconLeaf");
12. 12         rm.writeClasses();
13. 13         rm.writeAttribute("tabindex", -1);
14. 14         rm.write("> </span>");
15. 15     }
16. 16
17. 17     rm.renderControl(oCell);
18. 18 };
19. 19
20. 20 var TreeTableControl = sap.ui.table.TreeTable.extend("myExtendedTreeTable", {
21. 21     metadata : {
22. 22         properties : {
23. 23             "treeViewColIndex": {
24. 24                 "type": "int",
25. 25                 "group": "Misc",
26. 26                 "defaultValue": 0
27. 27             }
28. 28         }
29. 29     },
30. 30     renderer: treeTableRenderer,
31. 31
32. 32     constructor: function() {
33. 33         sap.ui.table.TreeTable.prototype.constructor.call(this, arguments[0]);
34. 34         var _colIndex = parseInt(this.getTreeViewColIndex());
35. 35         if (_colIndex !== NaN && _colIndex >= 0 && _colIndex < this.getColumns().length) {
36. 36             colIndex = _colIndex;
37. 37         }
38. 38     }
39. 39 });

复制代码

　　上面的代码中，我们在renderTableCellControl方法中根据colIndex变量的值来决定是否输出带有特定style class属性的span标记，该标记用来显示一个icon图标，当用户点击该图标时可以展开树的节点，再次点击时折叠树的节点。同时，由于没有一个直接的方法可以获取到TableCell所在的列的索引，所以这里我们间接通过判断两个Cell的id来决定当前所在的列是否就是目标列。

　　对于样式上的设定，我们可以在使用时指定一个style class，并通过css来进行局部样式的修正。

1. var oTreeTable = new TreeTableControl({
2.     columns: oColumns
3. }).addStyleClass("myTreeTableControl");

复制代码

　　下面是css的一个例子，对应TreeTable的第二列为可展开列。如果指定其它的列为可展开列，可修改css中nth-child中的数字。

1. .myTreeTableControl .sapUiTableCCnt table tr td:nth-child(1) div.sapUiTableCellInner {
2.     display: inline;
3.     align-items: center;
4. }
6. .myTreeTableControl .sapUiTableCCnt table tr td:nth-child(2) div.sapUiTableCellInner {
7.     display: flex;
8.     align-items: center;
9. }

复制代码

　　参考链接：
https://github.com/mitsuruog/openui5-odata-sample/blob/master/app/resources/sap/ui/table/TreeTableRenderer-dbg.js
https://answers.sap.com/questions/129553/how-to-disable-collapse-of-nodes-in-sap-ui5-tree-t.html
https://answers.sap.com/questions/10815678/problems-with-own-tablerenderer---scrollbar-not-ge.html
 

来源:https://www.cnblogs.com/jaxu/p/17049604.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！