是否可以在 jqgrid treegrid 单元格中包含 html

2022-01-19 00:00:00 jquery html jqgrid treegrid

我有一个 jqgrid treegrid 单元格，我想在一个单元格内包含链接和其他 html 格式的内容.

i have a jqgrid treegrid cell and i want to have content inside of a cell that has links and other html formatting.

这可能与 jqgrid treegrid 吗?我没有看到文档中提到的任何内容

is this possible with jqgrid treegrid ? I don't see anything mentioned in the documentation

推荐答案

你从 jqGrid 中知道的大多数事情，只有简单的表数据仍然适用于树形网格.因此，您可以使用自定义格式化程序或自定义属性格式化程序 (cellattr) 将 HTML 放置在单元格中.如果需要，您可以在 JSON 或 XML 输入中放置 HTML 片段.

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.

看小演示:

只需要了解，树形网格不支持数据分页，所以你应该将rowNum参数设置为足够大的值，比如10000.

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.

我建议您检查树网格包含.您将看到隐藏列 'level'、'parent'、'isLeaf'、'expanded'、'loaded' 和 'icon' 作为最后一个网格列.此外，您将看到所有树节点(扩展和未扩展)都已添加到网格中.尚未展开的节点只是隐藏起来.

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.

demo中使用的树形网格的代码是

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"
});

其中 '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"]}
    ]
}

相关文章