jqGrid GridUnload / GridDestroy

Question

Когда я использую $('#mygrid').jqGrid('GridUnload'); моя сетка уничтожается: нет пейджера / нет заголовка.

В вики я нашла:

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

Я не могу найти разницы между GridUnload / GridDestroy или я что-то не так?

Я использую jqGrid 3.8.

Answer 1

Чтобы иметь возможность создать jqGrid на странице, вы должны вставить пустой элемент <table> на место страницы, где вы хотите видеть сетку.Простейшим примером элемента таблицы является <table id="mygrid"></table>.

Сам пустой элемент <table> будет не виден на странице до тех пор, пока вы не вызовете $('#mygrid').jqGrid({...}), а элементы сетки, такие как столбецЗаголовки будут созданы.

Метод GridDestroy работает как jQuery.remove .Он удаляет все элементы , принадлежащие сетке inclusve <table> элемент.

Метод GridUnload, с другой стороны, удаляет все, кроме пустой <table> элемент остается на странице .Таким образом, вы можете создать новую сетку на том же месте.Метод GridUnload очень полезен, если вам нужно создать в одном месте разные сетки, зависящие от разных условий.Посмотрите на старый ответ с демоверсией .Демонстрация показывает, как две разные сетки могут быть динамически созданы в одном месте.Если вы просто замените GridUnload в коде на GridDestroy, демоверсия не будет работать: после уничтожения первой сетки никакие другие сетки не будут созданы в том же месте.

Answer 2

В дополнение к ответу Олега я хотел бы отметить, что GridUnload делает немного больше, чем просто удаляет сетку из таблицы.Он удаляет исходный элемент таблицы HTML (и пейджер) и вместо него рекламирует идентичный (по крайней мере, в 4.5.4).

Это означает, что если вы подключили некоторые обработчики событий к элементу HTML таблицы (т.е. с включенным jquery, например ('#gridID'). On ('event', 'selector', handler)), они также будутудалить.Соответственно, события не будут срабатывать в новой сетке, если вы замените старую сетку новой ...

Answer 3

Ответ Олега отлично работает для меня, пока у меня нет заголовков группы.

Когда я добавляю строку заголовка группы с 'setGroupHeaders'

результатом 'GridUnload' , за которым следует $ ('#mygrid '). jqGrid ({...}) не согласованы.

Отлично работает в Chrome, но не в IE11.

В IE11 каждый элемент 'jqg-third-row-header' заканчивается в разных строках (по диагонали).

Я использую free-jqGrid: query.jqgrid.src.js версия 4.13.4 для отладки.Я проследил проблему до кода в этом файле, который начинается со строки 9936:

if (o.useColSpanStyle) {
    // Increase the height of resizing span of visible headers
    $htable.find("span.ui-jqgrid-resize").each(function () {
        var $parent = $(this).parent();
        if ($parent.is(":visible")) {
            this.style.cssText = "height:" + $parent.height() + "px !important; cursor:col-resize;";
            //this.style.cssText = "height:" + $parent.css('line-height'); + "px !important;cursor:col-resize;";
        }
    });
    // Set position of the sortable div (the main lable)
    // with the column header text to the middle of the cell.
    // One should not do this for hidden headers.
    $htable.find(".ui-th-column>div").each(function () {
        var $ts = $(this), $parent = $ts.parent();
        if ($parent.is(":visible") && $parent.is(":has(span.ui-jqgrid-resize)") && !($ts.hasClass("ui-jqgrid-rotate") || $ts.hasClass("ui-jqgrid-rotateOldIE"))) {
            // !!! it seems be wrong now
            $ts.css("top", ($parent.height() - $ts.outerHeight(true)) / 2 + "px");
            // $ts.css("top", ($parent.css('line-height') - $ts.css('line-height')) / 2 + "px");
        }
     });
}
$(ts).triggerHandler("jqGridAfterSetGroupHeaders");
});

Этот код устанавливает значения высоты и верхнего css, связанные с каждым элементом 'jqg-third-row-header'.Это приводит к высокому и диагональному расположению jqg-третьего-строки-заголовка Потенциальная ошибка: .

Методы $ parent.height () и $ ts.height () выше возвращают прежнюю высоту таблицы jqGrid в IE11.В Chrome они возвращают вычисленную высоту 'th' (top = 0).Я добавил и протестировал 2 прокомментированные строки, которые используют высоту строки.IE11 отлично работает, когда используется высота строки.Я не совсем понимаю логику изменения размера JqGrid, поэтому это не может быть исправлением. Альтернативное решение:

Если вы укажете.

 colModel: 
     {
     label: 'D',
     name: 'W',
     width: 6,
     align: 'center',
     resizable:false  //required for IE11 multiple calls to this init()
     },

Если для свойства resizable установлено значение false, приведенный выше код не встречается, а высота и верх не устанавливаются.Олег jqGrid - очень хороший контроль.Возможно, он сможет протестировать свою демонстрационную сетку с помощью заголовка группы на IE11.