项目作者: SergeyMatveev88

项目描述 :
Serverside realisation of grouping, filtering and sorting for DevExtreme datagrid on django rest framework
高级语言: Python
项目地址: git://github.com/SergeyMatveev88/drf-dx-datagrid.git
创建时间: 2020-01-16T20:43:48Z
项目社区:https://github.com/SergeyMatveev88/drf-dx-datagrid

开源协议:MIT License

下载


drf-dx-datagrid

Overview

This package provides easy integration between Django REST framework and DevExtreme Data Grid.
It handles grouping, paging, filtering, aggregating and ordering on serverside.

In which case should you use drf-dx-datagrid?

You have DevExtreme in the frontend and Django REST framework as the backend. And your data is too large to load at once, but you want use grouping and filtering.

How it works?

Drf-dx-datagrid supports devextreme load options in HTTP-request and returns data in format fully compatible with Data Grid.
All you need is to replace classname “ModelViewSet” with “DxModelViewSet” in your django project.

Installation

pip install drf-dx-datagrid

Configuration

Define your ViewSet classes:

  1. from drf_dx_datagrid import DxModelViewSet
  2. class MyModelViewSet(DxModelViewSet):
  3. serializer_class = MyModelSerializer
  4. queryset = core.models.MyModel.objects.all()

Example for React.js:

  1. const load = (loadOptions) => {
  2. return axios(`${my_url}`, {
  3. params: loadOptions
  4. }
  5. ).then((response) => response.data
  6. )
  7. }
  8. export default class Example extends PureComponent {
  9. state={
  10. store: new CustomStore({ load: load})
  11. }
  12. render() {
  13. return (<DataGrid
  14. dataSource={this.state.store}
  15. height={"100vh"}
  16. >
  17. <RemoteOperations groupPaging={true}></RemoteOperations>
  18. <Scrolling mode={'virtual'}></Scrolling>
  19. <HeaderFilter visible={true} allowSearch={true}></HeaderFilter>
  20. <Paging defaultPageSize={40}></Paging>
  21. <Sorting mode={"multiple"}></Sorting>
  22. <FilterRow visible={true}></FilterRow>
  23. <GroupPanel visible={true}></GroupPanel>
  24. <Grouping autoExpandAll={false}></Grouping>
  25. <Summary>
  26. <TotalItem column={"id"} summaryType={"count"}></TotalItem>
  27. <GroupItem column={"name"} summaryType={"max"}></GroupItem>
  28. </Summary>
  29. </DataGrid>
  30. );
  31. }
  32. }

Example for jQuery.js:

  1. const load = (loadOptions) => {
  2. return axios(`${my_url}`, {
  3. params: loadOptions
  4. }
  5. ).then((response) => response.data
  6. )
  7. }
  8. const store = new DevExpress.data.CustomStore({load: load});
  9. $("#gridContainer").dxDataGrid({
  10. dataSource: store,
  11. height: "100vh",
  12. remoteOperations: {
  13. groupPaging: true
  14. },
  15. scrolling: {mode: 'virtual'},
  16. headerFilter: {visible: true, allowSearch: true},
  17. paging: {defaultPageSize: 40},
  18. sorting: {mode: "multiple"},
  19. filterRow: {visible: true},
  20. groupPanel: {visible: true},
  21. grouping: {autoExpandAll: false},
  22. summary: {
  23. totalItems: [{
  24. column: "id",
  25. summaryType: "count"
  26. }],
  27. groupItems: [{
  28. column: "id",
  29. summaryType: "min"
  30. }]
  31. }
  32. });

By default, filtering is case-sensitive.If you want case-insensitive behavior, you must set FILTER_CASE_SENSITIVE parameter to false in django settings:

  1. REST_FRAMEWORK = {
  2. 'DRF_DX_DATAGRID': {
  3. 'FILTER_CASE_SENSITIVE': False}
  4. }