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

Question

我试图将一个普通的旧html表转换为jqGrid.旧表有一个包含标签的列,这些标签使用无序列表和列表项构建.

这是前面表格的一个例子(jsfiddle)和之后的jqGrid.

在这个例子中,我使用自定义格式化程序,它使用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单元格的最佳做法是什么？

Answer 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演示将如下所示.