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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/541962.html

標籤：其他

上一篇：Angularjs——初識AngularJS

下一篇：element上傳圖片組件使用方法|圖片回顯|格式轉換base64