datagrid - 如何为 extJS Grid 添加行超链接?

标签 datagrid extjs hyperlink

有人可以说明如何在 ExtJS 的特定列的单元格中呈现超链接吗?
我已经尝试将该列绑定(bind)到我的 JS 中的渲染函数,我从中发回 html:

<a href="ControllerName/viewName">SELECT</a>

但是,有了这个,问题是,一旦我通过链接点击 Controller ,导航就成功了,但随后对数据网格的导航只显示空记录。

我已经检查过,通过 Spring MVC Controller 成功地从数据库中获取了记录。

请注意,只有当我使用 extJS 网格中的行超链接导航离开网格时,才会发生这种情况。如果我来到网格,并在其他地方导航并再次返回网格,则数据显示正常。
仅在使用一个/任何单元格中呈现的超链接导航离开网格的情况下才会出现此问题。

谢谢你的帮助!

最佳答案

这适用于 ExtJS 4 和 5。

使用 renderer使内容看起来像一个链接:

renderer: function (value) {
    return '<a href="#">'+value+'</a>';
}

然后使用未记录的、动态生成的View事件 cellclick处理点击:
viewConfig: {
    listeners: {
        cellclick: function (view, cell, cellIndex, record, row, rowIndex, e) {

            var linkClicked = (e.target.tagName == 'A');
            var clickedDataIndex =
                view.panel.headerCt.getHeaderAtIndex(cellIndex).dataIndex;

            if (linkClicked && clickedDataIndex == '...') {
                alert(record.get('id'));
            }
        }
    }
}

关于datagrid - 如何为 extJS Grid 添加行超链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3337070/

相关文章:

wpf - 如何在 xaml 的 DataGrid 列标题中右对齐文本?

ExtJS4 - 扩展 Ext.tab.Panel 以防止设置高度值

javascript - 什么是 Ext.namespace,我们应该如何使用它们?

javascript - 如何在点击时运行事件加载?

jquery - e.preventDefault 不起作用 — jquery

python - 如何在 Jupyter 笔记本中建立超链接?

c# - 使用 mvvm 在 wpf 数据网格中绑定(bind)级联组合框项目源

c# - 是否有一些事件可以确定 Silverlight 中 DataGrid 列何时更改(即添加、删除)?

wpf - 为什么我会看到与 WPF 中数据网格的 AreRowDetailsFrozen 和 HeadersVisibility 相关的绑定(bind)错误?

html - 图片链接无法跨浏览器工作,已检查以确保 div 未被覆盖 - 我错过了什么?