jqgrid樹狀網格顯示用戶自定義圖標

第一張圖片是使用jqGrid樹狀網格的結果。圖標是默認設置，非葉子項目以「倒三角形」開始，葉子項目以「o」開頭。jqgrid樹狀網格顯示用戶自定義圖標

如何設置，使像第二張圖片顯示的結果，我可以每行設置不同的圖標？

2017-05-31 Lisa

所述的TreeGrid的輸入數據可以包含icon屬性與類名，其中指定樹的葉的圖標。節點屬性的值應該包含兩個類：一個用於擴展節點，另一個用於摺疊節點。例如

[ 
    { ... 
     level: "0", parent: "null", isLeaf: false, expanded: true, loaded: true, 
     icon: "ui-icon-folder-open,ui-icon-folder-collapsed" }, 
    { ... 
     level: "1", parent: "1", isLeaf: true, expanded: false, loaded: true, 
     icon: "ui-icon-flag" }, 
    { ... 
     level: "2", parent: "2", isLeaf: true, expanded: false, loaded: true, 
     icon: "ui-icon-star" }, 
    ... 
]

演示https://jsfiddle.net/OlegKi/4svafpub/3/演示的TreeGrid，顯示

你不貼你做什麼，任何細節。沒有使用jqGrid的版本，沒有關於jqGrid的分支（free jqGrid，商業Guriddo jqGrid JS或版本< = 4.7中的舊jqGrid）的信息。您不知道使用哪種CSS框架：jQuery UI或Bootstrap以及哪些圖標集（jQuery UI圖標，Font Awesome 4.x，Bootstrap的字形圖標...）。您的要求的確切實施取決於信息。無論如何，您必須從一組圖標中選擇圖標類，您可以使用這些圖標類，也可以定義用於TreeGrid節點和葉子的自定義CSS類，並定義CSS規則，這些規則指定了所有必需的CSS屬性：background-image，background-position等。因此，您將能夠顯示您需要的任何圖標。

已更新：在我看來，icon將只用於葉子，而不是如上所述的節點。

更新2：我對免費jqGrid的代碼做了一些更改，現在可以指定TreeGrid節點的圖標。有免費的jqGrid的更新版本相同的代碼顯示

觀看演示https://jsfiddle.net/OlegKi/4svafpub/4/

來源

2017-05-31 08:00:48 Oleg

我用免費的jqGrid，版本爲4.5.2。我計劃使用jQuery UI圖標。我試着按照你的演示。我認爲這可以滿足當前的要求。非常感謝〜 – Lisa

@Lisa：不客氣！「免費jqGrid」是產品上的名稱。「jqGrid」只存在於4.7版本中。之後，Tony Tomov將產品的名稱改爲「Guriddo jqGrid JS」（請參閱[此處]（http://www.trirand.com/blog/?p=1438）），更改了許可協議並使產品商業化（參見價格[here]（http://guriddo.net/?page_id=103334））。之後，我開始在名爲[「free jqGrid」]（http://guriddo.net/?page_id=103334）下開發jqGrid的fork。因此，您可以使用該產品的當前復古版本（4年），該版本不存在且不受支持。 – Oleg

@Lisa：我建議你升級到免費的jqGrid 4.14.1，它有許多新功能，錯誤修復和性能改進。它與jqGrid 4.5.2兼容。您可以直接從CDN加載免費的jqGrid文件（請參閱[wiki文章]（https://github.com/free-jqgrid/jqGrid/wiki/Access-free-jqGrid-from-different-CDNs））。我建議您另外閱讀[文章]（https://free-jqgrid.github.io/getting-started/index.html）。 – Oleg

jqgrid樹狀網格顯示用戶自定義圖標

回答

相關問題