jqGrid - Einfügen von benutzerdefinierten HTML in Zelle

Question

Ich versuche, eine einfache alte HTML-Tabelle in ein jqGrid zu konvertieren. Die alte Tabelle enthält eine Spalte mit Tags, die mit einer ungeordneten Liste und Listenelementen erstellt wurden.

Here is an example (jsfiddle) der Tabelle vor und die jqGrid nach.

In diesem Beispiel verwende ich eine custom formatter, die jQuery Templates verwendet, um DOM-Elemente zu erstellen, und der Formatierer gibt dann die $ .html() aus den resultierenden DOM-Elementen zurück.

Das Problem, das ich dabei hatte, ist, dass Whitespace in den resultierenden HTML-Code verursacht die Zeilen zu hoch sein. Dies führt auch zu unangenehmen "Title" -Attributen auf den Zellen.

Bietet das jqGrid eine API zum direkten Einfügen von DOM-Objekten in die Zelle, anstatt Text vom benutzerdefinierten Formatierer zurückzuliefern? Was ist die beste Vorgehensweise, um angepasstes HTML in eine jqGrid-Zelle zu platzieren?

Answer 1

Ich finde Ihre Frage sehr interessant und so +1 von mir für die Frage.

Das wichtigste Verständnisproblem bei der Verwendung von benutzerdefinierten Formatierer ist: Es erfordert, dass Ihre Rückruffunktion HTML-Fragment als Zeichenfolge zurückgeben. Der Vorteil ist eine gute Leistung, die man vor allem auf dem großen Raster sehen kann. Wenn Sie mit DOM-Elementen arbeiten und Konstrukte wie domitems.html() verwenden, werden Sie nicht so gute Leistung haben.

Also zuerst würde ich Ihnen empfehlen, $.template Funktion von jQuery Vorlagen zu verwenden. Es ermöglicht Ihnen, mit Zeichenfolgen ohne Verwendung von DOM zu arbeiten. The answer zum Beispiel beschreibt die Grundidee der Änderung Ihres Codes.

Um Ihr Hauptproblem zu beheben, empfehle ich, nur \n und Withespaces aus der Zeichenfolge zu entfernen. Ich bin nicht RegEx Profi so schlage ich vor, die folgende quick and dirty Lösung:

// 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,'><'); 
} 

Ihre jsfiddle Demo the following nach einer solchen Modifikation sein wird.