(jqGrid) Отправка дополнительных пользовательских параметров на сервер - PullRequest
Новая
       32

(jqGrid) Отправка дополнительных пользовательских параметров на сервер

3 голосов
/ 10 июля 2010

У меня есть 2 сетки на моей странице HTML. Когда я щелкаю строку в одной сетке, она должна загружать данные в другую на основе выбранной строки.

Поэтому мне нужно отправить rowId в качестве дополнительного параметра для второй сетки .. Не могу понять, как ..

(я бы предпочел не использовать функциональность подсетки)

1 Ответ

4 голосов
/ 11 июля 2010

Пример этого сценария можно найти на http://trirand.com/blog/jqgrid/jqgrid.html, если вы выберете «Дополнительно», а затем «Основные детали». Ниже я приведу небольшой вариант кода.

Допустим, у нас есть две сетки на HTML-странице: одна «основная» сетка и другая «подробная» сетка, которая должна загружать данные на основе строки, выбранной в главной сетке. Давайте обе сетки должны заполнять данные с сервера, который отправляет данные обратно в формате JSON. Мы предполагаем, что мы используем выделение одной строки (не определено multiselect: true) в основной сетке.

Вот шаблон кода 

var detailsTitle = 'Details';
var grid = jQuery('#master').jqGrid({ // ... some parameters
    url: masaterUrl,
    datatype: 'json',
    colModel: [ // ... some column definitions
        { name: 'Name', width: 120 }
    ],
    onSelectRow: function(id) {
        var selName = grid.getCell(id, 'Name');
        gridDetails.setCaption(detailsTitle + ' for "' + selName + '"');
        gridDetails.setGridParam({
            //url: urlGetDetail + '/' + encodeURIComponent(id),
            //url: urlGetDetail + '?' + $.param( { userId: id });
            postData: { userId: id },
            page: 1,
            datatype: 'json' }).trigger('reloadGrid');
    }
}).navGrid('#pager', {}, {}, {}, {
    afterSubmit: function(response, postdata) {
        gridDetails.setCaption(detailsTitle);
        gridDetails.setGridParam({ datatype: 'local',
                                   page: 1 }).trigger('reloadGrid');
        return [true, ''];
    }
});

var gridDetails = jQuery('#detail').jqGrid({ // ...
    caption: detailsTitle,
    url: urlDetail,
    //postData: { userId: function() { return grid.getGridParam('selrow'); } },
    datatype: 'local'
});

Теперь несколько комментариев к коду. В начале ни одна строка не будет выбрана в основной сетке. Поэтому мы устанавливаем datatype: 'local' в качестве параметра сетки данных, чтобы запретить загрузку данных.

Если будет выбрана строка в основной сетке, мы устанавливаем заголовок (заголовок) сетки сведений, меняем datatype сетки сведений на 'json' и устанавливаем page: 1. Сброс параметра page важен, поскольку он будет отправлен на сервер в качестве дополнительного параметра. Если при последнем выборе пользователь выбрал другую страницу ранее, и для нового выбора не так много строк данных, как прежде, чем сетка сведений могла бы быть пустой. Чтобы решить эту проблему, мы должны всегда устанавливать page в 1.

Теперь основная работа: отправка id главной сетки в качестве параметра запроса сервера для сетки данных. У нас есть несколько вариантов здесь:

  • мы можем добавить URL-адрес сетки данных строкой, подобной '?userId='+id. Чтобы сделать это более тщательно, мы должны принять во внимание, что id может иметь некоторые специальные символы. Поэтому, чтобы быть уверенным, мы должны использовать '?userId='+encodeURIComponent(id) вместо этого. Функция jQuery.param делает то же самое в более читаемой форме. Таким образом, мы можем использовать '?'+jQuery.param({userId:id}) вместо этого. Я рекомендую использовать способ, если url сетки данных должен быть в формате REST (например, «blabla / id»). В этом случае установка url сетки данных на urlDetail+'/'+encodeURIComponent(id), вероятно, является наилучшим способом.
  • мы можем установить параметр postData:{userId:id}. То же самое, что и '?'+jQuery.param({userId:id}), если мы используем HTTP GET для запросов к серверу. Преимущество этого способа заключается в том, что мы используем также HTTP POST. Тогда параметры будут размещены в теле, а не добавлены к URL. Так что использование postData имеет небольшое преимущество.
  • мы можем удалить код из события onSelectRow главной сетки и включить в детальную сетку дополнительный параметр postData в качестве функции (см. Строку с комментариями). Способ будет работать очень хорошо с небольшими исключениями. Например, нам будет сложно очистить сетку сведений, если выбранная строка в основной сетке будет удалена. В некоторых других ситуациях у нас также меньше гибкости. Поэтому я хотел упомянуть только эту возможность, но я включил ее только в качестве комментария (см. Как фильтровать данные jqGrid, НЕ используя встроенное поле поиска / фильтра , если у вас есть интерес к этому способу).
...