Загружать локальные данные JSON в jQgrid без AddJsonRows

Я использую метод addJsonRows для добавления локальных данных в jQgrid. Поскольку этот метод отключает сортировку, мне нужно другое решение. Одно ограничение: я не могу установить URL-адрес и получить данные с сервера, потому что данные были переданы через другой компонент.

Под фрагментом просветляется случай. Прокомментированная строка показывает ограничение, я заменил его, указав локальную переменную, чтобы иметь тестовый пример.

<script type="text/javascript" language="javascript">
    function loadPackageGrid() {
    // Get package grid data from hidden input.
    // var data = eval("("+$("#qsmId").find(".qsm-data-packages").first().val()+")");
        var data =  {
            "page": "1",
            "records": "2",
            "rows": [
                { "id": "83123a", "PackageCode": "83123a" },
                { "id": "83566a", "PackageCode": "83566a" }
            ]
        };

        $("#packages")[0].addJSONData(data);
    };

    $(document).ready(function() {
        $("#packages").jqGrid({
            colModel: [
                { name: 'PackageCode', index: 'PackageCode', width: "110" },
                { name: 'Name', index: 'Name', width: "300" }
            ],
            pager: $('#packagePager'),
            datatype: "local",
            rowNum: 10000,
            viewrecords: true,
            caption: "Packages",
            height: 150,
            pgbuttons: false,
            loadonce: true
        });
    });
</script>

Интересно, как я мог сделать это другим способом (лучше), чтобы сохранить функцию сортировки. Я попробовал что-то с опцией данных, без результата.

Ответ 1

Я полагаю, что тот же вопрос интересен другим людям. Так что +1 от меня за вопрос.

Вы можете решить проблему, по крайней мере, двумя способами. Первый из них можно использовать тип данных: "jsonstring" и datastr: data. В случае, если вам нужно добавить дополнительный параметр jsonReader: { repeatitems: false }.

Второй способ - использовать datatype: "local" и data: data.rows. В случае, если localReader будет использоваться для чтения данных из массива data.rows. По умолчанию localReader может считывать данные.

Соответствующие демонстрации здесь и здесь.

Я немного изменил ваши данные: заполнил столбец "Имя" и включил третий элемент во входные данные.

Теперь вы можете использовать локальный пейджинг, сортировку и фильтрацию/поиск данных. Я включил немного кода для демонстрации возможностей. Ниже вы найдете код одного из демонстраций:

$(document).ready(function () {
    'use strict';
    var data = {
            "page": "1",
            "records": "3",
            "rows": [
                { "id": "83123a", Name: "Name 1", "PackageCode": "83123a" },
                { "id": "83432a", Name: "Name 3", "PackageCode": "83432a" },
                { "id": "83566a", Name: "Name 2", "PackageCode": "83566a" }
            ]
        },
        grid = $("#packages");

    grid.jqGrid({
        colModel: [
            { name: 'PackageCode', index: 'PackageCode', width: "110" },
            { name: 'Name', index: 'Name', width: "300" }
        ],
        pager: '#packagePager',
        datatype: "jsonstring",
        datastr: data,
        jsonReader: { repeatitems: false },
        rowNum: 2,
        viewrecords: true,
        caption: "Packages",
        height: "auto",
        ignoreCase: true
    });
    grid.jqGrid('navGrid', '#packagePager',
        { add: false, edit: false, del: false }, {}, {}, {},
        { multipleSearch: true, multipleGroup: true });
    grid.jqGrid('filterToolbar', { defaultSearch: 'cn', stringResult: true });
});

ОБНОВЛЕНО. Я решил добавить дополнительные сведения о различиях между сценариями datatype: "jsonstring" и datatype: "local", потому что старый ответ читается и проголосован многими читателями.

Я предлагаю немного изменить приведенный выше код, чтобы лучше показать различия. В первом кубе используется datatype: "jsonstring"

$(function () {
    "use strict";
    var data = [
            { id: "10", Name: "Name 1", PackageCode: "83123a", other: "x", subobject: { x: "a", y: "b", z: [1, 2, 3]} },
            { id: "20", Name: "Name 3", PackageCode: "83432a", other: "y", subobject: { x: "c", y: "d", z: [4, 5, 6]} },
            { id: "30", Name: "Name 2", PackageCode: "83566a", other: "z", subobject: { x: "e", y: "f", z: [7, 8, 9]} }
        ],
        $grid = $("#packages");

    $grid.jqGrid({
        data: data,
        datatype: "local",
        colModel: [
            { name: "PackageCode", width: 110 },
            { name: "Name", width: 300 }
        ],
        pager: "#packagePager",
        rowNum: 2,
        rowList: [1, 2, 10],
        viewrecords: true,
        rownumbers: true,
        caption: "Packages",
        height: "auto",
        sortname: "Name",
        autoencode: true,
        gridview: true,
        ignoreCase: true,
        onSelectRow: function (rowid) {
            var rowData = $(this).jqGrid("getLocalRow", rowid), str = "", p;
            for (p in rowData) {
                if (rowData.hasOwnProperty(p)) {
                    str += "propery \"" + p + "\" + have the value \"" + rowData[p] + "\n";
                }
            }
            alert("all properties of selected row having id=\"" + rowid + "\":\n\n" + str);
        }
    });
    $grid.jqGrid("navGrid", "#packagePager",
        { add: false, edit: false, del: false }, {}, {}, {},
        { multipleSearch: true, multipleGroup: true });
    $grid.jqGrid("filterToolbar", { defaultSearch: "cn", stringResult: true });
});

Отображается (см. демо)

Можно увидеть несортированные элементы в том же порядке, что и входные данные. Элементы входных данных будут сохранены во внутренних параметрах data и _index. getLocalRow метод, используемый в onSelectRow, показывает, что элементы внутреннего data содержат только свойства входных элементов, имена которых соответствуют свойству name некоторых столбцов jqGrid. Кроме того, будет добавлено ненужное свойство _id_.

С другой стороны следующее демо, которое использует datatype: "local", отображает отсортированные данные и все свойства, включающие сложные объекты будет сохранен во внутреннем data:

Код, используемый в последней демонстрации, приведен ниже:

$(function () {
    "use strict";
    var data = [
            { id: "10", Name: "Name 1", PackageCode: "83123a", other: "x", subobject: { x: "a", y: "b", z: [1, 2, 3]} },
            { id: "20", Name: "Name 3", PackageCode: "83432a", other: "y", subobject: { x: "c", y: "d", z: [4, 5, 6]} },
            { id: "30", Name: "Name 2", PackageCode: "83566a", other: "z", subobject: { x: "e", y: "f", z: [7, 8, 9]} }
        ],
        $grid = $("#packages");

    $grid.jqGrid({
        data: data,
        datatype: "local",
        colModel: [
            { name: "PackageCode", width: 110 },
            { name: "Name", width: 300 }
        ],
        pager: "#packagePager",
        rowNum: 2,
        rowList: [1, 2, 10],
        viewrecords: true,
        rownumbers: true,
        caption: "Packages",
        height: "auto",
        sortname: "Name",
        autoencode: true,
        gridview: true,
        ignoreCase: true,
        onSelectRow: function (rowid) {
            var rowData = $(this).jqGrid("getLocalRow", rowid), str = "", p;
            for (p in rowData) {
                if (rowData.hasOwnProperty(p)) {
                    str += "propery \"" + p + "\" + have the value \"" + rowData[p] + "\"\n";
                }
            }
            alert("all properties of selected row having id=\"" + rowid + "\":\n\n" + str);
        }
    });
    $grid.jqGrid("navGrid", "#packagePager",
        { add: false, edit: false, del: false }, {}, {}, {},
        { multipleSearch: true, multipleGroup: true });
    $grid.jqGrid("filterToolbar", { defaultSearch: "cn", stringResult: true });
});

Поэтому я бы рекомендовал использовать datatype: "local" вместо datatype: "jsonstring". datatype: "jsonstring" может иметь некоторые преимущества только в некоторых очень специфических сценариях.

Ответ 2

Используя функцию beforeSubmit(), вы можете вмешиваться между jqgridattempting, отправляя данные на сервер, при добавлении, редактировании и удалении строк.

Используя опцию функции beforeSubmit(), вы можете фиксировать опубликованные данные при добавлении новой строки и обновлять локальные данные JSON.

beforeSubmit: function (postdata, formid) {

// capture posted data, create JOSN item and add to the JSON array.
customersData.push({ id: guid(), FirstName: postdata.FirstName, LastName: postdata.LastName, sendEmail: postdata.sendEmail });

// Refresh the grid, so that changes to the underlining 
// local data array is reflected in the grid. 
$('#customerGrid').jqGrid('setGridParam', { datatype: 'local', data: customersData }).trigger('reloadGrid');

// Close the dialog.
try {
      $(".ui-icon-closethick").trigger('click');
    }
    catch (ex) { }
    return [false, ''];
    }

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

Для полного решения вы можете просмотреть работу с локальными данными в jqgrid

Ответ 3

Отличный совет, Олег.

В моем веб-приложении я предварительно загрузил некоторые данные JSON, которые выглядели следующим образом:

    {
       WorkflowRuns: 
       [
           {
              WorkflowRunID: 1000,
              WorkflowRunName: "First record",
           },
           {
              WorkflowRunID: 1001,
              WorkflowRunName: "Second record",
           }
       ],
       UserInformation: 
       {
          Forename: "Mike",
          Surname: "Gledhill"
       }
}

И вот код, который мне нужен, чтобы создать jqGrid, только на основе части WorkflowRuns этого JSON:

var JSONstring = '{ WorkflowRuns: [ { WorkflowRunID: 1000, .. etc .. } ]';

$("#tblWorkflowRuns").jqGrid({
    datatype: "local",
    data: JSONstring.WorkflowRuns,
    localReader: {  
        id: "WorkflowRunID",
        repeatitems: false
    },
    ...
});

Это было немного проб и ошибок.

Например, jqGrid, казалось, игнорировал datastr: JSONstring для меня.

И обратите внимание на то, что с локальными данными мне нужно было использовать localReader, а не jsonReader, иначе он не будет правильно устанавливать идентификаторы строк.

Надеюсь, что это поможет.