jqGrid - Wstaw niestandardowy kod HTML do komórki

Question

Próbuję przekonwertować zwykły stary tabel HTML na jqGrid. Stara tabela zawiera kolumnę zawierającą tagi, które są konstruowane przy użyciu nieuporządkowanej listy i elementów listy.

Here is an example (jsfiddle) z tabeli przed i jqGrid po.

W tym przykładzie używam custom formatter, który używa jQuery Templates do skonstruowania elementów DOM, a następnie formater zwraca $ .html() z wynikowych elementów DOM.

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

Problem z tym, że białe spacje zawarte w wynikowym html powodują, że wiersze są zbyt wysokie. Powoduje to również niezręczne atrybuty "Tytuł" na komórkach.

Czy jqGrid udostępnia interfejs API do wstawiania obiektów DOM bezpośrednio do komórki zamiast zwracania tekstu z niestandardowego formatyzatora? Jaka jest najlepsza praktyka umieszczania spersonalizowanego html w komórce jqGrid?

Answer 1

Uważam, że twoje pytanie jest bardzo interesujące, a więc +1 ode mnie na pytanie.

Główny problem z rozumieniem korzystania z formatowania niestandardowego: wymaga, aby funkcja zwrotna zwracała fragment HTML jako ciąg. Zaletą jest dobra wydajność, którą widać głównie na dużej sieci. Jeśli pracujesz z elementami DOM i używasz konstrukcji takich jak domitems.html(), nie będziesz mieć tak dobrej wydajności.

Przede wszystkim polecam Ci użycie funkcji $.template jQuery Templates. Umożliwia pracę z ciągami bez użycia DOM. The answer na przykład opisuje główną ideę modyfikacji kodu.

Aby naprawić główny problem, proponuję po prostu usunąć \n i withespace z napisu. Nie jestem RegEx profesjonalny więc proponuję następującą szybki i brudny roztwór:

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

Twój jsfiddle demo będzie the following po takiej modyfikacji.