可见设置问题 - 布局为 SAP UI5 table 中的列之一，带有文本字段和组合框

Question

我有下面的xml是树结构

<?xml version="1.0" encoding="UTF-8"?>
<Rowsets>
    <Rowset>
        <Row NAME="PH1A" NODE_TYPE="PLANT" DDLSTENABLE="---" ISKPI="false" MNLCNFDDLSTID="NA">
            <Row NAME="LINE1" NODE_TYPE="LINE" DDLSTENABLE="true" ISKPI="true" MNLCNFDDLSTID="1"/>
            <Row NAME="LINE2" NODE_TYPE="LINE" DDLSTENABLE="false" ISKPI="true"MNLCNFDDLSTID="2"/>
        </Row>
        <Row NAME="PN2A" NODE_TYPE="PLANT" DDLSTENABLE="---" ISKPI="false" MNLCNFDDLSTID="NA">
            <Row NAME="UNIT1" NODE_TYPE="LINE" DDLSTENABLE="false" ISKPI="true" MNLCNFDDLSTID="2"/>
        </Row>
        <Row NAME="PN3A" NODE_TYPE="PLANT" DDLSTENABLE="--" ISKPI="false" MNLCNFDDLSTID="NA">
            <Row NAME="UNIT6" NODE_TYPE="LINE" ISKPI="true" MNLCNFDDLSTID="1"/>
        </Row>
    </Rowset>
    <DDLSTS>
        <LST1>
            <Rowset>
                <Row>
                    <MNLCNFDDITMID>1</MNLCNFDDITMID>
                    <MNLCNFDDITMRNK>11</MNLCNFDDITMRNK>
                </Row>
                <Row>
                    <MNLCNFDDITMID>2</MNLCNFDDITMID>
                    <MNLCNFDDITMRNK>12</MNLCNFDDITMRNK>
                </Row>
            </Rowset>
        </LST1>
        <LST2>
            <Rowset>
            <Row>
                    <MNLCNFDDITMID>1</MNLCNFDDITMID>
                    <MNLCNFDDITMRNK>21</MNLCNFDDITMRNK>
                </Row>
                <Row>
                    <MNLCNFDDITMID>2</MNLCNFDDITMID>
                    <MNLCNFDDITMRNK>22</MNLCNFDDITMRNK>
                </Row>
            </Rowset>
        </LST2>
    </DDLSTS>
</Rowsets>

我有以下 sapui5 页面

    <!DOCTYPE html>
<HTML>
  <HEAD>
    <meta http-equiv='X-UA-Compatible' content='IE=edge' />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <script id="sap-ui-bootstrap"
      src="/sapui5/resources/sap-ui-core.js"
      data-sap-ui-theme="sap_goldreflection"
      data-sap-ui-libs="sap.ui.commons,sap.ui.core,sap.ui.ux3,sap.ui.table,sap.m"
      data-sap-ui-compatVersion="edge">
    </script>
<script>
var oMdlAprvlData;

$(document).ready(function (){
    debugger;
  fnLdAprvData();
 });

function fnLdAprvData() {
    $.ajax({
        type: "POST",
        async: true,
        url: "/XMII/Runner",
        dataType: "xml",
        data: {
            "Transaction": "sandbox/MJain/TRX_GETTREE",
            "OutputParameter": "OUTXML",
            "Content-Type": "text/xml"
        },
        success: function (xmlData) {
            oMdlAprvlData = new sap.ui.model.xml.XMLModel(xmlData);
            oTableDataEntry.setModel(oMdlAprvlData);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            sap.ui.commons.MessageBox.show(errorThrown, sap.ui.commons.MessageBox.Icon.ERROR, "Error Message");
        },
        complete: function () {}
    });
}

var oDynamicTFValue = new sap.ui.commons.TextField({
    visible:{
        path: "@DDLSTENABLE",
        type: new sap.ui.model.type.String(),
        formatter : function(DDLSTENABLE) { return !DDLSTENABLE; }
    }
});

