Question

我无法将00和98的字符串值绑定到false和true。我找到了很多可能的解决方案，但它们都不适合我，我不太明白为什么。

假设我从服务器接收数据并创建JSON模型并将其设置为表模型。

function createTableColumns(columns) {
        var oTable = sap.ui.getCore().byId("mainTable");

        var statusTemplate = new sap.ui.commons.CheckBox({
            editable: false,
            // THIS WAS MY FIRST ATTEMPT TO GET IT WORKING
            //checked: {
            //    path: "{TableModel>status}",
            //    formatter: function(val) {
            //        console.log(val);
            //        return val === "98";
            //    }
            //}
        });

        // SECOND ATTEMPTS, DOESN'T WORK EITHER
        statusTemplate.bindProperty("checked", "{TableModel>status}", function(val) { return val === "98"; });

        for(var i = 0; i < columns.length; i++) {
             oTable.addColumn(new sap.ui.table.Column({
                 label: new sap.ui.commons.Label({text: columns[i]}),
                 name: columns[i],
                 flexible: false,
                 autoResizable: true,
                 template: columns[i] === 'status' ? statusTemplate : new sap.ui.commons.TextView({text: "{TableModel>" + columns[i] + "}"}),
                 sortProperty: columns[i],
                 filterProperty: columns[i],
             }));
        }
    }

上述代码中的两种方式都不起作用。我不知道这是逻辑还是我使用的模型是错误的。每隔一个（TextView）列显示它绑定的数据...所以我相信绑定是正确的！？

我也尝试过这种方式，但对我来说根本不起作用：OpenUI5 binding property with a function, instead of direct access 我继续收到“00”不是复选框的有效值的错误。

我做错了什么吗？

编辑：当前状态

每次用户切换时，基本上都会调用此函数应用程序中的表。旧数据（行和列）将是删除并填写新内容。参数列包含一个数组列名字符串！数据模型中还没有数据!!!

function createTableColumns(columns) {
    var oTable = sap.ui.getCore().byId("mainTable");

    oTable.destroyColumns();
    sap.ui.getCore().setModel(null, "TableModel");

    var statusCheckBoxTemplate = new sap.ui.commons.CheckBox({
        text: "{TableModel>status}",
        editable: false,
        checked: {
            path: "{TableModel>status}",
            formatter: function(v) {
                console.debug(v);
                if(v === "98") return true;
                else return false;
            }
        }
    });

    for(var i = 0; i < columns.length; i++) {
        if(columns[i] !== 'rowid') {
            oTable.addColumn(new sap.ui.table.Column({
                label: new sap.ui.commons.Label({text: columns[i]}),
                name: columns[i],
                flexible: false,
                autoResizable: true,
                template: columns[i] === 'status' ? statusCheckBoxTemplate : new sap.ui.commons.TextView({text: "{TableModel>" + columns[i] + "}"}),
                sortProperty: columns[i],
                filterProperty: columns[i],
            }));
        }
    }
}

用户选择要显示的表后，只能显示列。数据作为JSON对象从服务器（ajax调用）获取，并创建数据模型。一切正常。数据绑定没有问题并正确显示。

function tableBtnReloadPressed() {
    // ajax call
    var tabledata = readTableData(ACTIVE_TABLE);
    var oModel = new sap.ui.model.json.JSONModel();
    oModel.setData(tabledata);
    sap.ui.getCore().setModel(oModel, "TableModel");
    var oTable = sap.ui.getCore().byId("mainTable");
    oTable.setModel(oModel);
    oTable.bindRows("TableModel>/");
}

编辑：第三次尝试使用工厂

function createTableColumns(columns) {
    var oTable = sap.ui.getCore().byId("mainTable");

    oTable.destroyColumns();
    sap.ui.getCore().setModel(null, "TableModel");

    sap.ui.model.SimpleType.extend("BooleanStringType", {
        formatValue: function(s) {
            console.debug(typeof s, s);
            return s === "98";
        },
        parseValue: function(s) {
            console.debug(typeof s, s)
            return s ? "98" : "00";
        },
        validateValue: function(s) {
            console.debug(typeof s, s)
        }
    });

    var statusCheckBoxTemplate = new sap.ui.commons.CheckBox({
        text: "{TableModel>status}",
        editable: false,
        //checked: {
        //    path: "{TableModel>status}",
        //    formatter: function(v) {
        //        console.debug(v);
        //        if(v === "98") return true;
        //        else return false;
        //    }
        //}
    });

    statusCheckBoxTemplate.bindProperty("checked", {
        path: "{TableModel>status}",
        type: new BooleanStringType()
    });

    for(var i = 0; i < columns.length; i++) {
        if(columns[i] !== 'rowid') {
            oTable.addColumn(new sap.ui.table.Column({
                label: new sap.ui.commons.Label({text: columns[i]}),
                name: columns[i],
                flexible: false,
                autoResizable: true,
                template: columns[i] === 'status' ? statusCheckBoxTemplate : new sap.ui.commons.TextView({text: "{TableModel>" + columns[i] + "}"}),
                sortProperty: columns[i],
                filterProperty: columns[i],
            }));
        }
    }
}

Answer 1

您应该简化以使其正常工作。首先是使用textview / label检查绑定是否正常。只有这样才能切换到复选框并使用格式化程序/自定义数据类型进行转换。例如，这是无效的（来自上面的代码）：

checked: {
  path: "{TableModel>status}",

因为当您传递显式路径属性时，不应在字符串中使用{}。

Answer 2

好的，我把它放到了jsbin中，并且稍微播放了一下。 jsbin with solution

复选框的正确模板是：

var statusCheckBoxTemplate = new sap.ui.commons.CheckBox({
        text: "{TableModel>status}",
        editable: false,
        checked: {
            path: "TableModel>status",
            formatter: function(v) {
                return(v === "98");
            }
        }
    });

编辑：@jumpifzero打败了我。但我想编辑我的帖子以获得完整的图片。这么容易错过答案。 ^^“

将非布尔值绑定到表

2 个答案: