jqGrid на стороне клиента - пейджинг / редактирование / сортировка запросов - PullRequest
5 голосов
/ 07 июля 2010

Я пытаюсь построить систему, используя jqgrid, которая делает все на стороне клиента, т.е. использует AJAX, чтобы извлечь объект JSON (используя C # /. Net) и кэшировать его в переменной javascript, а затем заполнить несколько сеток из этого кэша.(addRowData), в зависимости от данных.Это все работает очень хорошо.

Однако у меня возникли проблемы с поиском того, как сделать некоторые из более сложных вещей сейчас.

1) разбиение на страницы / сортировка данных без взаимодействия с сервером.Это возможно?Или это требует, чтобы я написал пользовательские функции подкачки страниц (т. Е. Когда пользователь переходит на страницу 2, получает следующие 10 записей из кэша и обновляет их сеткой).Надеюсь, есть автоматический способ сделать это?Как насчет сортировки?Прочитайте некоторые вещи, которые предполагают, что это сделано на стороне сервера, но, возможно, это были старые статьи?Не уверен.

2) Разрешить пользователям видеть элементы управления (в основном переключатели и указатель даты) в каждой строке и отражать эти изменения в переменной кэша.Я посмотрел на функции редактирования jqGrid, но это, кажется, «нажмите / редактировать / сохранить».В идеале мне бы хотелось, чтобы на начальном экране сетки отображался, например, один из столбцов, отображающих пары переключателей в каждой строке, и пользователь мог просто щелкнуть те, которые ему интересны (т.е. им не нужно явно «редактировать»)."строка, чтобы увидеть / изменить переключатели).Эти данные обновляются в сетке и, что более важно, в переменной кэша, управляющей сеткой.Существует ли автоматический способ связывания элементов управления в каждой строке с базовым набором данных клиента?Как мне создать элементы управления в каждой ячейке и связать их значение со значением ячейки?

С радостью кто-то может указать мне правильное направление?

Спасибо за любую помощь, которую вы можете оказать,

Билл

Ответы [ 3 ]

6 голосов
/ 07 июля 2010

Все, что вы хотите получить в первой части вашего вопроса, может быть реализовано с помощью jqGrid 3.7.x.Вы должны использовать оба параметра datatype: 'json' и loadonce: true.Сервер должен отправить все данные обратно.См., Например, jqgrid setGridParam datatype: local .

Как насчет второй части вашего вопроса.Мне кажется, что вы пытаетесь сделать jqGrid слишком сложным.Я нахожу гораздо проще установить некоторые элементы управления (выбрать / раскрывающиеся списки, флажки или переключатели) вне jqGrid (например, в верхней части сетки).Если пользователь вносит изменения в некоторые из этих элементов управления, вам следует перезагрузить сетку с сервера на основе новых выбранных параметров.См. Как фильтровать данные jqGrid, НЕ используя в качестве примера встроенное поле поиска / фильтра .Если вы попытаетесь объединить этот способ с параметром loadonce: true, вы должны понимать, что после первой загрузки сетки с loadonce: true другой параметр datatype: 'json' изменится на datatype: 'local'.Таким образом, чтобы перезагрузить сетку, вы должны дополнительно устанавливать datatype: 'json' каждый раз перед перезагрузкой сетки.

ОБНОВЛЕНО на основе комментариев: Хорошо.Если у вас есть несколько предопределенных наборов данных, вы хотите загрузить все с сервера, а затем быстро отобразить необходимую сетку, вы можете просто определить некоторые погружения и поместить все jqGrids (элементы div таблицы и подкачки) в соответствующий дополнительный div (один div на jqGrid),Вы можете начать загрузку данных во все эти сетки при загрузке страницы.Вы делаете родителей невидимыми или скрытыми в отношении jQuery.show() и jQuery.hide() в любое время, когда вам нужно.Div, которые должны быть скрыты в начале страницы, могут иметь стиль CSS display:none.

Другой вариант создания сетки динамически с кэшированными данными заключается в следующем.Вы можете удалить jqGrid с помощью jQuery.remove() и вставить новый элемент <table> и элемент подкачки <div> с помощью метода, подобного jQuery.after().Таким образом, вы можете построить jqGrid абсолютно динамически.Если вы сделаете это, вы должны принять во внимание, что jqGrid создает некоторые дополнительные элементы div для элементов таблицы и элементов подкачки.Таким образом, чтобы удалить весь jqGrid с id = "list", вы должны удалить div с id = "gbox_list".Альтернатива, если вы поместите и <table>, и пейджинг <div> в родительский элемент div, и вы можете использовать методы jQuery.empty() и jQuery.html() в родительском div, чтобы удалить или вставить новый jqGrid.

Nowо отображении переключателей внутри jqGrid.Это возможно, если вы будете использовать пользовательский форматер.См. jqGrid: редактируемый столбец, который всегда показывает выбор , как пример того, как отображать выборки (выпадающие списки) внутри jqGrid.Между прочим, я не вижу преимуществ в использовании переключателей, сравнивающих с выбором.Радиокнопки занимают только больше места на странице, и пользователям придется часто прокручивать страницу.

