javascript - kendo ui grid多次添加记录

Question

我有一个 kendo ui 网格，在更改行事件中，我获取行 id 并将其传递给另一个加载其他网格的函数。我尝试简化操作来找出这样的错误。

HTML 代码

<input type="button" id="load-first" value="Load 108" />    
<input type="button" id="load-second" value="Load 92" />

Javascript

$("#load-first").click(function(){
    loadEmailGrid(108);
});
$("#load-second").click(function(){
    loadEmailGrid(92);
});

  function loadEmailGrid(salesRepsId) {
      dataSource = new kendo.data.DataSource({
          transport: {
              read: {
                  url: "operations/get_emails_sales_reps.php?salesRepsId=" + salesRepsId,
                  type: "GET"
              },
              update: {
                  url: "operations/edit_email.php?salesRepsId=" + salesRepsId,
                  type: "POST",
                  complete: function (e) {
                      $("#email-grid").data("kendoGrid").dataSource.read();
                  }
              },
              destroy: {
                  url: "operations/delete_email.php",
                  type: "POST",
                  complete: function (e) {
                      $("#email-grid").data("kendoGrid").dataSource.read();
                  }
              },
              create: {
                  url: "operations/add_email.php?salesRepsId=" + salesRepsId,
                  type: "POST",
                  complete: function (e) {
                      $("#email-grid").data("kendoGrid").dataSource.read();
                  }
              },
          },
          schema: {
              data: "data",
              total: "data.length", //total amount of records
              model: {
                  id: "EmailId",
                  fields: {
                      EmailType: {
                          defaultValue: {
                              EmailTypeId: 2,
                              EmailTypeName: "Home"
                          }
                      },
                      EmailText: {
                          type: "string"
                      },
                      IsMainEmail: {
                          type: "boolean"
                      },
                  }
              }

          },
          pageSize: 5,
      });
      //dataSource.sync();
      $("#email-grid").kendoGrid({
          dataSource: dataSource,
          height: 250,
          filterable: true,
          sortable: true,
          pageable: true,
          reorderable: false,
          groupable: false,
          batch: true,
          navigatable: true,
          toolbar: ["create", "save", "cancel"],
          editable: true,
          columns: [{
              field: "EmailType",
              title: "Type",
              editor: EmailTypeDropDownEditor,
              template: "#=EmailType.EmailTypeName#",
              filterable: {
                  extra: false,
                  field: "EmailType.EmailTypeName",
                  operators: {
                      string: {
                          startswith: "Starts with",
                          eq: "Is equal to",
                          neq: "Is not equal to"
                      }
                  }
              }
          }, {
              field: "EmailText",
              title: "Email",

          }, {
              field: "IsMainEmail",
              title: "Main?",
              width: 65,
              template: function (e) {
                  if (e.IsMainEmail == true) {
                      return '<img align="center" src ="images/check-icon.png" />';
                  } else {
                      return '';
                  }
              }
              // hidden: true

          }, {
              command: "destroy",
              title: "&nbsp;",
              width: 90
          },

          ]
      });
  }

返回add_email.php的示例

[{"EmailId":200}]

例如，如果我使用一个 ID 加载网格，我会单击“加载 108”按钮。添加操作完美运行。但是当我单击并在两个按钮之间混合时。即加载具有不同 id 的网格添加函数多次调用，一次使用前一个 id，另一次使用单击的按钮 id。按钮之间的混合点击次数越多，调用的添加函数就越多。

这是一个link这说明了问题。

请问我该如何解决这个问题？我尝试了很多事情但没有运气

Answer 1

您使用全局变量，因此会混淆数据源。

改变

dataSource = new kendo.data.DataSource({...

至

var dataSource = new kendo.data.DataSource({...

然后重试。

编辑:

尝试将此作为您的脚本代码。

http://jsfiddle.net/blackjim/9LHW5

您要做的主要事情是将网格的初始化与传输选项的更改分开。

例如:

function loadDatasourceWithId(salesRepsId){
    var dataSourceOptions = dataSource.options; // find somehow the dataSource options
    dataSourceOptions.transport.read.url = "operations/get_emails_sales_reps.php?salesRepsId="+salesRepsId;
    dataSourceOptions.transport.update.url = "operations/edit_email.php?salesRepsId="+salesRepsId;
    dataSourceOptions.transport.create.url = "operations/add_email.php?salesRepsId="+salesRepsId

    datasource.read(); // read again to get new values to your dataSource
}