Создание атрибутов данных в строках таблицы с помощью jqGrid

Я пытаюсь прочитать информацию о подключаемом модуле jQuery jqGrid, но мне не хватает информации при беглом просмотре документация и демо.

Чего я хочу добиться, так это использовать некоторые части моих данных JSON для отображения в столбцах, а другие части — для создания атрибутов данных HTML5 в каждой строке таблицы. Однако я не могу понять, может ли jqGrid справиться с этим, и если да, то как.

Пример того, что я хочу сделать:

Из следующих данных (для удобочитаемости добавлены пробелы)

[
 {
     'id': 1, 
     'type': 0, 
     'name': 'first', 
     'address': '1524, 3rd street', 
     'X': 18.0068922, 
     'Y': 59.31076795
 },
 {
     'id': 7819, 
     'type': 0, 
     'name': 'not first', 
     'address': 'South Corner', 
     'X': 144.18457031, 
     'Y': -22.20774917
 }
]

Я хочу создать следующую таблицу:

<table>
    <thead>
        <th>Name</th>
        <th>Address</th>
    </thead>
    <tbody>
        <tr data-id="1" data-type="0" 
            data-x-coord="18.0068922" data-y-coord="59.3107695">
            <td>first</td>
            <td>1524, 3rd street</td>
        </tr>
        <tr data-id="7819" data-type="0"
            data-x-coord="144.18457031" data-y-coord="-22.20774917">
            <td>not first</td>
            <td>South Corner</td>
        </tr>
    </tbody>
</table>

Как видите, атрибуты данных могут называться так же, как и свойства в строке, а могут и не называться. Также, не показанные в этом примере, некоторые свойства будут использоваться как для отображения в таблице, так и для данных-атрибутов.

API, который предоставляет данные JSON, используется в другом месте, поэтому я не могу это изменить. Требования к атрибутам данных также определяются другим (самостоятельным) подключаемым модулем jQuery, используемым в другом месте, поэтому их также нельзя изменить.

Есть ли способ сделать это с помощью jqGrid? Если да, то как? Если нет, то какие варианты у меня есть?


person Tomas Aschan    schedule 30.12.2011    source источник


Ответы (1)


Вы можете использовать событие afterInsertRow для получения каждой вставленной строки. в сетку, а затем измените их по своему усмотрению (добавьте пользовательские атрибуты, используя jQuery.attr()).

person Arun P Johny    schedule 30.12.2011
comment
@TomasLycken: использование afterInsertRow замедляет обработку данных, потому что параметр gridview: true использовать нельзя. Лучше использовать loadComplete с исходными данными JSON в качестве параметра. Вы можете использовать jQuerx.data для размещения любых данных в элементах <td>. Кстати, вам не нужно устанавливать data-id. Вместо этого вы можете использовать id атрибут <td>. Проблема только в том, в каком формате вы возвращаете данные с сервера и какой jsonReader, который вы используете. - person Oleg; 30.12.2011
comment
@Oleg: afterInsertRow вместе с addRowData у меня отлично работает - я пробовал это с некоторыми реальными данными с сервера, и это более чем достаточно быстро. Это также позволяет мне избежать написания нового jsonReader для этого довольно сложного сопоставления, что хорошо, поскольку я впервые использую jqGrid :P. - person Tomas Aschan; 30.12.2011
comment
@TomasLycken: я не писал, что afterInsertRow не работает. Это просто медленно или очень медленно, если количество строк велико. Разницу легко объяснить. Если вы используете gridview: true, все тело сетки будет построено как один фрагмент строки HTML, а затем размещено на странице как одна операция. Если вы используете afterInsertRow, то каждая строка данных будет размещена отдельно. Если вы размещаете элемент на странице, веб-браузер должен обновить положение всех существующих элементов на странице. Это причина, по которой лучше не использовать afterInsertRow. - person Oleg; 30.12.2011
comment
@Oleg: Я понимаю, о чем ты говоришь, но я говорю, что у меня это работает нормально. По-видимому, мои наборы данных не очень велики (что меня не удивляет - самые большие из них будут состоять из 20 или 30 строк...). - person Tomas Aschan; 30.12.2011