如何在 Kendo UI Vue Grid (native) 中结合过滤、分组和排序

Question

我正在尝试在我的网格上启用一些操作，例如分组、过滤和排序，它们单独工作，如文档中所示，但没有这些功能一起工作的示例。

我自己能够将排序和过滤结合起来，但是当我添加它时，分组不起作用，如文档中所示。看我的代码

<template>
  <div>
    <Grid :style="{height: '100%'}"
        ref="grid"
        :data-items="getData"
        :resizable="true"
        :reorderable="true"
        @columnreorder="columnReorder"
        :filterable="true"
        :filter="filter"
        @filterchange="filterChange"
        :sortable="true"
        :sort= "sort"
        @sortchange="sortChangeHandler"
        :groupable="true"
        :group= "group"
        @dataStateChange="dataStateChange"
        :columns="columns">
    </Grid>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        items: [],
        editID: null,
        columns: [
         { field: 'AbsenceEmployeID', filterable:false, editable: false, title: '#'},
         { field: 'Employe', title: 'Employer', cell: DropDownEmployes},
         { field: 'Remarque', title: 'Remarque'},
         { field: 'Type', title: 'Type', cell: DropDownTypes},
         { field: 'CreatedDate', filter:'date', editable: false, editor: 'date', title: 'créé le', format: '{0:d}'},
         { title: 'Actions', filterable:false, cell: CommandCell}
        ],
        filter: {
          logic: "and",
          filters: []
        },
        sort: [
          { field: 'CreatedDate', dir: 'desc' }
        ],
        group: [],
        gridData: []
      }
    }
    mounted() { 
      this.loadItems()
    },
    computed: {
      absencesList() {
        return this.items.map((item) => Object.assign({ inEdit: item.AbsenceEmployeID === this.editID}, item));
     },
     getData() {
       return orderBy(filterBy(this.absencesList, this.filter), this.sort);
     },
     ...mapState({
       absences: state => state.absences.absences
      })
    }
    methods: {
      loadItems () {
        this.$store.dispatch('absences/getAbsences')
          .then(resp => {
            this.items = this.absences.map(item => item)
          })
      },
      filterChange: function(ev) {
       this.filter = ev.filter;
      },
      columnReorder: function(options) {
        this.columns = options.columns;
      },
      sortChangeHandler: function(e) {
        this.sort = e.sort;
      },

      // the following is for grouping but not yet used, read more
      groupedData: function () {
        this.gridData = process(this.getData, {group: this.group});
      },
      createAppState: function(dataState) {
        this.group = dataState.group;
        this.groupedData();
      },
      dataStateChange: function (event) {
        this.createAppState(event.data);
      },
    }
  }
</script>

最后三种方法还没有使用，所以过滤和排序目前工作正常。然后在其他启用分组我想用:data-items="gridData" 替换:data-items="getData" 并在加载项目后运行this.groupedData() 方法但分组不起作用。 我认为一切都应该由dataStateChange 事件和process() 函数处理，但我也尝试过但没有成功

Answer 1

如果您定义了 filterchange 和 sortchange 事件，它们将被触发以进行过滤和排序，并且您必须在其处理程序中更新数据。如果您想对所有更改使用 datastatechage 事件，则必须删除 filterchange 和 sortchange 事件以及 datastatechage em> 事件将被触发而不是它们。在这种情况下，您必须更新其处理程序中的数据。

您可以使用@progress/kendo-data-query 的处理方法，通过传递相应的参数来进行每个所需的数据更改，如下例所示：

const result = process(data, {
    skip: 10,
    take: 20,
    group: [{
      field: 'category.categoryName',
            aggregates: [
                  { aggregate: "sum", field: "unitPrice" },
                  { aggregate: "sum", field: "unitsInStock" }
            ]
      }],
    sort: [{ field: 'productName', dir: 'desc' }],
    filter: {
        logic: "or",
        filters: [
          { field: "discontinued", operator: "eq", value: true },
          { field: "unitPrice", operator: "lt", value: 22 }
        ]
    }
});

Hers 是一个示例 stackblitz 示例，其中该示例正常工作 - https://stackblitz.com/edit/3ssy1k?file=index.html

Answer 2

你需要实现groupchange方法来处理分组

我更喜欢使用来自@progress/kendo-data-query 的流程

下面是一个完整的例子

<template>
<Grid :style="{height: height}"
      :data-items="gridData"
      :skip="skip"
      :take="take"
      :total="total"
      :pageable="pageable"
      :page-size="pageSize"
      :filterable="true"
      :filter="filter"
      :groupable="true"
      :group="group"
      :sortable="true"
      :sort="sort"
      :columns="columns"
      @sortchange="sortChangeHandler"
      @pagechange="pageChangeHandler"
      @filterchange="filterChangeHandler"
      @groupchange="groupChangeHandler"
/>
</template>

<script>
import '@progress/kendo-theme-default/dist/all.css';
import { Grid } from '@progress/kendo-vue-grid';
import { process } from '@progress/kendo-data-query';

const sampleProducts = [
{
    'ProductID': 1,
    'ProductName': 'Chai',
    'UnitPrice': 18,
    'Discontinued': false,
},
{
    'ProductID': 2,
    'ProductName': 'Chang',
    'UnitPrice': 19,
    'Discontinued': false,
},
{
    'ProductID': 3,
    'ProductName': 'Aniseed Syrup',
    'UnitPrice': 10,
    'Discontinued': false,
},
{
    'ProductID': 4,
    'ProductName': "Chef Anton's Cajun Seasoning",
    'UnitPrice': 22,
    'Discontinued': false,
},
];

export default {
components: {
    Grid,
},
data () {
    return {
        gridData: sampleProducts,
        filter: {
            logic: 'and',
            filters: [],
        },
        skip: 0,
        take: 10,
        pageSize: 5,
        pageable: {
            buttonCount: 5,
            info: true,
            type: 'numeric',
            pageSizes: true,
            previousNext: true,
        },
        sort: [],
        group: [],
        columns: [
            { field: 'ProductID', filterable: false, title: 'Product ID', width: '130px' },
            { field: 'ProductName', title: 'Product Name' },
            { field: 'UnitPrice', filter: 'numeric', title: 'Unit Price' },
            { field: 'Discontinued', filter: 'boolean', title: 'Discontinued' },
        ],
    };
},
computed: {
    total () {
        return this.gridData ? this.gridData.length : 0;
    },
},
mounted () {
    this.getData();
},
methods: {
    getData: function () {
        this.gridData = process(sampleProducts,
            {
                skip: this.skip,
                take: this.take,
                group: this.group,
                sort: this.sort,
                filter: this.filter,
            });
    },
    // ------------------Sorting------------------
    sortChangeHandler: function (event) {
        this.sort = event.sort;
        this.getData();
    },
    // ------------------Paging------------------
    pageChangeHandler: function (event) {
        this.skip = event.page.skip;
        this.take = event.page.take;
        this.getData();
    },
    // ------------------Filter------------------
    filterChangeHandler: function (event) {
        this.filter = event.filter;
        this.getData();
    },
    // ------------------Grouping------------------
    groupChangeHandler: function (event) {
        this.group = event.group;
        this.getData();
    },
},
};
</script>