Question

我们的客户想要一个剑道网格，他可以点击一行中的任意位置打开相应的详细信息页面。我正在添加如下行：

const cols = [
    { field: "Date", title: "Date", template: "#=kendo.toString(kendo.parseDate(Date, 'yyyy-MM-dd), 'dd.MM.yyyy')#" },
    { field: "Title", title: "Title" },
    { field: "", command: ["destroy"], title: "&nbsp;" }];

let grid = $("#grid").kendoGrid({
    dataSource: this.dataSource,
    pageable: true,
    filterable: true,
    sortable: true,
    columns: cols,
    editable: "detail"
}).data("kendoGrid");
grid.one("dataBound", this.onDataBound.bind(this));

在我的函数onDataBound()中：

const grid = $("#grid").data("kendoGrid");
$(grid.tbody).on("click", "tr", function (e) {
    const rowData = grid.dataItem(this);
    const URL = startInfo.ApplicationRoot + "SomeDetailPage?SomeId=" + rowData.get("SomeId");
    window.open(URL, '_blank');
});

这完全符合预期。但是，如您所见，我有一个带删除按钮的列。这是问题所在。每当我点击删除按钮时，我都会收到确认消息（＆＃34;您确定要删除[...]吗？＆＃34;）并且实际可以删除行成功，但单击按钮后行的详细信息页面就会打开。

当我点击删除按钮时，如何让该行知道它不应该打开详细信息页面？

Answer 1

你应该使用e.stopPropagation（）;在删除按钮上，所以它也不会将事件传递给行。

Answer 2

我找到了解决方案。将click函数绑定到行时，我可以检查tagName：

$(grid.tbody).on("click", "tr", function (e) {
    if (e.target.tagName == "TD") {
        const URL = startInfo.ApplicationRoot + "SomeDetailPage?SomeId=" + rowData.get("SomeId");
        window.open(URL, '_blank');
    }
});

当我点击按钮时，tagName得到＆＃34; SPAN＆＃34;或＆＃34; A＆＃34;。按钮外的所有内容都会导致＆＃34; TD＆＃34;。

按钮单击在剑道网格列中点击整行的点击

2 个答案: