Question

我有一个Kendo网格，其中包含链接，我也设置为可选择的代码段：

columns: [{
    field: 'link', title: 'Link',
    template: '<a href="${link}">Click Here</a>'
}],
...
selectable: 'row',
change: function(e) {
    var rowUid = this.select().data('uid');
    rowDs = this.dataSource.getByUid(rowUid);
    console.log('Went (1): ' + rowDs);
    return false;
}

当我点击外部链接<a>时，我也会选择该行。有没有办法压制可选事件？

Answer 1

您还可以通过为列提供CSS类来检测触发单击的元素。然后，您将在change事件中放入一个if语句，以检测是否单击了该列：

columns: [
  {
    title: ' ',
    command: {
      text: 'My Button',
        click: function (e) {
          e.preventDefault();

          //GET SELECTED DATA
          var data = this.dataItem($(e.currentTarget).closest('tr'));

          //DO SOMETHING
        }
      },
      attributes: {
        'class': 'actions'
      }
  }
]

然后在改变中你会有这个：

change: function (e) {
  //GET TRIGGER SOURCE TO DETERMINE IF ACTION CLICKED
  var eventTarget = (event.target) ? $(event.target) : $(event.srcElement);
  var isAction = eventTarget.parent().hasClass('actions');

  //SELECT ITEM IF APPLICABLE
  if (!isAction) {
    var grid = e.sender;
    var dataItem = grid.dataItem(this.select());
    if (dataItem) {
      //DO SOMETHING
    }
  }
}

Answer 2

我只是偶然发现了一个由Kendo UI开发的论坛帖子，指出“无法阻止选择网格”(link)。我想这意味着我将不得不解决这个问题。

编辑：我实际上只想获取行的uid属性，以便我可以从dataSource中选择所选的dataItem。我发现你可以在定义列模板时获取它，

columns: [{
    field: 'link', title: 'Link',
    template: '<a href="#" data-rowSpecificUid="${uid}">Manual Edit Link</a>'
}],

并使用它来检索所选行的dataItem。

var selectedRow = $('#gridId').data('kendoGrid').dataSource.getByUid(rowUid);

会在一段时间内关闭此问题，万一其他人可以提供帮助。

单击单元格中的链接时抑制Kendo UI Grid可选事件

2 个答案: