JQGrid загружает данные в другую сетку с помощью OnSelectRow - PullRequest
3 голосов
/ 15 ноября 2011

Я рвал на себе волосы последние пару дней. Так же, как краткое описание проблемы. Я использую JqGrid 4.2.0 (последняя версия на момент написания). На одной странице у меня есть две сетки. Один слева, смотрящий как штурман. Я хочу загрузить данные в правую сетку с данными, определенными по идентификатору строки элемента, щелкнувшего слева.

Моя проблема в том, что первый выбранный идентификатор строки «застрял», и все вызовы ajax в будущем будут иметь одинаковый идентификатор строки (например: если первая выбранная строка была 514, каждая другая выбранная строка будет выводить 514 при вызове ajax для загрузить другую сетку, если сначала было выбрано 513, все остальные 513 и т. д.)

Я подозреваю, что это может быть какое-то пересечение переменных или что-то подобное, так как я размещал оповещения о вызовах для тестирования на протяжении всего выполнения, и все они предупреждают правильный идентификационный номер до тех пор, пока не будет загружена следующая сетка, после чего идентификатор строки станет ошибочный.

Вот мой код ниже:

Первый сегмент - это начальный список слева с вызовом OnSelectRow, а второй раздел кода предназначен для сетки данных с правой стороны, которая фактически содержит данные)

renderImportsList = function(url, data, firstrow) {
var cnames = data.names;
var cmodel = data.model;
currentrow = firstrow;
$("#imports_grid").jqGrid({
    url: url + "&type=list",
    //caption: "Imports",
    datatype: "json",
    colNames: cnames,
    colModel: cmodel,
    recordtext: "<b>Imports: {1}</b>",
    autowidth: true,
    rowNum: 10000,
    toolbar: [true,"top"],
    pager: "#imports_grid_pager",
    pgbuttons: false,
    pginput: false,
    viewrecords: true,
    multiselect: false,
    sortorder: "desc",
    sortable: true,
    onSelectRow: function(rowid) {
        if (rowid != firstrow) {
            if ($("#" + firstrow).hasClass("ui-state-highlight"))
                $("#" + firstrow).removeClass("ui-state-highlight")
        }
        setTimeout(function() { 
            // Display import items
            var itype = "checkpoint";
                            alert(rowid); // This returns the right row ID so far
            renderImportItems(url, rowid, itype);
        }, 500);
    },
    loadComplete: function() {
        $("#imports_grid tr").css("border-color", "#666");
        $("tr.jqgroup").css("background", "#e9efff");
        $("tr.jqfoot").css("background", "#ced5e9");
        $("#imports_grid tr.jqfoot td").css("border-right", "none");
        $("#t_imports_grid").css("padding-bottom", "3px");
        $("#imports_grid").setSelection(firstrow, true);
        $("#imports_grid").trigger("reloadGrid"); // Call to fix client-side sorting
    }
});     
$("#imports_grid").jqGrid('navGrid','#imports_grid_pager',{edit:false,add:false,del:false,search:false});
$("#imports_grid").trigger("reloadGrid"); // Call to fix client-side sorting
sizeGrid("imports_grid");

}

Эта часть выполняется нормально, rowid на этом этапе - это то, на что я нажал, в соответствии с предупреждением, размещенным выше. Ниже приведена вторая функция, которая вызывается из OnSelectRow из функции выше.

