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

【问题标题】：is it possible to have html inside of a jqgrid treegrid cell是否可以在 jqgrid treegrid 单元格中包含 html
【发布时间】：2011-09-24 07:57:36
【问题描述】：

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

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

【问题讨论】：

标签： jquery html jqgrid treegrid

【解决方案1】：

实现这一点的更好方法是使用自定义格式化程序，只需编写一个添加所需 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

【讨论】：

哎呀，我没有注意到 leora 的更多 cmets。所有学分都属于她:)

【解决方案2】：

您从 jqGrid 中了解到的大多数具有简单表格数据的东西对于树形网格仍然有效。因此，您可以使用自定义格式化程序或自定义属性格式化程序 (cellattr) 将 HTML 放置在单元格中。如果需要，您可以在 JSON 或 XML 输入中放置 HTML 片段。

看the small demo：

唯一重要的是要了解，树形网格不支持数据分页，因此您应该将rowNum参数设置为足够大的值，例如10000。

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

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

$("#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"]}
    ]
}

【讨论】：

在客户端的 colmodel 中使用格式化程序怎么样（而不是把 html 放在你的 json 中）？？
@ooo：当然更好。您的问题是“是否可以在 jqgrid treegrid 单元格中包含 html？”这可以用不同的方式来解释。因此，在我的示例中，我展示了将 HTML 放置在 jqGrid 单元格中的所有方法都适用于树形网格。哪些优势有不同的方式是另一个问题。我想你已经有足够的 jqGrid 经验，所以你知道优点/缺点。
感谢您的回复。 .我在客户端使用格式化程序，它似乎可以解决问题。 .感谢您的帮助
@oleg，这个功能在 4.15.2 中被破坏了吗？在this 网格中，第一列的 html 来自 JSON 数据，但第二列是使用格式化程序创建的
@AaA：我试图保持与 jqGrid 以前版本的最小兼容性，但我必须进行最小的更改。例如，从 4.15.0 开始，我更改了 autoencode 选项的默认值，以防止在 默认情况下 阻止跨站点 Scipting (XSS)。我想您可以通过向 jqGrid 添加autoencode: false 选项来解决您的问题。要文本 XSS 错误，我建议您在编辑数据期间在网格中输入 <script>alert("hi!")</script>。

【解决方案3】：

查看它生成的 HTML 源代码。如果它只是一个 <table> 对象，我怀疑它是，那么你可以在其中放置任何你想要的 HTML。

【讨论】：