代码之家 › 专栏 › 技术社区 › Yanayaya

如何按数组传入的Id选择剑道网格项?

kendo-ui asp.net-mvc jquery javascript

Yanayaya · 技术社区 · 6 年前

我有剑道格子 checkbox 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

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]);
        }
    })
}

如有任何帮助,我们将不胜感激。

2 回复 | 直到 6 年前

DontVoteMeDown 6 年前

使用 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`);
  }
}

Mark Schultheiss 6 年前

在这里,我有一个带名称空间的应用程序,其中的函数添加了 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>