renderImportItems = function(url, rowid, itype) {
$.ajax({
    url: srvrname + "applications/PMS/views/view/imports/" + itype + ".php",
    success: function(data) {
        var cnames  = data.names;
        var cmodel  = data.model;
                    alert(rowid); // Here, the code still executes the right row ID
        $("#checkpoint_grid").jqGrid({
            url: url + "&rid=" + rowid + "&type=" + itype,
            // This is where it breaks. No matter what, I keep getting rowid to equal whichever row was selected the very first time the grid was clicked (or loaded programatically onload)
            datatype: "json",
            colNames: cnames,
            colModel: cmodel,
            recordtext: "<b>Total: {1}</b>",
            autowidth: true,
            rowNum: 500,
            pager: "#" + itype + "_grid_pager",
            pgbuttons: false,
            pginput: false,
            viewrecords: true,
            multiselect: false,
            sortorder: "desc",
            sortable: true,
            loadComplete: function() {
                $("#" + itype + "_grid tr").css("border-color", "#666");
                $("tr.jqgroup").css("background", "#e9efff");
                $("tr.jqfoot").css("background", "#ced5e9");
                $("#" + itype + "_grid tr.jqfoot td").css("border-right", "none");
                $("#" + itype + "_grid").trigger("reloadGrid"); // Call to fix client-side sorting
            }
        }); 
        $("#" + itype + "_grid").jqGrid('navGrid','#' + itype + 'grid_pager',{edit:false,add:false,del:false,search:false});
        $("#" + itype + "_grid").trigger("reloadGrid"); // Call to fix client-side sorting
        sizeGrid(itype + "_grid");
    }
});

}

Как вы можете видеть выше: в момент, когда вызывается первое предупреждение; он по-прежнему выводит правильный идентификационный номер, но как только инициализируется вторая сетка; идентификатор возвращается к тому, что было изначально установлено в самом первом вызове.

Любая предоставленная помощь будет принята с благодарностью. Если это поможет, вот несколько выводов firebug, чтобы продемонстрировать проблему ...

(имя домена удалено для конфиденциальности)

(Первая загрузка: программная: выбранная строка = 514) Ответ: //mydomain.com/views/view/grid.php?rid=514&type=checkpoint&_search=false&nd=1321336809180&rows=500&page=1&sidx=&sord=desc

(выбранная строка: выбранная строка = 503) Ответ: //mydomain.com/views/view/grid.php?rid=514&type=checkpoint&_search=false&nd=1321336863994&rows=500&page=1&sidx=&sord=desc

(выбранная строка: выбранная строка = 510) Ответ: //mydomain.com/views/view/grid.php?rid=514&type=checkpoint&_search=false&nd=1321336864848&rows=500&page=1&sidx=&sord=desc

Ответы [ 3 ]

2 голосов
/ 15 ноября 2011

Я сам испытывал ту же проблему.Я рекомендую вам определять вашу сетку вне функции onSelectRow с типом данных, установленным на "local", и изменять только части, которые меняются между каждой загрузкой в ​​onSelectRow:

$("#checkpoint_grid").jqGrid('setGridParam', {
    url: null
}).jqGrid('setGridParam', {
    url: url + "&rid=" + rowid + "&type=" + itype,
    datatype: "json"
}).trigger("reloadGrid");

Я обычно делаю это с postData: null, но ядумаю, основная проблема заключается в том, что jqGrid кэширует некоторые параметры сетки.

2 голосов
/ 15 ноября 2011

Вы должны включить GridUnload для $("#checkpoint_grid") внутри renderImportItems (например, после var cmodel = data.model;):

$("#checkpoint_grid").jqGrid('GridUnload');

Проблема в том, что код, который создает сетку, должен быть выполнен один раз. Код создает, например, заголовки сетки, пейджер и некоторые другие области, кроме тела сетки. Затем будет сделан запрос Ajax, чтобы получить данные для сетки и заполнить тело. Если пользователь щелкает заголовок столбца, чтобы отсортировать данные по столбцу, или пользователь нажимает кнопку «Следующая страница», в сетке будут обновляться только данные. Таким образом, нужно создать сетку только один раз. Если следующий вызов будет выполнен в уже существующей сетке, вызов будет просто проигнорирован. Это строка кода (внутреннее свойство grid будет установлено здесь ).

Кроме того, я бы включил параметр cache: false как минимум во второй вызов $.ajax (вызов внутри renderImportItems).

Здесь вы найдете демо, которое использует GridUnload.

0 голосов
/ 15 ноября 2011

Я думаю, что следующие шаги должны работать:

  1. Вызовите функцию onRowSelect. Установите async: false для вашего вызова ajax (необязательно), а rowid следует сохранить как глобальную переменную
  2. Перезагрузите 2-ю сетку на основе данных первичного ключа из 1-й сетки, используя This
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...