Question

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

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

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

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

此外，如果有一个更干净的独立Kendo菜单或类似的（与blueopal主题相匹配），那可能是有意义的（并且可能会使这更容易）。

Answer 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 dataItem中使用grid方法。这就像：

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

Kendo UI网格单元格中的工具栏菜单，哪一行是菜单点击的？

1 个答案: