如何为 extJS 表格添加行超链接？

Question

请问如何在ExtJS中渲染特定列单元格中的超链接？我尝试将列绑定到我的JS中的一个渲染函数，从中返回HTML：

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

然而，问题在于，一旦我通过链接点击控制器，导航成功，但随后导航到数据网格只显示空记录。

记录通过Spring MVC控制器从数据库成功获取，我已经检查过。

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

谢谢您的帮助！

- PaiS

Answer 1

这适用于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'));
            }
        }
    }
}

- AndreKR

Answer 2

试试这样做：

Ext.define('Names', {
    extend: 'Ext.data.Model',
    fields: [
        { type: 'string', name: 'Id' },
        { type: 'string', name: 'Link' },
        { type: 'string', name: 'Name' }
    ]
});

 var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [
        {
            text: 'Id',
            dataIndex: 'Id'
        },
        {
            text: 'Name',
            dataIndex: 'Name',
            renderer: function (val, meta, record) {
                return '<a href="' + record.data.Link + '">' + val + '</a>';
            }
        }
               ...
               ...
               ...

感谢 - ExtJS数据网格列渲染器具有多个值

- Vijay

Answer 3

我会选择使用基本的CSS样式来将单元格内容呈现为锚点，而不是使用锚点标签，并处理GridPanel的cellclick事件以执行操作。这样可以避免处理锚点默认点击行为重新加载页面（我猜测这就是发生的情况）。

- Brian Moeskau

---

使用锚标签是更好的语义化标记。同时，也可以节省使用 CSS 仔细复制鼠标指针图标等细节的时间。 - David Easley

Answer 4

我创建了一个渲染器，使它看起来像是你在点击它。

aRenderer: function (val, metaData, record, rowIndex, colIndex, store){
// Using CellClick to invoke
return "<a>View</a>";
},

但我使用了单元格事件来管理点击。

cellclick: {
    fn: function (o, idx, column, e) {
        if (column == 1)  // Doesn't prevent the user from moving the column
        {
            var store = o.getStore();
            var record = store.getAt(idx);
            // Do work
        }
    }
}

- CrazyEnigma

---

很好的回答，除了a)我认为a需要href才能看起来像一个链接，b)你最好比较从grid.getColumnModel().getDataIndex(column)获取的字段名而不是列索引。 - AndreKR

使用 column == 1 不是一个好的做法，因为如果未设置列排序或可移动属性为 false，则用户可以通过拖放重新排序列，因此您的列的列号可能会改变，因此请谨慎使用。 - Sunil Garg

Answer 5

对于这些目的，我根据实际需要使用 CellActions 或者 RowActions 插件，并通过它来处理单元格点击事件。

如果你想要一个看起来像锚点的东西，可以使用 <span> 并按照 @bmoeskau 的建议进行操作。

- Igor Pavelek

Answer 6

您可以使用“renderer”函数将任何HTML包含在单元格中。

- Thevs

Answer 7

感谢大家的回复。 在调试extJS-all.js脚本后，我发现问题出在服务器端。

在我的Spring MVC控制器中，我将模型设置为会话，这在我之前提到的用例中，用于将Ext.data.XmlStore的“totalProperty”重置为0，因此后续对网格的访问将显示空记录。

这是因为，ext-JS网格在迭代数据存储记录之前检查“totalProperty”值。在我的情况下，数据存储器具有数据，但大小被重置为null，因此问题出现了。

再次感谢大家的建议！

- PaiS