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

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

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

var colIndex = 0;
var treeTableRenderer = sap.ui.core.Renderer.extend(sap.ui.table.TableRenderer);

treeTableRenderer.renderTableCellControl = function(rm, oTable, oCell, bIsFirstColumn) {
    var oTargetCell = oCell.getParent().getCells()[colIndex];
    if (oTable.isTreeBinding("rows") &&
        oCell.getId() === oTargetCell.getId() && 
        !oTable.getUseGroupMode()) {
        rm.write("<span");
        rm.addClass("sapUiTableTreeIcon");
        rm.addClass("sapUiTableTreeIconLeaf");
        rm.writeClasses();
        rm.writeAttribute("tabindex", -1);
        rm.write("> </span>");
    }

    rm.renderControl(oCell);
};

var TreeTableControl = sap.ui.table.TreeTable.extend("myExtendedTreeTable", {
    metadata : {
        properties : {
            "treeViewColIndex": {
                "type": "int",
                "group": "Misc",
                "defaultValue": 0
            }
        }
    },
    renderer: treeTableRenderer,

    constructor: function() {
        sap.ui.table.TreeTable.prototype.constructor.call(this, arguments[0]);
        var _colIndex = parseInt(this.getTreeViewColIndex());
        if (_colIndex !== NaN && _colIndex >= 0 && _colIndex < this.getColumns().length) {
            colIndex = _colIndex;
        }
    }
});

　　上面的代码中，我们在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