Question

我现在正在测试this grid的功能，我现在正在查看this example。上周，我尝试了一些基本的数据加载，从我正在处理的MVC应用程序的控制器返回。它返回json，然后我将其提供给要显示的网格。我想要显示的数据存储在多个表中。目前，为了简单起见，我只从其中两个加载数据，因为我只测试网格的功能 - 它是否符合我们的需求。

到达网格（以js为单位）的数据看起来像这样：

{
    Cars: [
        {
            car_Number: '123',
            car_Color: 'red',
            car_Owner: Owner: {
                owner_ID: '234',
                owner_Name: 'John'
            },
            car_DateBought: '/Date(1450648800000)/'
        },
        {
            car_Number: '456',
            car_Color: 'yellow',
            car_Owner: Owner: {
                owner_ID: '345',
                owner_Name: 'Peter'
            },
            car_DateBought: '/Date(1450648800000)/'
        },
        {
            car_Number: '789',
            car_Color: 'green',
            car_Owner: Owner: {
                owner_ID: '567',
                owner_Name: 'Michael'
            },
            car_DateBought: '/Date(1450648800000)/'
        }
    ]
}

以下是我到目前为止所做的一些示例代码：

$.ajax({
    type: 'post',
    url: BASE_HREF + 'OpenUI5/GetAllCars',
    success: function (result) {
        var dataForGrid = result['rows'];
        debugger;

        var oModel = new sap.ui.model.json.JSONModel();
        oModel.setData(dataForGrid);

        var oTable = new sap.ui.table.Table({
            selectionMode: sap.ui.table.SelectionMode.Multi,
            selectionBehavior: sap.ui.table.SelectionBehavior.Row,
            visibleRowCountMode: sap.ui.table.VisibleRowCountMode.Auto,
            minAutoRowCount: 10,
            //visibleRowCount: 10,
            showNoData: false
        });

        // define the Table columns and the binding values
        oTable.addColumn(new sap.ui.table.Column({
            label: new sap.ui.commons.Label({
                text: "ID of car"
            }),
            template: new sap.ui.commons.TextView({ text: "{car_Number}" }),
            sortProperty: "car_Number", // https://sapui5.netweaver.ondemand.com/sdk/test-resources/sap/ui/table/demokit/Table.html#__2
            filterProperty: "car_Number"
        }));

        oTable.addColumn(new sap.ui.table.Column({
            label: new sap.ui.commons.Label({ text: "Color of car" }),
            template: new sap.ui.commons.TextView({ text: "{car_Color}" }),
            sortProperty: "car_Color",
            filterProperty: "car_Color"
        }));

        oTable.addColumn(new sap.ui.table.Column({
            label: new sap.ui.commons.Label({ text: "Car Owner ID" }),
            template: new sap.ui.commons.TextView({
            // does not work like this -> text: "{Owner.owner_ID}"
                text: {
                    path: 'Owner',
                    formatter: function (owner) {
                        return owner !== null ? owner['owner_ID'] : '';
                    }
                }
            }),
            sortProperty: "Owner.owner_ID", // these two don't work
            filterProperty: "Owner.owner_ID"
        }));

        oTable.addColumn(new sap.ui.table.Column({
            label: new sap.ui.commons.Label({ text: "Car Owner Name" }),
            template: new sap.ui.commons.TextView({
            // does not work like this -> text: "{Owner.owner_Name}"
                text: {
                    path: 'Owner',
                    formatter: function (owner) {
                        return owner !== null ? owner['Name'] : '';
                    }
                }
            }),
            sortProperty: "Owner.owner_Name", // these two don't work
            filterProperty: "Owner.owner_Name"
        }));

        var dateType = new sap.ui.model.type.Date({ // http://stackoverflow.com/questions/22765286/how-to-use-a-table-column-filter-with-formatted-columns
            pattern: "dd-MM-yyyy"
        });
        oTable.addColumn(new sap.ui.table.Column({
            label: new sap.ui.commons.Label({ text: "Date bought" }),
            template: new sap.ui.commons.TextView({
                text: {
                    path: 'car_DateBought',
                    formatter: dateFormatterBG
                }
            }),
            sortProperty: "car_DateBought",
            filterProperty: "car_DateBought",
            filterType: dateType
        }));

        oTable.setModel(oModel);
        oTable.bindRows("/");
        oTable.placeAt("testTable", "only");
    },
    error: function (xhr, status, errorThrown) {
        console.log("XHR:");
        console.log(xhr);
        console.log("Status:");
        console.log(status);
        console.log("ErrorThrown:");
        console.log(errorThrown);
    }
});

