如何爲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添加一行超鏈接？

回答

相關問題