Все, что вы хотите получить в первой части вашего вопроса, может быть реализовано с помощью 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/ и после подкачки .