1

我创建了一个 Kendo UI Grid 视图，它正确显示了数据，现在我想要实现的是；当我单击一行时，我想获取该行的主键并在其他地方使用它，我在网络中尝试了许多解决方案，但我没有工作。有谁知道如何做到这一点。

这是我的代码：

  function FondsGrid() {
  var sharedDataSource = new kendo.data.DataSource({
  transport: {
  read: {
  url: 
  "http://localhost:...........",
   dataType: "json"

  }
  },
  pageSize: 20
  });

  var accountGrid = $("#grid-fonds").kendoGrid({
  dataSource: sharedDataSource,
  sortable: true,
  pageable: false,
  columns: [
  {
  field: "CodIsin",
  title: " ",
  template: '<span class="categ #= CodIsin #"></span>',
  attributes: {
  class: "text-center"
  },
  headerattributes: {
  style: "text-align:center"
  },
  width: 35
  },
  {
 field: "LIBELLEPDT",
 title: "Nom du fonds",
 template: '<div id="#: IdProduitSP #" class="title-fonds #: 
 IdProduitSP #" data-toggle="popover" ><span class="desc-
 fonds">#: LibClassificationNiv2 #</span>#: LIBELLEPDT #
            .
            .
            .

 dataBound: function () {
 var widthGrid = $('.k-grid-content').width();
 $(".k-grid-header").width(widthGrid);
 $(".title-fonds").popover({
 trigger: 'hover',
 html: true,
 template: '<div class="popover HalfBaked" role="tooltip">
 <div class="arrow"></div><h3 class="popover-header"></h3><div 
 class="popover-body"></div></div>',
 content: function () {
 return $('#popover-content').html();
 }
 });
 }
 }).getKendoGrid();
 /* Initialisation */
 $(document).ready(function ($) {
 FondsGrid();
 });
4

2 回答 2

2

您自己的答案是完全有效的，并且是如何使用 jquery 直接定位 kendo 生成的 dom 元素的一个很好的例子。当剑道不能提供您需要的功能时，这种方法总是很有价值。

但是在这种情况下，网格小部件提供了更改事件。您可以将网格设置为“可选”，并订阅“更改”事件，该事件在选择一排或多个行时会发射：

selectable: "multiple, row",
change: function(e) {
    var selectedRows = this.select();
    var selectedDataItems = [];
    for (var i = 0; i < selectedRows.length; i++) {
      var dataItem = this.dataItem(selectedRows[i]);
      selectedDataItems.push(dataItem);
    }
    // selectedDataItems contains all selected data items
}

在处理函数中，“this”指的是网格小部件实例，并在其上调用 select() 函数会返回选定的行。然后，您可以从这些行中检索绑定到它们的数据源项，从而使您可以访问 id 和任何其他属性。

有关更多详细信息，请参见此处：https ://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/change

于 2018-05-02T21:43:51.110 回答
1

这就是我修复它的方法。

$("#grid-fonds").on("click", "td", function (e) {
    var row = $(this).closest("tr");
    var value = row.find("td:first").text();
    console.log(value);
});
于 2018-05-02T15:55:19.760 回答