jqGrid - поиск панели инструментов с автозаполнением с сервера - с использованием json

Question

После рассмотрения этих 2 вопросов и отличных ответов Олега

может jqgrid поддерживать выпадающие списки в полях фильтра панели инструментов

Поиск на панели инструментов jqGrid с автозаполнением по данным json

Я пытаюсь реализовать эту функцию с автозаполнением поиска на панели инструментов jQgrid с данными json, поступающими с сервера.

Мой код:

    myGrid.jqGrid({
    url: './WebService.asmx/ViewNQueryData',
    datatype: 'json',
    mtype: 'POST',
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
    serializeGridData: function (postData) {
        if (postData.filters === undefined) postData.filters = null;
        return JSON.stringify(postData);
    },
    jsonReader: {
        root: function (obj) { return obj.d.rows; },
        page: function (obj) { return obj.d.page; },
        total: function (obj) { return obj.d.total; },
        records: function (obj) { return obj.d.records; }
    },
    colModel: columnModel,
    colNames: columnNames,
    rowNum: 10,
    rowList: [10, 20, 300],
    sortname: 'ID',
    sortorder: "asc",
    sortable: true,
    pager: "#ViewNQueryPager",
    viewrecords: true,
    gridview: true,
    height: 250,
    shrinkToFit: true,//If using frozen coulmns change to false.
    grouping: true,
    groupingView: {
        groupField: ['ID'],
        //groupColumnShow: [false],
        //groupText: ['<b>{0} - {1} Item(s)</b>'],
        groupSummary: [true],
        groupOrder: ['asc'],
        groupDataSorted: true,
        showSummaryOnHide: true
    },
    footerrow: true,
    userDataOnFooter: true,
    gridComplete: function () {
        $('#totalRecordsFound').html(myGrid.jqGrid('getGridParam', 'records') + " Customers");
    },
    loadError: function () {
        alert("Error fetching data");
    }
}).jqGrid('navGrid', '#ViewNQueryPager',
                { edit: false, add: false, del: false, search: true, view: true }, //option
                {}, // use default settings for edit
                {}, // use default settings for add
                {}, // delete instead that del:false we need this
                {multipleSearch: true, multipleGroup: true, showQuery: true, onSearch: function (response) { showQueryDetails(); } },
                { height: 250, jqModal: false, closeOnEscape: true} // view options
                );

myGrid.jqGrid('setColProp', 'FirstName',
        {
            searchoptions: {
                sopt: ['cn'],
                dataInit: function (elem) {
                    $(elem).autocomplete({
                        source: './WebService.asmx/ViewNQueryData',
                        minLength: 1
                    });
                }
            }
        });

myGrid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true });

Но когда я набираю в окне поиска, запрос не попадает на мой веб-сервис, и я получаю исключение в браузере, что он пытается это сделать:

http://localhost:50949/WebService.asmx/ViewNQueryData?term=p

но:
Не удалось загрузить ресурс: сервер ответил со статусом 500 (Внутренняя ошибка сервера)

Мой веб-сервис:

public JqGridData ViewNQueryData(int page, int rows, string sidx, string sord, bool _search, string filters)
{

    if (_search && !String.IsNullOrEmpty(filters))
    {
        JavaScriptSerializer serializer = new JavaScriptSerializer();
        jqGridSearchFilter searchFilter =
            serializer.Deserialize<jqGridSearchFilter>(filters);
        // use the searchFilter here
    }
    List<Person> allGridRows = JsonHelper.GetPersons();
    int recordsCount = allGridRows.Count;

    int startIndex = (page - 1) * rows;
    int endIndex = (startIndex + rows < recordsCount) ?
                   startIndex + rows : recordsCount;

    List<TableRow> gridRowsForResponse = new List<TableRow>(rows);
    for (int i = startIndex; i < endIndex; i++)
    {
        gridRowsForResponse.Add(new TableRow()
        {
            id = i,
            cell = new List<string>(3) {
                allGridRows[i].ID.ToString(),
                allGridRows[i].FirstName,
                allGridRows[i].LastName
        }
        });
    }

    return new JqGridData()
    {
        total = (recordsCount + rows - 1) / rows,
        page = page,
        records = recordsCount,
        rows = gridRowsForResponse
    };
}

Что я делаю не так? что-то упустил? И что мне нужно вернуть с сервера? обычный JSON, который нужен сетке?

Answer 1

Ошибка в том, что вы используете один и тот же URL './WebService.asmx/ViewNQueryData' для автозаполнения jQuery UI и для основной сетки url.

Основная сетка url должна вызывать веб-метод с параметрами (int page, int rows, string sidx, string sord, bool _search, string filters)и вернуть данные JSON в формате

{
    "d": {
        "__type": "JqGridData",
        "total": 3,
        "page": 1,
        "records": 24,
        "rows": [
            {"id": 10, "cell": ["1", "Prabir", "Shrestha"]},
            {"id": 20, "cell": ["2", "Scott", "Gu"]},
            {"id": 43, "cell": ["4", "Bill", "Gates"]}
        ]
    }
}

С другой стороны, веб-метод автозаполнения пользовательского интерфейса jQuery должен иметь только один входной параметр term и вернуть данные в формате, подобном

["Bill", "Scott"]

или

[
    {
        "label": "Crab-Plover",
        "value": "Crab-Plover"
    },
    {
        "id": "Oenanthe isabellina",
        "label": "Isabelline Wheatear",
        "value": "Isabelline Wheatear"
    }
]

См. «Datamodel» часть jQuery UI Autocomplete документация .

Поскольку вы используете веб-сервисы ASMX, которые переносят возвращаемыйДанные JSON в свойстве d ({d:{...}}) необходимо использовать некоторые дополнительные модификации, чтобы предоставить данные для автозаполнения пользовательского интерфейса jQuery в одном из поддерживаемых форматов.Например, вы можете использовать параметр source автозаполнения в форме обратного вызова вместо простой строки URL.См. ответ (или этот ), например.