时间戳

首页 > 解决方案 > 使用静态数组时如何在 dx-select-box 上启用分页？

angularjs - 使用静态数组时如何在 dx-select-box 上启用分页？

问题描述

我在 AngularJS 中有一个 dx-select-box，它加载了一个大约 3k 行的数组，这使得性能非常慢。我想启用分页，但我还没有找到方法。我遵循了文档：

数组数据绑定文档：https ://js.devexpress.com/Documentation/Guide/Widgets/SelectBox/Data_Binding/Simple_Array/Array_Only/

在选择框上启用分页：
https ://js.devexpress.com/Documentation/Guide/Widgets/SelectBox/Enable_Paging/

但无论如何我都无法将它们两个放在一起并让它们工作。我也尝试过这个解决方案，但没有运气。

这是HTML代码：

<div id="stockShelfs" dx-select-box="vm.stockShelfsOptions"></div>

这是JS：

this.stockShelfsOptions = {
  valueExpr: 'stockShelfId',
  displayExpr: 'name',
  searchExpr: 'name',
  searchEnabled: true,
  acceptCustomValue: true,
  value: this.product.stockShelfId,
  placeholder: translate('POr_VelgStockShelf'),
  bindingOptions: {
      dataSource: 'vm.stockShelfs',
  },

如果可能的话，有谁知道如何实现这一目标？

标签： angularjsdrop-down-menudevexpressdevextreme

解决方案

我通过摆脱 bindingOptions 配置让它工作：

dataSource: new DevExpress.data.DataSource({
                store: new DevExpress.data.ArrayStore({
                    data: vm.stockShelfs,
                    key: "stockShelfId",
                    paginate: true,
                    pageSize: 1
                })
            }),

然后在 onCustomItemCreating 函数中进行双向绑定

推荐阅读