7

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

这是之前的表格和之后的 jqGrid 的示例（jsfiddle）。

在这个例子中，我使用了一个自定义格式化程序，它使用jQuery 模板来构造 DOM 元素，然后格式化程序从生成的 DOM 元素中返回 $.html()。

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

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

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

4

1 回答 1

8

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

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

所以首先我会推荐你​​使用$.templatejQuery模板的功能。它允许您在不使用 DOM 的情况下使用字符串。例如，答案描述了修改代码的主要思想。

为了解决您的主要问题，我建议\n从字符串中删除和使用空格。我不是 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 演示将如下所示。

于 2013-09-11T09:44:14.773 回答