【问题标题】:KnockOut KoGrid : How can I have row double click and a link in koGrid?KnockOut KoGrid:如何在 koGrid 中双击行和链接?
【发布时间】:2014-02-24 17:36:12
【问题描述】:

更新:

请检查并建议如何将列值作为 koGrid 中的链接,以及如何同时在 kogrid 中具有双击功能,即年龄列作为链接​​,单击时将我带到主页/关于页面和当我双击任何一行时,它会将我带到主页/索引页面。

[这里]:http://jsfiddle.net/LRY2U/

 {
field: "age", 
displayName: "Age",
cellTemplate: "content"
 }

谢谢 普里扬卡

【问题讨论】:

  • 你能不能显示一些代码或者更好的工作 JSfiddle 来解决这个问题
  • 查看您的问题历史记录,您已提出 9 个问题,得到 19 个答案,仅将 1 个标记为已接受。没有一个答案有用吗?我建议您标记对您最有帮助的答案,首先,任何遇到相同问题的人都会看到解决/帮助您的问题的方法,其次是对那些花时间试图帮助您的人表示赞赏。如果没有答案可以帮助您解决问题,您可以使用最终解决方案回答您自己的问题,并将您自己的答案标记为正确。
  • 谢谢 tanner。我将标记接受为我工作的答案。我会发布代码供您参考。
  • @Tanner : 请参考我的问题以获得详细参考,并告诉我解决方案。
  • 您能否在 jsfiddle、jsbin、plunker 或类似服务上设置一个 minimal, complete, tested and readable example 来显示您的问题?这将使您更轻松地解决问题。

标签: knockout.js kogrid


【解决方案1】:

问题是行选择处理鼠标点击,所以我们要确保我们不允许点击事件传播到行选择处理程序,我们可以使用方法event.stopPropagation来做到这一点。

为了让它工作,我首先更改了ItemViewModel 构造函数来执行实际的导航。

function ItemViewModel(name, age) {
    var self = this;

    self.name = name;
    self.age = age;
    self.ageUrl = "/Home/Index/" + self.age;
    function navigateTo(url){
        // Before navigation we want to stop propagation of the event to avoid 
        // other handlers to handle the click and replace the url (this will 
        // ensure the row selection isn't triggered by clicking the age link)
        event.stopPropagation();
        window.location.href = url;
    }
    self.navigateToName = function(){
        navigateTo("/Home/Index?Name=" + self.name);
    };
    self.navigateToAge = function(){
        navigateTo(self.ageUrl);
    };
};

然后我更新了您的单元格模板以使用 ItemViewModel 对象上的属性和方法。

cellTemplate: "<a data-bind='click: $parent.entity.navigateToAge, attr: {href: $parent.entity.ageUrl}, text: $parent.entity.age'></a>"

最后还更新了行选择处理程序以使用 ItemViewModel 对象上的方法。

afterSelectionChange: function (rowItem, event) {
    if (event.type == 'click') {
        rowItem.entity.navigateToName();
    }
}

完成这些更改后,一切对我来说都很好(如果我把它放在一个自定义的 html 页面中,因为 jsfiddle 不是很热衷于导航)。

【讨论】:

    猜你喜欢
    • 2016-07-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-04-01
    • 2014-08-28
    • 1970-01-01
    相关资源
    最近更新 更多