我有一个 jqgrid treegrid 单元格,我希望在具有链接和其他 html 格式的单元格内包含内容。
这可能与 jqgrid treegrid 吗?我没有看到文档中提到的任何内容
您从 jqGrid 中了解到的大多数具有简单表数据的东西对于树形网格仍然有效。因此,您可以使用自定义格式化程序或自定义属性格式化程序 ( cellattr
) 将 HTML 放置在单元格中。如果需要,您可以在 JSON 或 XML 输入中放置 HTML 片段。
看小demo:
唯一重要的是要了解,树形网格不支持数据分页,因此您应该将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"]}
]
}
实现这一点的更好方法是使用自定义格式化程序,只需编写一个简单的函数来添加您需要的 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
查看它生成的 HTML 源代码。如果它只是一个<table>
对象,我怀疑它是,那么你可以把任何你想要的 HTML 放在那里。