Question

我的MVC Web应用程序中有一个checkbox选择的Kendo网格。我正在尝试设置一些在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()检查数组中是否存在每个<plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <version>1.6</version> <configuration> <workingDirectory>src/main/angular5/tourism</workingDirectory>  <installDirectory>${project.build.directory}/install</installDirectory> </configuration> <executions> <execution> <id>install-node-and-npm</id> <goals> <goal>install-node-and-npm</goal> </goals> <configuration> <nodeVersion>v${node.version}</nodeVersion> <npmVersion>${npm.version}</npmVersion> </configuration> </execution> <execution> <id>npm-install</id> <goals> <goal>npm</goal> </goals> <configuration> <arguments>install</arguments> </configuration> </execution> </executions> </plugin>：

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

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>

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

2 个答案: