Привязать jqGrid к объекту JSON - PullRequest
Новая
       30

Привязать jqGrid к объекту JSON

1 голос
/ 31 августа 2011

Как связать простой JSON-объект с jqGrid?

Вот что у меня есть: 

    var tableSrc = { "page":"1", "total":1, "records":"3", "rows": [
        { "title": "Title1", "subtitle": "subTitle", "authors": ["a1", "a2", "a3"] },
        { "title": "Title2", "subtitle": "subtitle", "authors": ["X", "Y"] },
        { "title": "Title3", "subtitle": "subTitle", "authors": ["1", "2", "3", "4"]}]
    };

    $(".jqGridTarget").jqGrid({
        datastr: tableSrc,
        datatype: "jsonstring",
        colNames: ['title', 'subtitle'],
        colModel: [
            { name: 'title', index: 'title', width: 55 },
            { name: 'subtitle', index: 'subtitle', width: 90}]
    });

А затем: 

<table class="jqGridTarget">
</table>

Это даетошибка:

Uncaught Синтаксическая ошибка, нераспознанное выражение: # внутри jQuery 1.6.2

Я также пытался использовать json вместо jsonstring с заменой данных datastr.Это устраняет ошибку, но сетка все еще пуста.В обоих случаях появляется неопределенное или мигает в теле сетки.

РЕДАКТИРОВАТЬ

Я также пробовал тип данных: "local" с tableSrc в качестве данных.Нет ошибки или не определено, но все еще нет данных в сетке.

END EDIT

Кроме того, вот файлы сценария / CSS, на которые я ссылался: 

<script type='text/javascript' src='jquery.min.js'></script>
<script type='text/javascript' src='jquery.tmpl.js'></script>
<script type='text/javascript' src='jquery.jqGrid.min.js'></script>
<script type='text/javascript' src='knockout-1.2.1.js'></script>
<link rel="Stylesheet" type="text/css" href="ui.jqgrid.css" />

Ответы [ 2 ]

2 голосов
/ 31 августа 2011

Для того, чтобы ваш код работал, требуется три изменения (см. здесь исправленная демоверсия):

  1. добавить параметр jsonReader: {repeatitems: false} `
  2. добавить и id к элементу <table>
  3. включает i18n/grid.locale-en.js до jquery.jqGrid.min.js

Кроме того, я бы рекомендовал вам всегда использовать gridview: true и в большинстве случаев определить height как height: 'auto'.

1 голос
/ 31 августа 2011

Я думаю, что вы ищете datatype: 'local' и data: tableSrc.

datatype: определяет, какой тип информации следует ожидать для представления данных в сетке. Допустимые параметры: xml - мы ожидаем данные xml; xmlstring - мы ожидаем данные XML в виде строки; json - ожидаем данные JSON; jsonstring - мы ожидаем данные JSON в виде строки; local - мы ожидаем данные, определенные на стороне клиента (данные массива); javascript - мы ожидаем javascript как данные; function - пользовательская функция для извлечения данных.

data: массив, в котором хранятся локальные данные, передаваемые в сетку. Вы можете напрямую указать на эту переменную в случае, если вы хотите загрузить массив данных. Он может заменить метод addRowData, который медленно работает с относительно большими данными

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

...