2011-06-28 46 views

回答

7

您从jqGrid获得的具有简单表格数据的大部分内容仍然适用于树形网格。因此,您可以使用自定义格式化程序或自定义属性格式化程序(cellattr)将HTML放入单元格中。如果需要,您可以将HTML片段放置在JSON或XML输入中。

the small demo

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"]} 
    ] 
} 
+0

怎么样使用格式化的colmodel在客户端(而不是把你的HTML里面的json)? – leora

+0

@ooo:当然会更好。你的问题是“是否有可能在jqgrid treegrid单元格内有html?”这可以用不同的方式来解释。所以在我的例子中,我展示了将jqGrid单元格中的HTML放置在树形网格中的所有方法。不同的方式有哪些优点是另一个问题。我认为你已经有足够的经验与jqGrid,所以你知道的优点/缺点。 – Oleg

+0

感谢您的回复。 。我在客户端使用格式化程序,它似乎在伎俩。 。感谢您的帮助 – leora

0

看看它生成的HTML源代码。如果它只是一个<table>对象,我怀疑它是,那么你可以把任何你想要的HTML放在里面。

4

一种更好的方式来实现这一目标是通过使用自定义格式,只写一个简单的函数其中添加您需要的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

+0

woops,我没有注意到leora的进一步评论。 所有学分都属于她:) – Dariozzo

相关问题