如何自定義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 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