1

我有一个 KendoUI Grid，对于某些列，您可以单击并从下拉列表菜单中选择一个值。

问题是，如果我在网格中添加一些新行并开始从下拉列表中为任何给定列选择选项，那么选择速度似乎会呈指数级下降。

例如，如果我添加四行并为第一行中的一列选择某些内容，则速度很好。如果我然后从第二行的下拉列表中选择一些东西，它会慢一点。然后，如果我为第三或第四行选择一些东西，它会非常慢。

我已经检查了检查器中的所有内容，内存使用情况很好，并且没有巨大的 ajax 请求。我在任务管理器中看到的唯一一件事是 CPU 使用率达到 100%，直到选择解冻。

这是我的下拉列表之一（它们几乎完全相同）：

function conditionDropdown(container, options)
{
  $('<input required data-text-field="conditionName" data-value-field="conditionId" data-bind="value:' + options.field + '"/>')
  .appendTo(container)
  .kendoDropDownList({
    autoBind: false,
    dataSource: [{
      conditionName: "Used", 
      conditionId: 2
    }, {
      conditionName: "New", 
      conditionId: 1
    }]
  })
}

还有我的 KendoUI 网格：

$('#partsGrid').kendoGrid({
      dataSource: {
        data: partData,
        pageSize: 10,
        autoSync: true,
        schema: {
          model: {
            fields: {
              id: {
                type: "number",
                editable: false
              },
              quantity: {
                type: "number",
              },
              partNumber: {
                type: "string",
              },
              manufacturer: {
                type: "string",
              },
              partTypes: {
                defaultValue: {
                  partTypeId: 1, 
                  partType: "Unknown"
                }
              },
              jobTypes: {
                defaultValue: {
                  jobTypeId: 2, 
                  jobType: "Supply"
                }
              },
              conditions: {
                defaultValue: {
                  conditionId: 1, 
                  conditionName: "New"
                }
              },
              urgency: {
                defaultValue: {
                  urgencyId: 3, 
                  urgencyName: "Standard"
                }
              },
              leadtimes: {
                defaultValue: {
                  leadtimeId: 3, 
                  leadtimeName: "Standard"
                }
              }
            }
          }
        }
      },
      columns: [
      {
        field: 'quantity',
        width: 40,
        title: 'Qty',
      },
      {
        field: 'partNumber',
        width: 120,
        title: 'Part number',
        editor: partNumberScanner
      },
      {
        field: 'manufacturer',
        width: 120,
        title: 'Manufacturer',
      },
      {
        field: 'partTypes',
        width: 80,
        title: 'Part type',
        editor: partTypeDropdown,
        template: "#=partTypes.partType#"
      },
      {
        field: 'jobTypes',
        width: 80,
        title: 'Job type',
        editor: jobTypeDropdown,
        template: "#=jobTypes.jobType#"
      },
      {
        field: 'conditions',
        width: 70,
        title: 'Condition',
        editor: conditionDropdown,
        template: "#=conditions.conditionName#"
      },
      {
        field: 'urgency',
        width: 100,
        title: 'Urgency',
        editor: urgencyDropdown,
        template: "#=urgency.urgencyName#"
      },
      {
        field: 'leadtimes',
        width: 100,
        title: 'Lead time',
        editor: leadtimeDropdown,
        template: "#=leadtimes.leadtimeName#"
      }
      ],
      editable: {
        update: true,
        destroy: true,
        confirmation: false
      },
      toolbar: [
      {
        name: "create", 
        text: "Add part",
        className:"k-grid-insert-expense"
      }
      ]
    })
    $(".k-grid-insert-expense").bind("click", function (ev) {
      grid.addRow();
    });
    grid = $('#partsGrid').data("kendoGrid");

    grid.dataSource.bind("sync", function(e) {
      parts = grid.dataSource.data();
      partData = parts;
      grid.dataSource.success(parts);
    });

如果我autoSync在网格中更改为 false，dataSource所有速度问题都会解决，但这会破坏我想要的一些行为。

经过更多测试后，似乎是这条线导致速度变慢：

grid.dataSource.success(parts);

有谁知道为什么？

4

0 回答 0