在Sap ui5表列中自定义排序

时间:2015-08-13 10:12:19

标签: javascript sapui5


     我尝试在openui5表格列中创建自定义排序选项(我知道sap有一个排序和过滤属性,但我不想使用它,因为我已经自定义了表格列(为过滤列添加了文本框)如果我使用默认排序属性,我的自定义过滤器将无法工作)。所以我采取了以下方法。

现在问题是,如果我选择自定义列文本框,则排序下拉菜单正在打开。如果双击该列文本框,我可以筛选列值。我的要求是,如果用户点击一列,它必须按升序或降序排序。当用户点击列时,我不想显示将升序或降序排序为列表值的选项。默认用户第一次单击列时应按升序排序,以便第二次点击降序,如切换。我已添加下面的代码段供您参考。

createContent: function(oController) {

    jQuery.sap.require("sap.ui.core.util.Export");
    jQuery.sap.require("sap.ui.core.util.ExportTypeCSV");
    var oExportlink = new sap.ui.commons.Link({
        text: "Export",
        press: function() {
            //  Export();
            var exp = oTable.exportData({
                exportType: new sap.ui.core.util.ExportTypeCSV()
            }).saveFile('sample').always(function() {
                this.destroy();
            });
        }
    }).placeAt("content");

    var oTable = new sap.ui.table.Table("trans1", {

        visibleRowCount: 11,
        //  firstVisibleRow: 3,
        selectionMode: sap.ui.table.SelectionMode.None,
        navigationMode: sap.ui.table.NavigationMode.Paginator,
        //fixedColumnCount: 2            
    });


    //Define Columns to table
    oTable.addColumn(new sap.ui.table.Column({
        label: new sap.ui.commons.CheckBox().attachChange(function(oEvent) {
            selectedAllRows('checked');
            deSelectAllRows('unchecked');

        }),
        template: new sap.ui.commons.CheckBox({
            checked: '{checked}'
        }).attachChange(
            function(oEvent) {
                var selectedrowIndx = this.getParent().getIndex();
                oTable.setSelectedIndex(selectedrowIndx);
            }
        ),

        width: "30px"
    }));


    oTable.addColumn(new sap.ui.table.Column({
        label: new sap.ui.commons.Label({
            text: "View Transaction Details"
        }),
        template: new sap.ui.commons.Link({
            tooltip: "this is test",
            text: "Details",
            press: function() {
                alert("view details");
            }
        }),
        sortProperty: "details",
        width: "50px"
    }));
    var oColumn = new sap.ui.table.Column("idnum", {
        //  label:new sap.ui.commons.Label({text:"ID"}),
        label: new customcontrol.columnTextfield({
            text: "ID",
            id: "idnumber"
        }),
        template: new sap.ui.commons.TextView().bindProperty("text", "ID"),
        sortProperty: "ID",
        width: "50px"
    });
    oTable.addColumn(oColumn);
    addColumnSorterAndFilter(oColumn);
    var oColumn = new sap.ui.table.Column("product_name", {
        //  label:new sap.ui.commons.Label({text:"Product Name"}),
        label: new customcontrol.columnTextfield({
            text: "Product Name",
            id: "Name"
        }),
        template: new sap.ui.commons.TextView().bindProperty("text", "Name"),
        sortProperty: "Name",
        width: "50px"
    });
    oTable.addColumn(oColumn);
    addColumnSorterAndFilter(oColumn);

    var oColumn = new sap.ui.table.Column("prod_description", {
        //  label:new sap.ui.commons.Label({text:"Description"}),
        label: new customcontrol.columnTextfield({
            text: "description",
            id: "Description"
        }),
        template: new sap.ui.commons.TextView().bindProperty("text", "Descri"),
        sortProperty: "Description",
        width: "50px"
    });
    oTable.addColumn(oColumn);
    addColumnSorterAndFilter(oColumn);
    //Create Model for and bind into table

    var oTableModel = new sap.ui.model.json.JSONModel();
    jQuery.ajax({
        url: serviceurl,
        dataType: "json",
        success: function(data, textStatus, jqXHR) {

            oTableModel.setData({
                data: data.value
            });

        },
        error: function(jqXHR, textStatus, errorThrown) {

        }
    });

    oTable.setModel(oTableModel);
    oTableModel.getData();

    oTable.bindRows("/data");
    oTable.placeAt('content');


    /*Function for selecting all rows start here*/
    function selectedAllRows(checkKey) {

        var model = oTable.getModel();
        var rowpath = oTable.getBindingInfo('rows').path;
        var rows = model.getProperty(rowpath);
        var start = oTable.getFirstVisibleRow();
        var end = Math.min(start + oTable.getVisibleRowCount(), rows.length);

        for (var i = 0; i < rows.length; i++) {
            var row = rows[i];
            row[checkKey] = (i >= start && i < end);
        }
        oTable.invalidate();

    }
    /*Function for selecting all rows ending here*/

    /*Function for custom sorting with menu starting here*/
    function addColumnSorterAndFilter(oColumn) {
        var oTable = oColumn.getParent();
        var oCustomMenu = new sap.ui.commons.Menu();

        oCustomMenu.addItem(new sap.ui.commons.MenuItem({
            text: 'sort ascending',
            icon: "sap-icon://sort-ascending",
            select: function() {
                var oSorter = new sap.ui.model.Sorter(oColumn.getSortProperty(), false);
                oTable.getBinding("rows").sort(oSorter);
                for (var i = 0; i < oTable.getColumns().length; i++)
                    oTable.getColumns()[i].setSorted(false);
                oColumn.setSorted(true);
                oColumn.setSortOrder(sap.ui.table.SortOrder.Ascending);
            }
        }));
        oCustomMenu.addItem(new sap.ui.commons.MenuItem({
            text: 'sort desc',
            icon: "sap-icon://sort-descending",
            select: function(oControlEvent) {
                var oSorter = new sap.ui.model.Sorter(oColumn.getSortProperty(), true);
                oTable.getBinding("rows").sort(oSorter);
                for (var i = 0; i < oTable.getColumns().length; i++)
                    oTable.getColumns()[i].setSorted(false);
                oColumn.setSorted(true);
                oColumn.setSortOrder(sap.ui.table.SortOrder.Descending);

            }

        }));
        oColumn.setMenu(oCustomMenu);
        return oColumn;

    }
    /*Function for custom sorting with menu ending here*/

columnTextfield.js

sap.ui.core.Control.extend("customcontrol.columnTextfield", {
metadata: {
    properties: {
        "text": "string",
        "id": "string"

    },

    events: {
        "select": {}
    }
},

init: function() {

},
renderer: {
    render: function(oRm, oControl) {
        oRm.write('<div style="width:100%";>');
        oRm.write('<span class="custom_Filter_Column">');
        oRm.writeEscaped(oControl.getText());
        oRm.write('</span>');
        oRm.write('<br>');
        oRm.write('<input id="' + oControl.getId() + '" type="text" style="width:100%;">');
        //  oRm.write('<input id="txtFilter" type="text" style="width:100%;">');
        oRm.write('</div>');
    }
}

});

任何人都可以帮我这个吗?

0 个答案:

没有答案