如何通过数组传入的 ID 选择剑道网格项目？

Question

我的 MVC Web 应用程序中有一个带有 checkbox 选项的 Kendo Grid。我正在尝试设置一些在databind 上触发的初始选择。这是我的网格代码：

@(Html.Kendo().Grid<MyProject.ViewModels.MyViewModel>()
.Name("MyGrid")
.Columns(columns => {
    columns.Select().Width(50);
    columns.Bound(c => c.Id);
    columns.Bound(c => c.Name).Title("Name")
})
.Pageable()
.Sortable()
.Events(ev => ev.DataBound("onChange"))
.PersistSelection()    
.DataSource(dataSource => dataSource
    .Ajax()
    .Model(model => model.Id(p => p.Id))
    .Read(read => read.Action("GetData", "Test"))
))

您会注意到，在events 参数下，我设置了一个在DataBound 上触发的函数，称为onChange。这个函数是我要进行初始选择的地方。我开始编写一个函数来实现这一点，Telerik 提供了一些代码：

function onChange(e) {
    //Sample array
    var arr = [206, 210];

    for (var i = 0; i < e.sender.items().length; i++) {
        //206 is a test value, I want to pass an array in.
        if (e.sender.dataItem(e.sender.items()[i]).Id == 206) {
            e.sender.select(e.sender.items()[i]);
        }
    }
}

这段代码只带了我一部分。我想做的和需要帮助的地方是，调整此代码以接受一组 Id 并选择这些项目。出于测试目的，我制作了一个名为arr 的非常基本的数组，但我不确定如何将它传递到循环中。

我尝试使用 jquery each 循环来迭代数组中的每个值并选择行，但它不起作用。代码类似于：

function onChange(e) {
    //Sample array
    var arr = [206, 210];

    $.each(arr, function(i, v) {
        if (e.sender.dataItem(e.sender.items()[i]).Id == v) {
            e.sender.select(e.sender.items()[i]);
        }
    })
}

感谢任何帮助。

Answer 1

使用indexOf()检查每个Id是否存在于数组中：

function onChange(e) {
    //Sample array
    var arr = [206, 210],
        grid = e.sender;

    for (var i = 0; i < grid.items().length; i++) {
        if (arr.indexOf(grid.dataItem(grid.items()[i]).Id) > -1) {
            grid.select(grid.items()[i]);
        }
    }
}

工作示例：

let arr = [1,3,5,7],
    data = [1,2,3,4,5,6,7,8,9,10];
    
for (let i = 0, len = data.length; i < len; i++) {
  if (arr.indexOf(data[i]) > -1) {
    console.log(`item ${data[i]} exists in the array`);
  }
}

Answer 2

这里我有一个命名空间 myApp ，其中我添加了一个 klookup 函数来返回数组中的第一个匹配项，然后选择使用它。请注意，我使用剑道数据样本使用了dataBound 事件。

// create a namespace for my functions
var myApp = myApp || {};
myApp.funcs = {
  klookup: function(myArray, searchTerm, property, firstOnly) {
    var found = [];
    var i = myArray.items().length;
    while (i--) {
      if (myArray.dataItem(myArray.items()[i])[property] == searchTerm) {
        found.push(myArray.items()[i]);
        if (firstOnly) break; //if only the first 
      }
    }
    return found;
  },
  onDataBound: function(e) {
    // console.log("onDataBound");
    myApp.data.Sender = e.sender;
    let s = myApp.data.Sender
    // console.dir(myApp.data.arr);
    let rows = s.items();
    //console.log(rows);
    myApp.data.arr.forEach(function(entry) {
      let found = myApp.funcs.klookup(s, entry, "OrderID", true);
      s.select(found[0]);
    });
  }
};
// add data to my namespace
myApp.data = {
  arr: [10248, 10250]
};
$(function() {
  $("#grid").kendoGrid({
    dataSource: {
      type: "odata",
      transport: {
        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
      },
      schema: {
        model: {
          fields: {
            OrderID: {
              type: "number"
            },
            Freight: {
              type: "number"
            },
            ShipName: {
              type: "string"
            },
            OrderDate: {
              type: "date"
            },
            ShipCity: {
              type: "string"
            }
          }
        }
      },
      pageSize: 5,
      serverPaging: true,
      serverFiltering: true,
      serverSorting: true
    },
    persistSelection: true,
    dataBound: myApp.funcs.onDataBound,
    height: 550,
    filterable: true,
    sortable: true,
    pageable: true,
    columns: [{
        selectable: true,
        width: "50px"
      }, {
        field: "OrderID",
        filterable: false
      },
      "Freight",
      {
        field: "OrderDate",
        title: "Order Date",
        format: "{0:MM/dd/yyyy}"
      }, {
        field: "ShipName",
        title: "Ship Name"
      }, {
        field: "ShipCity",
        title: "Ship City"
      }
    ]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.blueopal.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
<div id="grid"></div>