Kendo UI 网格单元中的工具栏菜单，从哪一行单击了菜单？答案

【问题标题】：Toolbar menu in Kendo UI grid cell, which row was menu clicked from?Kendo UI 网格单元中的工具栏菜单，从哪一行单击了菜单？
【发布时间】：2014-11-08 19:40:03
【问题描述】：

我有一个 Kendo UI 网格，其中第一列包含一个菜单，用户可以在其中选择要对项目执行的操作。

我使用的是 Kendo UI 工具栏，只有溢出图标（我找不到更好的选择，套件中似乎没有独立的下拉菜单）。

HTML：

<div ng-controller="myController">
  <div kendo-grid="lineGrid" k-options="lineGridOptions"></div>
</div>

MyController.js，列定义：

columns: [{
    field: "Action",
    template: "<div id='lineToolbarDiv' kendo-toolbar='lineToolbar' k-options='lineToolbarOptions' class='button-group-toolbar'></div>",
    width: "80px",
    attributes: { lineNo: "#= lineNo #" }
  }, {
    field: "itemNo", title: "Item #"
  }
  ],

MyController.js，工具栏定义：

$scope.lineToolbarOptions = {
        items: [{
            type: "button", id: "menuItemA", text: "Do A", overflow: "always"
        }, {
            type: "button", id: "menuItemB", text: "Do B", overflow: "always"
        }],
        click: function (e) {
            console.log("click", e.target.text());
            if (e.id.indexOf("menuItemA") === 0) {
              alert(e.id);
            } else if (e.id.indexOf("menuItemB") === 0) {
              alert(e.id);  
            }
        }
    };

Plunker：http://plnkr.co/edit/FJJmoKyAh3JoOVicUGKB?p=preview

问题：在上面的工具栏点击处理程序中，我怎么知道他们在哪一行使用了菜单？

另外，如果有更干净的独立剑道菜单或类似菜单（与 blueopal 主题相匹配），那可能会很有趣（并且可能会使这更容易）。

【问题讨论】：

标签： javascript jquery angularjs kendo-ui kendo-grid

【解决方案1】：

要解决您的问题，您需要知道在click 事件处理程序this 中引用toolbar 和this.element 是HTML 元素。

如果你这样做：

click: function(e) {
    // Get the HTML row (tr) that contains the toolbar
    var row = this.element.closest("tr");
    // Get its index in the table
    console.log("row", row.index());
    ...
}

如果您需要访问 Grid DataSource 中的数据项，您应该使用 KendoUI grid 中的 dataItem 方法。这类似于：

click: function(e) {
    // Get the HTML row (tr) that contains the toolbar
    var row = this.element.closest("tr");
    // Get its index in the table
    console.log("row", row.index());
    // Get the item from the Grid DataSource
    var item = $scope.lineGrid.dataItem(row);
    // Show it in the console
    console.log("item", item);
    ...
}

【讨论】：