JqGrid GridUnload/GridDestroy

Ответ 1

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

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

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

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

Ответ 2

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

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

Ответ 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-third-row-header" ,

Потенциальная ошибка:.

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

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

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

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