jqGrid на Стороне клиента – запросы подкачки страниц/редактирования/сортировки

с помощью такого метода, как jQuery.after () . Таким образом вы можете создавать jqGrid абсолютно динамично. Если вы это сделаете, вы должны принять во внимание, что jqGrid создает дополнительные div над элементами таблицы и подкачки.Итак, чтобы удалить весь jqGrid с id = "list", вы должны удалить div с id = "gbox_list". Альтернативно, если вы поместите и

в родительский элемент div и можете использовать jQuery.empty () и jQuery .html () в родительском div для удаления или вставки нового jqGrid.

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

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

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

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);
}

Другие вопросы по тегам:

Похожие вопросы: