jqGrid - 将自定义 HTML 插入单元格

Question

我正在尝试将普通的旧 html 表转换为 jqGrid。旧表有一列包含使用无序列表和列表项构造的标签。

Here is an example (jsfiddle) 之前的表和之后的 jqGrid。

在本例中，我使用custom formatter，它使用jQuery Templates 构造DOM 元素，然后格式化程序从生成的DOM 元素中返回$.html()。

function getTagCellContents(cellvalue) {
    var domitems=$("#jqgrid-tag-list-item").tmpl({tags: callvalue});
    return domitems.html();
}

我遇到的问题是生成的 html 中包含的空格会导致行太高。这也会导致单元格上出现尴尬的“标题”属性。

jqGrid 是否提供 API 用于将 DOM 对象直接插入到单元格中，而不是通过从自定义格式化程序返回文本？将自定义 html 放入 jqGrid 单元格的最佳做法是什么？

Answer 1

我觉得你的问题很有趣，所以我为这个问题 +1。

使用自定义格式化程序的主要理解问题是：它要求您的回调函数返回HTML 片段作为字符串。它的好处是性能好，在大型网格上可以看到大部分。如果您使用 DOM 元素并使用 domitems.html() 之类的构造，则性能不会那么好。

所以首先我建议你使用 jQuery 模板的$.template 函数。它允许您在不使用 DOM 的情况下使用字符串。 The answer 例如描述了修改代码的主要思想。

为了解决您的主要问题，我建议从字符串中删除\n 和withespaces。我不是 RegEx 专业人士，所以我建议以下快速而肮脏的解决方案：

// Create and cache a named template function
$("#jqgrid-tag-list-item").template("cellContents");
var tmpl = $.template("cellContents"); // template function

function getTagCellContents(a) {
    var strings = tmpl($, {data: {tags: a}}); // array of strings
    return strings.join('')
               .replace(/\n+/g,'')
               .replace(/\s+/g,' ')
               .replace(/> </g,'><');
}

修改后你的 jsfiddle 演示为the following。