如何自定义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();
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);
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 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
来源:https://www.cnblogs.com/jaxu/p/17049604.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]