主页 / 问题 / 634141
Accepted
sag3ll0
Asked:2020-03-01 22:03:48 +0000 UTC2020-03-01 22:03:48 +0000 UTC

dxDatagrid 查找列数据源

  • 772

你好。我用的是devExpress for js，有一个dxdataGrid表，里面有datasource和一个通过lookup实现下拉列表的column，引用它的dataSource，这两种情况下都启用了Pagination

    this.$scope.dxGridLocalConfig = {
        dataSource: AService.dataSource,
        paging: {
            enabled: true,
            pageSize: 25
        },
        columns: [{
                    dataField: 'SId',
                    caption: 'S',
                    lookup: {
                       dataSource: {
                          store: SService.store,
                          paginate: true,
                          pageSize: 25,                    
                       },
                       valueExpr: 'Id',
                       displayExpr: 'FullName'
                     }                    
  }]
}

问题是当加载一个带有这样一个网格的页面时，首先有一个数据源的请求，考虑到整个表的分页（我使用 odata DataSource）

http://localhost/odata/A?%24orderby=Id&%24top=25&%24count=true

然后有一个请求

http://localhost/odata/S

它请求所有记录，而不是不请求任何记录或仅请求前 25 个记录。数据源我已经描述过

this.store = ODataService.context.S;
this.dataSource = new DevExpress.data.DataSource({
    store: this.store,
    paginate: true,
    pageSize: 25,
});

和上下文依次

this.context = new DevExpress.data.ODataContext({
                url: `localhost/odata/`,
                entities: {
                    S: {
                        key: 'Id',
                        keyType: 'Int32'
                    },

同时，当您在关联字段内单击时，滚动字段将打开并正常工作，即逐渐加载表单请求

http://localhost/odata/S?%24skip=50&%24top=25

我唯一想避免的是从相关字段加载所有数据，因为那里有很多数据，结果是在一个有 3 条记录的表中，后台分别有另外 150 万段，这一切都非常减缓。不应该是这样的

UPD：准备（或更确切地说是改编）问题的例子

/// <reference path="C:/Program Files (x86)/DevExpress 16.1/DevExtreme/Sources/Lib/ts/jquery.d.ts" />
/// <reference path="C:/Program Files (x86)/DevExpress 16.1/DevExtreme/Sources/Lib/ts/dx.all.d.ts" />

$(function() {
  var context = new DevExpress.data.ODataContext({
    url: "http://services.odata.org/V4/Northwind/Northwind.svc/",
    entities: {
      Categories: {
        key: "CategoryID",
        keyType: "Int32",
      },
      Suppliers: {
        key: "SupplierID",
        keyType: "Int32",

      },
      Products: {
        name: "Products",
        key: "ProductID",
        expand: ["Category"],
        keyType: "Int32"
      }
    },
    version: 4
  })
  $("#grid").dxDataGrid({
    dataSource: context.Products,       
    paging: {
      enabled: true,
      pageSize: 1
    },
    columns: ["ProductID", {
        dataField: "ProductName",
      },
      {
        dataField: "SupplierID",
        lookup: {
          dataSource: {
            store: context.Suppliers,
            paginate: true,
            pagesize: 3
          },
          displayExpr: "ContactName",
          valueExpr: "SupplierID"
        }
      },
      {
        dataField: "CategoryID",
        lookup: {
          dataSource: {
            store: context.Categories,
            paginate: true,
            pagesize: 3
          },
          displayExpr: "CategoryName",
          valueExpr: "CategoryID"
        }
      }
    ],
    pagesize: 5,
    filterRow: {
      visible: true
    },
    headerFilter: {
      visible: true
    },
    groupPanel: {
      visible: true
    }
  });
});
<!DOCTYPE html>
<html>

<head>
  <title>DevExtreme jQuery site</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/16.2.5/css/dx.common.css" />
  <link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/16.2.5/css/dx.light.css" />
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.min.js"></script>
  <script type="text/javascript" src="http://cdn3.devexpress.com/jslib/16.2.5/js/dx.all.js"></script>
  <script type="text/javascript" src="16.2.4.js"></script>
</head>

<body>
  <div id="grid"></div>
</body>

</html>

页面大小设置为 1 条记录，但是当使用请求加载供应商页面时，他们获得全部 29 个（如果不是 29 个，而是 150 万个），尽管只需要一个就可以完全显示页面。也许我在某个地方搞砸了？

javascript

1 个回答

  1. Best Answer

    这是网格中查找工作的一个特点 - 页面加载始终被禁用。这样做是因为网格通常显示多行，并且在每一行中查找都应显示与外键值对应的文本。

    正常查找（未内置到网格中）从数据源获取此文本，在页面加载的情况下，这会导致对服务的请求。但是在一个网格中，如果遵循代码重用的原则，那么就会发出 N 个请求，其中 N 是外键分散的页面数。这会导致加载网格时出现明显的延迟。在一般情况下，加载整个 dataSource 并通过在内存中列出它们来从中选择必要的元素会更有效。

    我强调“一般”是因为规则总是有例外，对大多数应用程序有效的方法在某些特殊情况下会造成不必要的浪费。如果查找绑定到一个大表，最好不要依赖内置的查找机制，而是使用扩展和选择选项将所需的值添加到选择中。在特定情况下，这样的样本将比 lucap 更有效。

    dataSource: {
    store:context.Products,
    expand: "Supplier",
    select: ["ProductName", "Supplier.ContactName"]   
},
paging: {
  enabled: true,
  pageSize: 1
},
    • 1

相关问题