有可能有一个jqgrid treegrid单元格内的HTML [英] is it possible to have html inside of a jqgrid treegrid cell
问题描述
我有一个jqgrid treegrid单元格，我想要有一个链接和其他html格式的单元格内的内容。
使用jqgrid treegrid可能吗？我没有看到文档中提到的任何东西。
jqGrid拥有简单表格数据的大部分内容仍然适用于树网格。因此，您可以使用自定义格式化程序或自定义属性格式化程序（ cellattr ）将HTML放入单元格中。您可以根据需要将HTML片段放入JSON或XML输入中。
请看小演示： b
$ b
只有重要的是要明白，树形网格不支持数据分页，所以你应该将 rowNum 参数设置为足够大的值，例如10000.
我建议您检查树网格包含。您会看到隐藏的列'level'，'parent'，'isLeaf'，'expanded'，'loaded'和'icon'作为最后的网格列。此外，您会看到所有树节点（展开的和未展开的）都已添加到网格中。尚未扩展的节点只是隐藏的。
演示中使用的树形网格代码是
<$ p $ jqGrid（{
url：'AdjacencyTreeWithHTML.json'，
datatype：'json'，
mtype：'GET' ，
colNames：[ID，'< span style =color：Tomato>描述< / 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'，
标题：TreeGrid测试
}）;
其中'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'gt; Google< / a>，100，1，1，假，假， ]}，
{id：3，cell：[3，Sub Item 1，50，2，2，true ，true]}，
{id：4，cell：[4，Sub Item 2，25，2，2 ，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 =背景色：浅绿;颜色：番茄'>项目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]}
]
}
i have a jqgrid treegrid cell and i want to have content inside of a cell that has links and other html formatting.
is this possible with jqgrid treegrid ? I don't see anything mentioned in the documentation
The most things which you know from jqGrid having simple table data still valid for the tree grid. So you can use custom formatters or custom attribute formatter (cellattr) to place HTML in the cells. You can place HTML fragments in the JSON or XML input if needed.
Look at the small demo:
It is only important to understand, that the tree grid don't support data paging, so you should set rowNum parameter to the large enough value like 10000.
I recommend you to examine the tree grid contain. You will see hidden columns 'level', 'parent', 'isLeaf', 'expanded', 'loaded' and 'icon' as the last grid columns. Moreover you will see that all tree nodes (expanded and not expanded) are already added to the grid. Not yet expanded nodes are just hidden.
The code of the tree grid used in the demo is
$("#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"
});
where '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"]}
]
}
这篇关于有可能有一个jqgrid treegrid单元格内的HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