Тем не менее я не рекомендую использовать сложные элементы внутри ячеек jqGrid.Я рекомендую вам продемонстрировать своим пользователям функцию «Inline Editing» в jqGrid.Это означает, что если пользователь выбирает строку или делает двойной щелчок по строке (вы можете реализовать способ, который предпочитает ваших пользователей), строка будет переключаться в режиме редактирования с флажками, полями выбора (раскрывающимися списками), вводом текста и т. Д.,Это стандартный способ.У этого есть некоторые преимущества перед "редактированием формы" со стороны удобства пользователя.Чем больше вы отходите от стандартных путей , тем больше проблем вы можете получить в будущем.Для демонстрации «встроенного редактирования» вы можете открыть http://trirand.com/blog/jqgrid/jqgrid.html и выбрать в дереве слева «Редактирование строки», а затем «Типы ввода».В качестве примера кода вы можете использовать jqGrid - редактировать только определенные строки для редактируемого столбца .

ОБНОВЛЕНО 2 : Еще одно небольшое замечание. Если данные на сервере не будут часто изменяться, и вы хотите более длительное время кэширования на клиенте, вы можете использовать prmNames: { nd:null} параметр jqGrid, особенно если вы используете Internet Explorer. Если вы сделаете это, последние результаты HTTP GET (включая jQuery.ajax запросы) будут кэшироваться на клиенте, и следующие запросы ajax могут загружать данные из локального кэша браузера вместо отправки запросов на сервер. Если сервер включает в ответ какую-либо информацию о разрешенном времени кэширования (заголовки HTTP), он будет автоматически использоваться на клиенте в jQuery.ajax.

ОБНОВЛЕНО 3 на основе опубликованного исходного кода: в коде есть некоторые ошибки. Вот фиксированный код

var myGrid = $("#mygrid").jqGrid({
    datatype: 'local',
    colModel: [
        { name: 'AID', label: 'Some ID', key: true, width: 100,
          editable: false, sorttype: "int" },
        { name: 'Name', width: 300, editable: false },
        { name: 'Group', width: 100, editable: false },
        { name: 'Info', width: 100, editable: false },
        { name: 'AValue', width: 100, editable: true, edittype: 'text' }
    ],
    pager: '#mypager',
    rowNum: 10,
    rowList: [10, 20, 500],
    viewrecords: true,
    autowidth: true,
    sortname: 'AID',
    sortorder: 'desc'
});
myGrid.jqGrid('navGrid','#mypager',{edit:false,add:false,del:false,search:false});

var mydata = [];
for (var i = 0; i < 100; i++) {
   mydata.push({AID:i,Name:"123",Group:"456",Info:"78",AValue:"8"});
}
myGrid.setGridParam({data: mydata}).trigger("reloadGrid");

Вы можете попробовать это здесь http://www.ok -soft-gmbh.com / jqGrid / Clientside.htm

ОБНОВЛЕНО 4 : Здесь приведен тот же пример, включая редактирование на стороне клиента http://www.ok -soft-gmbh.com / jqGrid / ClientsideEditing.htm . Он основан на потере отредактированных данных http://www.trirand.com/blog/?page_id=393/help/losing-edited-cell-data-after-paging/ и после подкачки .

1 голос
/ 07 июля 2010

В последней версии jqGrid есть то, что вам нужно, я считаю.Из этой ссылки

  • Добавлены локальный подкачка, поиск, сортировка и виртуальная прокруткаПожалуйста, смотрите демо Новое в 3.7
0 голосов
/ 09 июля 2010

Мой код ниже.InitGridTestBulkLoad запускается после завершения загрузки сетки, и первая страница из 10 записей отображается правильно.Элементы управления подкачкой указывают, что я на странице 1 из 10.

Однако, если я нажимаю «Следующая страница», я вижу короткое поле «Загрузка», но ничего не меняется.Кроме того, если щелкнуть заголовок первого столбца для сортировки, ничего не произойдет.

Grid def и код для хранения «кэшированных» данных и загрузки их в сетку:

jQuery(document).ready(function() {
    jQuery("#mygrid").jqGrid({
        dataType: "local",
        data: {},
        colNames: ['AID', 'Name', 'Group', 'Info', 'AValue'],
        colModel: [
                        { name: 'AID', label: 'Some ID', index: 'SomeID', width: 100, editable: false, sorttype: "int" },
                        { name: 'Name', label: 'Name', index: 'Name', width: 300, editable: false },
                        { name: 'Group', label: 'Group', index: 'Group', width: 100, editable: false },
                        { name: 'Info', label: 'Info', index: 'Info', width: 100, editable: false },
                        { name: 'AValue', label: 'AValue', index: 'AValue', width: 100, editable: true, edittype: 'text' }
                      ],
        pager: '#mypager',
        rowNum: 10,
        rowList: [10, 20, 500],
        viewrecords: true,
        loadonce: true,
        autowidth: true,
        sortname: 'AID',
        sortorder: 'desc'
    });

});

var oJR = {};
oJR.rows = new Array();
function InitGridTestBulkLoad() {
    oJR.total = 100;
    oJR.page = 1;
    oJR.records = 100;
    for (var i = 0; i < 100; i++) {
        var s = i.toString();
        oJR.rows[i] = {};
        oJR.rows[i].id = i;
        oJR.rows[i].cell = [s, "123", "456", "78", "8"];
    }

    var mg = $("#mygrid");
    mg[0].addJSONData(oJR);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...