我的问题：

我无法按owner_ID或owner_Name对汽车列表进行排序或过滤。我该如何进行过滤和排序？是否应该以某种方式在格式化程序功能的帮助下完成，或者......？

我可以按car_DateBought排序，但我无法通过此字段过滤汽车。首先，我尝试设置filterType：dateType，然后我尝试将其设置为filterType：dateFormatterBG（事实证明，dateType与我自己的dateFormatterBG完全相同，顺便说一下。）

function dateFormatterBG(cellvalue, options, rowObject) {
    var formatedDate = '';
    if ((cellvalue != undefined)) {
        var date = new Date(parseInt(cellvalue.substr(6)));
        var month = '' + (date.getMonth() + 1);
        var day = '' + date.getDate();
        var year = date.getFullYear();

        if (month.length < 2) {
            month = '0' + month;
        }
        if (day.length < 2) {
            day = '0' + day;
        }

        formatedDate = [day, month, year].join('-');
    }

    return formatedDate;
}

无论如何，正如我所说，我尝试了两种方法，但它并没有奏效。当我点击第一个链接中的示例中的列标题时，我没有得到任何类型的日期选择器。我如何告诉OpenUI5，该列需要按日期过滤，并且当用户点击“过滤器”时，应该为用户提供日期选择器。下拉菜单底部的输入字段？当我尝试在过滤字段中写日期时，如＆＃39; 07-11-2016＆＃39; （它的格式化方式），我得到一个空表/网格。如果我尝试从json对象中的字段car_DateBought输入大数字，表中的所有可用行保持不变，当我在标题上单击时，下拉菜单底部的过滤字段将显示错误状态。 / p>

提前感谢您的帮助和建议！

修改这只是样本，虚拟数据。我尝试加载真实数据，我看到，在表中我有几行日期，今天（2016年11月7日，或者2016年11月7日，如果你愿意的话）。这就是为什么在尝试过滤后获得一张空桌子意味着它无法正常工作。

Answer 1

排序：在一个样本中我看到控制器中出现以下内容：

    onInit : function () {
        this._IDSorter = new sap.ui.model.Sorter("my_id", false);
    },
    ....

然后在视图中，标题列中定义了一个按钮

        <Column>
            <Label text="Project"/>
            <Button icon="sap-icon://sort" press="onSortID" />
        </Column>

然后再回到控制器中还有另一个功能：

    onSortID:  function(){
      this._IDSorter.bDescending = !this._IDSorter.bDescending;
      this.byId("table").getBinding("items").sort(this._IDSorter);
    },

我在onInit（）中定义了一个分类器，然后通过onSortId（）函数在列标题中的sort按钮的click事件中切换/反转它。 OpenUI5 API doc重新分拣机表示分拣机构造函数中有更多参数用于初始排序方向和排序功能。

遵循此模式，您需要对owner_ID或owner_Name进行排序，我假设您可以将分拣机设置为

this._OwnerIDSorter = new sap.ui.model.Sorter("car_Owner/owner_ID", false);
this._OwnerNameSorter = new sap.ui.model.Sorter("car_Owner/owner_Name", false);

如何按列过滤/排序OpenUI5 Grid，它嵌套在json中？

1 个答案: