如何为extJS Grid添加一行超链接？

有人可以抛出一些关于如何去渲染ExtJS中特定列的单元格中的超链接吗？我已经试过了列绑定到我的JS渲染功能，从中我发回的HTML：如何为extJS Grid添加一行超链接？

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

然而，与此相关，问题是，一旦我打控制器通过该链接时，导航是成功的，但随后导航到数据网格只显示空记录。

这些记录得到获取从DB顺利通过Spring MVC控制器，我已经检查。

请注意，这只会发生一次我用的行中的超链接ExtJS的电网导航从电网路程。如果我来到网格，并在别处导航并再次返回到网格，则数据显示正常。这个问题只发生在从网格导航的情况下，使用在一个/任何单元格中呈现的超链接。

感谢您的帮助！

来源

2010-07-26 PaiS

我创建渲染所以它看起来像你就可以点击。

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 
     } 
    } 
}

来源

2010-07-27 15:43:50 CrazyEnigma

好的答案，除了a）我认为'a'需要'href'看起来像一个链接，b）你宁愿比较你可以从'grid.getColumnModel（）。getDataIndex（column）'获得的字段名称。列索引。 – AndreKR 2011-07-12 22:20:30

使用列== 1并不是一种好的做法，就好像列排序或移动属性未设置为false，那么用户可以通过拖放重新排序列，因此列的列号可能会更改，因此请使用它谨慎 – SPidey 2017-03-02 10:34:35

而不是使用锚标记，我可能会使用简单的单元格内容看起来像一个锚点（使用基本的CSS），并处理GridPanel的事件来处理该操作。这可以避免处理锚的默认点击行为重新加载页面（这正是我所假设的）。

来源

2010-07-26 18:35:04

使用锚标记更好的语义标记。还可以节省使用CSS仔细复制诸如鼠标指针图标等细节。 – 2014-03-25 11:02:45

为了达到这些目的，我使用了CellActions或RowActions插件，具体取决于我实际需要的内容并处理单元格单击。

如果你想要的东西，看起来像一个锚，用<span>而不是做什么，@bmoeskau建议。

来源

2010-07-27 07:50:52

您可以使用“渲染”功能，输入您想进入小区的任何HTML。

来源

2010-07-27 12:46:26 Thevs

谢谢你们的回应。在调试extJS-all.js脚本时，我发现问题在服务器端。

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

这是因为，EXT-JS电网，检查“totalProperty”的价值，才通过从数据存储中的记录甚至迭代。在我的情况下，dataStore有数据，但大小重置为空，因此出现问题。

再次感谢您的投入！

来源

2010-07-28 08:21:25 PaiS

尝试是这样的：

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 Data Grid Column renderer to have multiple values

来源

2011-05-18 13:59:45 Vijay

这是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')); 
      } 
     } 
    } 
}

来源

2011-07-12 23:39:48 AndreKR

如何为extJS Grid添加一行超链接？

回答

相关问题