jqGrid-вставить Пользовательский HTML в ячейку

Я пытаюсь преобразовать простую старую таблицу html в jqGrid. В старой таблице есть столбец, содержащий теги, которые построены с использованием неупорядоченного списка и элементов списка.

вот пример (jsfiddle) таблицы до и после jqGrid.

в этом примере я использую пользовательский модуль форматирования использует Шаблоны jQuery для построения элементов DOM, а затем форматер возвращает $.html () из результирующего элемент DOM.

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

проблема, с которой я столкнулся, заключается в том, что пробелы, включенные в результирующий html, вызывают слишком высокие строки. Это также приводит к неудобным атрибутам "Title" на ячейках.

предоставляет ли jqGrid API для вставки объектов DOM непосредственно в ячейку, а не путем возврата текста из пользовательского форматера? Какова наилучшая практика размещения настраиваемого html в ячейку jqGrid?

7
cell jqgrid jquery jquery-templates

1 ответов

Я нахожу ваш вопрос очень интересным и поэтому +1 от меня за вопрос.

основная проблема понимания с использованием пользовательского форматирования: требуется, чтобы ваша функция обратного вызова возвращала фрагмент HTML в строке. Преимущество этого-хорошая производительность,которую можно увидеть в основном на большой сетке. Если вы работаете с элементами DOM и используете такие конструкции, как domitems.html() у вас будет не очень хорошее представление.

поэтому, прежде всего, я бы рекомендовал вам использовать $.template функция шаблонов jQuery. Это позволяет работать со строками без использования DOM. ответ например описывает основную идею модификации вашего кода.

чтобы исправить вашу основную проблему, я предлагаю просто удалить \n и withespaces из строки. Я не профессионал 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 будет следующее после такой модификации.

7