var oDynamicCBValue = new sap.ui.commons.ComboBox({
    visible:{
        path: "@DDLSTENABLE",
        type: new sap.ui.model.type.String()
    },
    items: {
        path: "/DDLSTS/0/LST1/0/Rowset/0/Row",
        template: new sap.ui.core.ListItem({
            key: "{MNLCNFDDITMID}",
            text: "{MNLCNFDDITMRNK}"
        })
     }
});
var oDynamicLayoutValue = new sap.ui.layout.HorizontalLayout("layout1",{content: [oDynamicTFValue, oDynamicCBValue ]});

var oTableDataEntry = new sap.ui.table.TreeTable({
    width: "100%",
    height: "100%",
    selectionMode: sap.ui.table.SelectionMode.Single,
    visibleRowCountMode: sap.ui.table.VisibleRowCountMode.Auto,
    selectionBehavior: sap.ui.table.SelectionBehavior.Row,
    expandFirstLevel: true,
    columns: [
        new sap.ui.table.Column({
            label: new sap.ui.commons.Label({
                text: "NAME"
            }),
            template: new sap.ui.commons.TextView({
                text: "{@NAME}"
            })
        }),
        new sap.ui.table.Column({
            label: new sap.ui.commons.Label({
                text: "Value",
            }),
            template: oDynamicLayoutValue
        })
    ]
});
oTableDataEntry.bindRows("/Rowset");
oTableDataEntry.placeAt("content");
</script>
  </HEAD>
  <BODY >    <div id="content"></div>
    <input type="hidden" id="IllumLoginName" value="{IllumLoginName}"> </input>
    <input type="hidden" id="IllumLoginRoles" value="{IllumLoginRoles}"></input>
  </BODY>
</html>

我定义了一个树 table 并将名称作为列之一
我又定义了一个以布局为模板的列值。
此布局的内容为 oDynamicTFValue 和 oDynamicCBValue。
我正在显示基于 DDLSTENABLE 值的文本字段或组合框。
如果启用下拉菜单，我将显示 LST1 的值（xml 的一部分）

我的查询

如何在 ISKPI 为 false 的情况下将文本字段和组合框都设置为 false，并在 ISKPI 为 true 的情况下显示文本字段/组合框（基于 DDLSTENABLE）
基于 MNLCNFDDLSTID 值的动态下拉值 -->

如何根据 MNLCNFDDLSTID 值设置下拉值，例如

如果 MNLCNFDDLSTID = 1，则该单元格下拉列表应显示 LST1 中的值（即 - 11,12）

如果 MNLCNFDDLSTID = 2，则该单元格下拉列表应显示 LST2 中的值（即 - 21,22）

如何使用从下拉列表中选择的值更新文本字段值。（如果文本字段不可见且下拉菜单可见）

提前致谢。

Answer 1

首先为您的行集引入一个 jsonmodel 并通过绑定使用数据。然后您也可以将这些值用于：

您可以绑定可见属性，例如visible={ISKPI}（条件绑定参见 https://openui5.hana.ondemand.com/#docs/guide/c98d57347ba444c6945f596584d2db45.html）因此您需要激活复合绑定：

data-sap-ui-bindingSyntax="complex">

参见：https://openui5.hana.ondemand.com/#docs/guide/0c803921b1bf4b3a97a038fbd51ef542.html

使用表达式绑定
如果使用双向绑定，绑定完成后会自动更新。

Answer 2

我已将您的 XML 数据转换为 JSON（因为我更习惯使用 JSON 数据）。

以下是您的 JSON 格式的数据：

