Как объединить фильтрацию, группировку и сортировку в Kendo UI Vue Grid (родной) - PullRequest
Новая
       71

Как объединить фильтрацию, группировку и сортировку в Kendo UI Vue Grid (родной)

0 голосов
/ 10 февраля 2019

Я пытаюсь включить некоторые операции в моей сетке, такие как группировка, фильтрация и сортировка, по отдельности они работают, как показано в документации, но нет примера того, как эти функции работают вместе.

Сам по себеМне удалось объединить сортировку и фильтрацию, но группировка не работает, когда я добавляю ее, как показано в документах.посмотрите на мой код 

<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="getData" на :data-items="gridData" и запустить метод this.groupedData() после загрузки элементов, но группировка не работает.Я думаю, что все должно обрабатываться событием dataStateChange и функцией process(), но я тоже пытался, но безуспешно

1 Ответ

0 голосов
/ 12 февраля 2019

Если вы определите события filterchange и sortchange , они запускаются для фильтрации и сортировки, и вам придется обновлять данные в их обработчиках.Если вы предпочитаете использовать событие datastatechage для всех изменений, вам необходимо удалить события filterchange и sortchange , а событие datastatechage будетсрабатывать вместо них.В этом случае вам придется обновить данные в их обработчике.

Вы можете использовать метод процесса @ 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 - пример стекаблика, где такой пример работает правильно - https://stackblitz.com/edit/3ssy1k?file=index.html

...