sorting - SAPUI5 表 - 删除过滤器/分组/排序？

Question

我有一个简单的表格(类型sap.ui.table.Table)，允许用户对元素进行排序、过滤和分组。但是，一旦应用排序或分组就不可能删除吗？可以通过在过滤器中不输入任何值来删除过滤器，但如何删除排序/分组？

var oTableEmpl = new sap.ui.table.Table({
  width : "100%",
  visibleRowCount : 20,
  selectionMode : sap.ui.table.SelectionMode.Multi,
  navigationMode : sap.ui.table.NavigationMode.Scrollbar,
  editable : false,
  enableCellFilter : true,
  enableColumnReordering : true,
  enableGrouping : true,
  extension : oMatrixLayout,
});

 oTableEmpl.addColumn(new sap.ui.table.Column({
       label : new sap.ui.commons.Label({
             text : "Label",
             textAlign : sap.ui.core.TextAlign.Center
       }),
       template : new sap.ui.commons.TextView({
             text : "{Value}",
             textAlign : sap.ui.core.TextAlign.Center
       }),
       visible : false,
       sortProperty: "Value",
       filterProperty: "Value",
}));

这可能看起来很简单，但在表本身中没有删除任何内容的选项。它真的必须通过编程来删除吗？

Answer 1

是的，只有通过编码才能做到这一点。基本上，您需要清除 ListBinding 的排序器和过滤器，然后刷新 DataModel。对于分组，将Table和Column的分组重置为false，重置后将Table的分组设置回true。

//set group of table and column to false          
oTableEmpl.setEnableGrouping(false);
oTableEmpl.getColumns()[0].setGrouped(false);

var oListBinding = oTableEmpl.getBinding();
oListBinding.aSorters = null;
oListBinding.aFilters = null;
oTableEmpl.getModel().refresh(true);

//after reset, set the enableGrouping back to true
oTableEmpl.setEnableGrouping(true);

我还附上了一个工作代码片段。请检查一下。

<script id='sap-ui-bootstrap' type='text/javascript' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.table,sap.viz" data-sap-ui-theme="sap_bluecrystal"></script>

<script id="view1" type="sapui5/xmlview">
    <mvc:View xmlns:core="sap.ui.core" xmlns:layout="sap.ui.commons.layout" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.ui.commons" xmlns:table="sap.ui.table" controllerName="my.own.controller" xmlns:html="http://www.w3.org/1999/xhtml">
        <layout:VerticalLayout>
            <Button text="Reset" press="onPress" />
            <table:Table id="testTable" rows="{/}" enableGrouping="true">
                <table:Column sortProperty="abc" sorted="true" visible="true">
                    <table:label>
                        <Label text="abc"></Label>
                    </table:label>
                    <table:template>
                        <Label text="{abc}"></Label>
                    </table:template>
                </table:Column>
                <table:Column>
                    <table:label>
                        <Label text="abc2"></Label>
                    </table:label>
                    <table:template>
                        <Label text="{abc2}"></Label>
                    </table:template>
                </table:Column>
            </table:Table>
        </layout:VerticalLayout>
    </mvc:View>
</script>


<script>
    sap.ui.controller("my.own.controller", {
        onInit: function() {
            var aTableData = [{
                abc: 1,
                abc2: "a"
            }, {
                abc: 6,
                abc2: "b"

            }, {
                abc: 6,
                abc2: "c"

            }, {
                abc: 3,
                abc2: "g"

            }, {
                abc: 3,
                abc2: "h"

            }];
            var oTableModel = new sap.ui.model.json.JSONModel();
            oTableModel.setData(aTableData);

            var oTable = this.getView().byId("testTable");
            oTable.setModel(oTableModel);
            oTable.sort(oTable.getColumns()[0]);
        },
        onPress: function() {

            var oTable = this.getView().byId("testTable");
            //set group of table and column to false

            oTable.setEnableGrouping(false);
            oTable.getColumns()[0].setGrouped(false);
            var oModel = oTable.getModel();
            var oListBinding = oTable.getBinding();
            oListBinding.aSorters = null;
            oListBinding.aFilters = null;

            oModel.refresh(true);
            //after reset, set the enableGroup back to true
            oTable.setEnableGrouping(true);
        }


    });

    var myView = sap.ui.xmlview("myView", {
        viewContent: jQuery('#view1').html()
    }); // 
    myView.placeAt('content');
</script>

<body class='sapUiBody'>
    <div id='content'></div>
</body>