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

  参考sapui5 TreeTable控件的示例,我们发现所有的可展开列(即所谓的hierarchical data column)默认都在第一列,而且API中并没有给出对应的属性或方法来重新指定可展开列在table中的位置。

  我们可以编写一个自定义控件,使其继承sapui5的TreeTable控件,并修改其中的renderTableCellControl方法,从而实现该功能。下面给出了该自定义控件的代码:

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

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

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

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

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

.myTreeTableControl .sapUiTableCCnt table tr:not(.sapUiTableRowHidden) td:nth-child(1) div.sapUiTableCellInner {
    display: inline;
    align-items: center;
}

.myTreeTableControl .sapUiTableCCnt table tr td:nth-child(2) div.sapUiTableCellInner {
    display: flex;
    align-items: center;
}

  参考链接:

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

 

posted @ 2023-01-13 14:55  Jaxu  阅读(154)  评论(0编辑  收藏  举报