{
    "Rowsets": {
        "Rowset": {
            "Row": [{
                "Row": [{
                    "_NAME": "LINE1",
                    "_NODE_TYPE": "LINE",
                    "_DDLSTENABLE": "true",
                    "_ISKPI": "true",
                    "_MNLCNFDDLSTID": "1"
                }, {
                    "_NAME": "LINE2",
                    "_NODE_TYPE": "LINE",
                    "_DDLSTENABLE": "false",
                    "_ISKPI": "true",
                    "_MNLCNFDDLSTID": "2"
                }],
                "_NAME": "PH1A",
                "_NODE_TYPE": "PLANT",
                "_DDLSTENABLE": "---",
                "_ISKPI": "false",
                "_MNLCNFDDLSTID": "NA"
            }, {
                "Row": {
                    "_NAME": "UNIT1",
                    "_NODE_TYPE": "LINE",
                    "_DDLSTENABLE": "false",
                    "_ISKPI": "true",
                    "_MNLCNFDDLSTID": "2"
                },
                "_NAME": "PN2A",
                "_NODE_TYPE": "PLANT",
                "_DDLSTENABLE": "---",
                "_ISKPI": "false",
                "_MNLCNFDDLSTID": "NA"
            }, {
                "Row": {
                    "_NAME": "UNIT6",
                    "_NODE_TYPE": "LINE",
                    "_ISKPI": "true",
                    "_MNLCNFDDLSTID": "1"
                },
                "_NAME": "PN3A",
                "_NODE_TYPE": "PLANT",
                "_DDLSTENABLE": "--",
                "_ISKPI": "false",
                "_MNLCNFDDLSTID": "NA"
            }]
        },
        "DDLSTS": {
            "LST1": {
                "Rowset": {
                    "Row": [{
                        "MNLCNFDDITMID": "1",
                        "MNLCNFDDITMRNK": "11"
                    }, {
                        "MNLCNFDDITMID": "2",
                        "MNLCNFDDITMRNK": "12"
                    }]
                }
            },
            "LST2": {
                "Rowset": {
                    "Row": [{
                        "MNLCNFDDITMID": "1",
                        "MNLCNFDDITMRNK": "21"
                    }, {
                        "MNLCNFDDITMID": "2",
                        "MNLCNFDDITMRNK": "22"
                    }]
                }
            }
        }
    }
}

查询 1：如何在 ISKPI 为假的情况下将文本字段和组合框可见设置为假，并在 ISKPI 为真的情况下显示文本字段/组合框（基于 DDLSTENABLE）。

回答：从你的评论来看，你已经做到了。下面是代码。可见属性布局缺少绑定。

var oDynamicLayoutValue = new sap.ui.layout.HorizontalLayout("layout1",{
            content: [oDynamicTFValue, oDynamicCBValue ],
            visible:{
                path: "_ISKPI",
                type: new sap.ui.model.type.String()
            }
        });

查询 2： 基于 MNLCNFDDLSTID 值的动态下拉值。

答案： 为此，我们需要组合框项目的动态路径。我获取了每个水平布局实例的当前上下文。这样我就可以为水平布局的特定实例获取所需的 :_MNLCNFDDLSTID 值，然后根据“_MNLCNFDDLSTID”值创建动态路径。下面是代码：

oDynamicLayoutValue.addEventDelegate({
            onAfterRendering: function () {
                console.log('hey');

                var oCB = this.getContent()[1];
                if (oCB.getVisible()) {
                    if (!this.getBindingContext()) {
                        return;
                    }
                    var oContext = this.getBindingContext().getObject();
                    var path = '/Rowsets/DDLSTS/';
                    if (oContext._MNLCNFDDLSTID === '1') {
                        path = path + "LST1/Rowset/Row/"
                    } else {
                        path = path + "LST2/Rowset/Row/"
                    }

                    oCB.bindAggregation('items',{
                        path:path,
                        template:new sap.ui.core.ListItem({
                            key: "{MNLCNFDDITMID}",
                            text: "{MNLCNFDDITMRNK}"
                        })
                    })
                    console.log('path',path)
                }


            }
        },oDynamicLayoutValue);

如果您需要更多解释，请告诉我。

可见设置问题 - 布局为 SAP UI5 table 中的列之一，带有文本字段和组合框

visible setting issues - Layout as one of the column in SAP UI5 table with textfield and combobox

combobox

sapui5

treetable