SAPUI5 表格 - 删除筛选/分组/排序？

Question

SAPUI5 表格 - 删除筛选/分组/排序？

6

我有一个简单的表格（类型为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",
}));

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

- dotchuZ

2个回答

1

针对 openui5 v1.78.7 版本：如果您想从表格中删除这些筛选器：

你可以做：

  var columns = this.byId("tableId").getColumns();
  for (var i = 0, l = columns.length; i < l; i++) {
    var isFiltered = columns[i].getFiltered();
    if (isFiltered) {
      // clear column filter if the filter is set
      columns[i].filter("");
    }
  }

您可以使用以下方法清除排序过滤器：

    var columns = table.getColumns();
    var sortedCols = table.getSortedColumns();
    for (var i = 0, l = columns.length; i < l; i++) {
      if (sortedCols.indexOf(columns[i]) < 0) {
        columns[i].setSorted(false);
      }
    }

如果您在行绑定中设置了任何后退排序，请确保将其设置回来：

    table.getBinding("rows").sort(new Sorter(sPath, bDescending));

- Bertoncelj1

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Haojie · Accepted Answer

是的，只有通过编码才能实现这一点。基本上你需要清除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>