jquery - 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经过这样的修改。