Question

我从数据库中获取数据，从中创建模型并绑定到表。

我遇到一个包含图像dataURL的数据库字段或“如果没有图像则不可用”的问题。

问题是，根据数据库字段值，表的单元格应该是sap.m.Image或sap.m.Text。

我无法让它发挥作用。

以下是相关的代码部分：

var signatureData = {};
signatureData.item = "Signature";
signatureData.value = data.signature;

var oModelSignature = new sap.ui.model.json.JSONModel();
oModelSignature.setData(signatureData);
var oSignatureTable  = sap.ui.getCore().byId("reportDetailsSignature"); 
                oSignatureTable.setModel(oModelSignature);

var oSignature;
if(data.signature == "Not Available"){
    oSignature = new sap.m.Text({text: "{value}"});
}else{
    oSignature = new sap.m.Image({src: "{value}", width: "7%", height: "7%"});
}

oSignatureTable.bindItems("/", new sap.m.ColumnListItem({
    cells : [ new sap.m.Text({text: "{item}"}),
             oSignature,]
}));

我的表空了“没有数据”。

Answer 1

由于您只从data.signature获得一次价值，这将是您的模板将使用的值，无论它在您的模型中可能具有哪些值

更好的方法是使用HBox作为模板，同时使用Image和Text控件，并使用格式化程序（请参阅https://sapui5.hana.ondemand.com/sdk/#docs/guide/a2fe8e763014477e87990ff50657a0d0.html）切换其中任何一个的可见性。

（原谅我为视图使用XML语法，因为这是我的首选风格。但你可以轻松适应JS View）：

编辑：作为我自己的练习，我在下面创建了一个正在运行的代码片段。

// The UI5 controller
sap.ui.controller("view1.initial", {
    onInit : function(oEvent) {

        // a model with dummy data. Values are either empty or contain a URL
        var oModel = new sap.ui.model.json.JSONModel();
        oModel.setData({
            rows : [
                { value : "sap-icon://syringe",    col2 : "Value 2",  col3 : "Value 3",  ol4 : "Value 4" },
                { value : "",                      col2 : "Value 6",  col3 : "Value 7",  col4 : "Value 8" },
                { value : "sap-icon://account",    col2 : "Value 10", col3 : "Value 11", col4 : "Value 12" },
                { value : "sap-icon://chalkboard", col2 : "Value 14", col3 : "Value 15", col4 : "Value 16" },
                { value : "sap-icon://e-care",     col2 : "Value 18", col3 : "Value 19", col4 : "Value 20" },
                { value : "",                      col2 : "Value 22", col3 : "Value 23", col4 : "Value 24" }
            ]
        });

        this.getView().setModel(oModel);

    },

    // Formatter for icon visibility
    setIconVisible : function (sValue) {
        return !!sValue;
    },

    // Formatter for text visibility
    setTextVisible : function (sValue) {
        return !sValue;
    }

});

// Code needed to place XML view into 'uiArea' DIV element
sap.ui.xmlview("main", {
    viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");

<!-- bootstrapper -->
<script id="sap-ui-bootstrap"
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-xx-bindingSyntax="complex"
    data-sap-ui-libs="sap.m"></script>

<!-- here the magic will be shown -->
<div id="uiArea"></div>

<!-- The XMLView definition -->
<script id="view1" type="ui5/xmlview">
    <mvc:View 
      controllerName="view1.initial"
      xmlns="sap.m"
      xmlns:core="sap.ui.core"
      xmlns:mvc="sap.ui.core.mvc" >
        <Table id="tbl" inset="true" multiSelect="true"   selectionMode="MultiToggle" mode="MultiSelect"
        items="{/rows}">
            <columns>
                <Column>
                    <Text text="Col1" />
                </Column>
                <Column>
                    <Text text="Col2" />
                </Column>
                <Column>
                    <Text text="Col3" />
                </Column>
            </columns>
            <items>
                <ColumnListItem>
                    <cells>
                        <!-- Notice how the cell contains a HBox with an Icon and Text control -->
                        <!-- Visibility will be toggled using the formatter function for both -->
                        <HBox>
                            <core:Icon src="{value}" visible="{path:'value', formatter:'.setIconVisible'}" />
                            <Text text="No data"     visible="{path:'value', formatter:'.setTextVisible'}" />
                        </HBox>
                        <Text text="{col2}" />
                        <Text text="{col3}" />
                    </cells>
                </ColumnListItem>
            </items>
        </Table>
    </mvc:View>
</script>

Answer 2

我的代码中的问题是我的signatureData对象中没有数组。将上面的对象添加到另一个对象中包含的数组后，数据出现在表中。

这是working example。如果signature键的值是图像的数据URL（或其链接），则会显示图像。

表格单元格的动态内容类型

2 个答案: