如何在UI5表中实现过滤和排序(sap.m.Table)

时间:2016-10-06 13:19:08

标签: sapui5

我已经使用JSONModel实现了一个表。现在我想在工具栏中添加2个按钮进行排序和过滤。我怎样才能做到这一点?我已经在JS中创建了视图,因此赞赏JS中的代码帮助。

请查看下面提到的代码以供参考,请帮我实现排序和过滤按钮。

sap.ui.jsview("com.sap.view.View1", {

    /** Specifies the Controller belonging to this View. 
     * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
     * @memberOf controller.View1
     */
    getControllerName: function() {
        return "com.sap.controller.View1";
    },

    /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
     * Since the Controller is given to this method, its event handlers can be attached right away.
     * @memberOf controller.View1
     */
    createContent: function(oController) {

        var oColumn1 = new sap.m.Column({
        header: new sap.m.Label({text: "ID"})}
        );
        var oColumn2 = new sap.m.Column({
        header: new sap.m.Label({text: "First Name"})}
        );
        var oColumn3 = new sap.m.Column({
            header: new sap.m.Label({text: "Last Name"})}
        );
        var oColumn4 = new sap.m.Column({
        header: new sap.m.Label({text: "Email"})}
        );
        var oColumn5 = new sap.m.Column({
        header: new sap.m.Label({text: "City"})}
        );

        var oTable = new sap.m.Table("idTabel",{
                headerToolbar: new sap.m.Toolbar({
            content: [
            /*  new sap.m.Label({
                    text: "Sales Order List"
                }), new sap.m.ToolbarSpacer({}),*/

                new sap.m.Button("idPersonalizationButton", {
                    icon: "sap-icon://action-settings"
                }),
                    new sap.m.Button("idFSG", {
                    icon: "sap-icon://filter"
                })

            ]
        }),
            headerText: "Employee",
            columns:[oColumn1,oColumn2,oColumn3,oColumn4,oColumn5],
            mode: sap.m.ListMode.SingleSelectMaster,
            selectionChange:[oController.onSelect, oController]

        });


        var oTemp = new sap.m.ColumnListItem({
            cells: [new sap.m.Text({text: "{id}"}),
                   new sap.m.Text({text: "{first_name}"}),
                   new sap.m.Text({text: "{last_name}"}),
                   new sap.m.Text({text: "{email}"}),
                   new sap.m.Text({text: "{city}"})]


        });

        oTable.bindItems({
            path: "/details",
            template: oTemp
        });

       // oTable.setModel(oModel);

        return new sap.m.Page({
        title: "Simple Table",
        content: [oTable
        ]
    });
    }

});

1 个答案:

答案 0 :(得分:0)

我有同样的问题。 我的结论是:

  

如果你想使用sap.m.Table,唯一的办法就是设置属性useTablePersonalisation:" true"   或者你使用sap.ui.Table,它更容易操作,但它很丑陋和旧。

相关问题