jqGrid GridUnload / GridDestroy

Posted 2021-04-19

当我使用$('#mygrid').jqGrid('GridUnload');时，我的网格被破坏：没有寻呼机/没有标头。

在维基中我发现：

与先前方法的唯一区别是网格被破坏，但是表元素和寻呼机（如果有的话）可以再次使用。

我找不到GridUnload / GridDestroy之间的任何区别或者我做错了什么？

我使用jqGrid 3.8。

答案

为了能够在页面上创建jqGrid，您必须在要查看网格的页面位置插入一个空的<table>元素。表元素最简单的例子是<table id="mygrid"></table>。

在您调用<table>之前，页面上将看不到空的$('#mygrid').jqGrid({...})元素本身，并且将创建列标题之类的网格元素。

GridDestroy的方法就像jQuery.remove一样。它删除属于网格的所有元素包含<table>元素。

另一方面，方法GridUnload删除所有，但空的<table>元素保留在页面上。因此，您可以在同一个地方创建新网格。如果你需要在一个地方创建不同的网格取决于不同的条件，方法GridUnload是非常有用的。用the old answer看看the demo。该演示展示了如何在同一个地方动态创建两个不同的网格。如果您只是将代码中的GridUnload替换为GridDestroy，那么演示将无法工作：在破坏第一个网格后，将不会在同一个地方创建其他网格。

另一答案

除了Oleg的回答之外，我想指出GridUnload只是从表中删除了网格。它删除了原始html表格元素（和寻呼机），并且广告在其位置上是相同的（至少在4.5.4中）。

这意味着如果你将一些事件处理程序附加到表HTML元素（即jquery on，如（'#gridID'）。on（'event'，'selector'，handler）），它们也将被删除。如果用新的网格替换旧网格，那么事件将不会在新网格上触发...

另一答案

只要我没有Group标题，Oleg的答案对我来说就可以了。

当我使用'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");
});

此代码设置与每个'jqg-third-row-header'项相关的高度和顶部css值。这导致'jqg-third-row-header'的高而对角的布局 潜在的错误：

上面的$ parent.height（）和$ ts.height（）方法返回IE11中的前jqGrid表高度。在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时，不会遇到上面的代码，并且不设置height和top。 Oleg的jqGrid是一个非常好的控件。也许他可以在IE11上使用groupheader测试他的演示网格。