是否有可能有一個jqgrid treegrid單元格內的html

我有一個jqgrid treegrid單元格，我想有一個單元格內有鏈接和其他html格式的內容。是否有可能有一個jqgrid treegrid單元格內的html

這可能與jqgrid treegrid？我沒有看到文檔中提到的任何東西

2011-06-28 leora

您從jqGrid獲得的具有簡單表格數據的大部分內容仍然適用於樹形網格。因此，您可以使用自定義格式化程序或自定義屬性格式化程序（cellattr）將HTML放入單元格中。如果需要，您可以將HTML片段放置在JSON或XML輸入中。

enter image description here

這是理解唯一重要的，這棵樹網不支持數據分頁，所以你應該rowNum參數設置爲足夠大的值像10000

我建議你檢查樹網格包含。您將看到隱藏的列'level'，'parent','isLeaf','expanded','loaded'和'icon'作爲最後的網格列。此外，您會看到所有樹節點（展開的和未展開的）都已添加到網格中。尚未擴展的節點只是隱藏。

在演示中使用的樹網格的代碼是

$("#tree").jqGrid({ 
    url: 'AdjacencyTreeWithHTML.json', 
    datatype:'json', 
    mtype:'GET', 
    colNames: ["ID", '<span style="color:Tomato">Description</span>', "Total"], 
    colModel: [ 
     {name:'id', index:'id', width: 1, hidden: true, key: true}, 
     {name:'desc', width:180, sortable:false}, 
     {name:'num', width:80, sortable:false, align:'center', 
     cellattr: function (rowId, tv, rawObject, cm, rdata) { 
      return Number(tv) <=100 ? 'style="background-color:LightGreen"' : 
             'style="background-color:Tomato"'; 
     }} 
    ], 
    treeGridModel:'adjacency', 
    height:'auto', 
    rowNum: 10000, 
    treeGrid: true, 
    ExpandColumn:'desc', 
    caption:"TreeGrid Test" 
});

其中'AdjacencyTreeWithHTML.json'：

{ 
    "total": "1", 
    "page": "1", 
    "records": "2", 
    "rows": [ 
      {"id": "1", "cell": ["1", "Super <b>Item</b>",  "300", "0", "", "false", "true", "true"]}, 
      {"id": "2", "cell": ["2", "<a href='http://www.google.com'>Google</a>", "100", "1", "1", "false", "false", "true"]}, 
      {"id": "3", "cell": ["3", "Sub Item 1",  "50", "2", "2", "true", "true", "true"]}, 
      {"id": "4", "cell": ["4", "Sub Item 2",  "25", "2", "2", "false", "false", "true"]}, 
      {"id": "5", "cell": ["5", "Sub-sub Item 1", "25", "3", "4", "true", "true", "true"]}, 
      {"id": "6", "cell": ["6", "Sub Item 3",  "25", "2", "2", "true", "true", "true"]}, 
      {"id": "7", "cell": ["7", "<span style='background-color:LightGreen; color:Tomato'>Item 2</span>", "200", "1", "1", "false", "true", "true"]}, 
      {"id": "8", "cell": ["8", "Sub Item 1",  "100", "2", "7", "false", "false", "true"]}, 
      {"id": "9", "cell": ["9", "Sub-sub Item 1", "50", "3", "8", "true", "true", "true"]}, 
      {"id": "10", "cell": ["10", "Sub-sub Item 2", "50", "3", "8", "true", "true", "true"]}, 
      {"id": "11", "cell": ["11", "Sub Item 2",  "100", "2", "7", "true", "true", "true"]} 
    ] 
}

來源

2011-06-28 15:33:50 Oleg

怎麼樣使用格式化的colmodel在客戶端（而不是把你的HTML裏面的json）？ – leora

@ooo：當然會更好。你的問題是「是否有可能在jqgrid treegrid單元格內有html？」這可以用不同的方式來解釋。所以在我的例子中，我展示了將jqGrid單元格中的HTML放置在樹形網格中的所有方法。不同的方式有哪些優點是另一個問題。我認爲你已經有足夠的經驗與jqGrid，所以你知道的優點/缺點。 – Oleg

感謝您的回覆。。我在客戶端使用格式化程序，它似乎在伎倆。。感謝您的幫助 – leora

看看它生成的HTML源代碼。如果它只是一個<table>對象，我懷疑它是，那麼你可以把任何你想要的HTML放在裏面。

來源

2011-06-28 13:55:41 Chriszuma

一種更好的方式來實現這一目標是通過使用自定義格式，只寫一個簡單的函數其中添加您需要的HTML，如下所示：

function leadForm(cellvalue,options,rowObject){ 
    return '<span style="color:#F00">'+cellvalue+'</span>' 
}

並將其鏈接到細胞在colmodel，作爲參考

鏈接解釋參考： http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter

來源

2013-05-13 09:59:26 Dariozzo

woops，我沒有注意到leora的進一步評論。所有學分都屬於她:) – Dariozzo

是否有可能有一個jqgrid treegrid單元格內的html

回答

相關問題