Sapui5 CustomTreeItem如何将项目添加到树结构中

时间:2019-05-03 14:34:14

标签: javascript sapui5

我在CustomTreeItem中遇到问题。我无法成功显示JSON中的树结构。但是我面临在单击“添加按钮”时手动添加数据的问题。

enter image description here

如果我按下 + 按钮时看到上面的图像,则需要在下面添加一个图块。但是我无法添加,也无法在控制台中看到任何错误。 下面是我的代码...

XML ====`

<Tree items="{selModel>/}" id="Tree" class="sapUiTinyMarginTop tilesClass selTree">
                                    <CustomTreeItem id="treeItem" detailPress="pressCustomTreeItem">
                                        <VBox class="customSelTile" id="customSelTile">
                                            <HBox>
                                                <VBox class="sapUiTinyMarginTop customTxts">
                                                    <Label class="sapUiSmallMarginBegin headTxtFont" text="{selModel>text}"/>
                                                    <Label class="sapUiSmallMarginBegin subHeadTxtFont" text="{selModel>subheader}"/>
                                                </VBox>
                                                <Button class="sapUiSmallMarginBegin sapUiTinyMarginTop" press="addTile" icon="sap-icon://add"/>
                                                <Button class="sapUiTinyMarginBegin sapUiTinyMarginTop" press="removeTile" icon="sap-icon://less"/>
                                            </HBox>
                                        </VBox>
                                    </CustomTreeItem>
                                </Tree>

`

控制器::

var selOrgJson = [{
            "text": "Department",
            "subheader": "Production Management JP",
            "personName":"Kuwahara Atushi",
            "nodes": [{
                "text": "Department",
                "subheader": "Production JP",
                "personName":"Kawasaki Takeshi"
            }, {
                "text": "Department",
                "subheader": "Planning Scheduling JP",
                "personName":"Fukuyama Sumire",
                "nodes": [{
                    "text": "Department",
                    "subheader": "Planning Operations",
                    "personName":"Sakata Junko"
                }]
            }, {
                "text": "Department",
                "subheader": "Sales Office, North East Japan",
                "personName":"Emoto Hloronori"
            }, {
                "text": "Department",
                "subheader": "Sales Office, South East Japan",
                "personName":"Suzuki Aya"
            }, {
                "text": "Department",
                "subheader": "Partner Sales JP",
                "personName":"Kuwahara Atushi"
            }]
        }];

        var selModel = new sap.ui.model.json.JSONModel();
        selModel.setData(selOrgJson);
        this.getView().setModel(selModel, "selModel");

addTile: function (oEvt) {
        var vBox = new sap.m.VBox();
        vBox.addStyleClass("customSelTile");
        var hBox = new sap.m.HBox();
        var insideVBox = new sap.m.VBox();
        insideVBox.addStyleClass("sapUiTinyMarginTop customTxts");
        var headInput = new sap.m.Input({
            type: "Text"
        });
        var subInput = new sap.m.Input({
            type: "Text"
        });
        insideVBox.addItem(headInput);
        insideVBox.addItem(subInput);
        hBox.addItem(insideVBox);
        vBox.addItem(hBox);
        var button1 = new sap.m.Button({
            press: this.addTile,
            icon: "sap-icon://add"
        });
        var button2 = new sap.m.Button({
            press: this.removeTile,
            icon: "sap-icon://less"
        });
        hBox.addItem(button1);
        hBox.addItem(button2);
        vBox.addItem(hBox);

    },

请帮助我如何在单击“添加”按钮到 CustomTreeItem 上添加图块。如果我的上述方法在控制器方面是错误的,那么请帮助我提供一些替代解决方案。

先谢谢您。

1 个答案:

答案 0 :(得分:0)

使用下面的代码解决了该问题。

addTile: function (oEvt) {

        var _oItem = oEvt.getSource().getParent().getParent().getParent();
        var _sBindingPath = _oItem.getBindingContextPath();
        var _oModel = this.getView().getModel("selModel");
        var aData = _oModel.getProperty(_sBindingPath);
        var _oChildNodes = [];
        if (aData.nodes !== undefined) {
            _oChildNodes = aData.nodes;
        } else {
            aData.nodes = _oChildNodes;
        }

        var newData = {
            "text": "",
            "subheader": ""
       }

谢谢