table 单元格的动态内容类型

Question

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

我有一个包含图像数据 URL 的数据库字段有问题，或者 "Not Available" 如果没有图像存在。

问题在于，根据数据库字段值，table 的单元格应为 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,]
}));

我的 table 是空的 "No data"。

Answer 1

由于您只从 data.signature 中获取值一次，所以这将是您的模板将使用的值，无论它在您的模型中可能有什么值

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

（请原谅我使用 XML 语法作为视图，因为这是我的首选样式。但您可以轻松适应 JS 视图）:

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

// 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 对象中缺少数组。在我将上述对象添加到包含在另一个对象中的数组中后，数据出现在 table.

这里是working example。如果 signature 键的值是图像的数据 URL（或 link 到它），则显示图像。

table 单元格的动态内容类型

Dynamic content type of table cell

sapui5