jqGrid - 插入自定義HTML到單元格

Question

我想將普通的舊HTML錶轉換爲jqGrid。舊錶具有包含使用無序列表和列表項構建的標籤的列。

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

在這個例子中我使用的是custom formatter其使用jQuery Templates構建DOM元素，然後格式化返回$ html的（）從得到的DOM元素。

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

我這樣做的問題是包含在生成的html中的空白導致行太高。這也會導致單元格上的標題「尷尬」。

jqGrid是否提供了一個用於直接將DOM對象插入到單元格中的API，而不是通過從自定義格式化程序返回文本？將自定義html放入jqGrid單元格的最佳做法是什麼？

Answer 1

我發現你的問題非常有趣，所以我的問題+1。

使用自定義格式化程序的主要理解問題是：它要求您的回調函數返回HTML片段作爲字符串。它的好處是性能好，大部分可以在大型電網上看到。如果你使用DOM元素並使用像domitems.html()這樣的構造，你將不會有那麼好的性能。

所以首先我會推薦你​​使用jQuery模板的$.template函數。它允許您使用字符串而不使用DOM。例如The answer描述了修改代碼的主要思想。

要解決您的主要問題，我建議您只需從字符串中刪除\n和withespaces。我不是正則表達式的專業，所以我建議以下快速和骯髒的解決方案：如修改後

// 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。