Kendo UI网格单元格中的工具栏菜单，菜单是从哪个行单击的

Toolbar menu in Kendo UI grid cell, which row was menu clicked from?

本文关键字：菜单 单击 单元格 UI 工具栏 Kendo 网格      更新时间：2023-09-26

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

我使用的是剑道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

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

此外，如果有一个更干净的独立剑道菜单或类似菜单（与蓝蛋白石主题相匹配），那可能会很有趣（而且可能会让这更容易）。

为了解决您的问题，您需要知道在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);
    ...
}
相关文章：