jqGrid GridUnload / GridDestroy

Question

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

在wiki中我找到了：

  

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

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

我使用jqGrid 3.8。

Answer 1

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

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

方法GridDestroy的作用类似于jQuery.remove。 删除属于网格包含 <table>元素的所有元素。

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

Answer 2

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

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

Answer 3

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

当我使用＆＃39; setGroupHeaders＆＃39;

添加组标题行时

＆＃39; GridUnload＆＃39; 的结果后跟 $（＆＃39; #mygrid＆＃39;）。jqGrid（{...}）< / em>不一致。

它在Chrome中运行良好但在IE11中运行不正常。

在IE11中，每个＆＃39; jqg-third-row-header＆＃39; 项最终会在不同的行（对角线）上呈现。

我正在使用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");
});

此代码设置与每个＆＃39; jqg-third-row-header＆＃39;相关的高度和顶部css值。项目。这导致了jqg-third-row-header＆＃39; jqg-third-row-header＆＃39;
潜在错误：。

上面的$ parent.height（）和$ ts.height（）方法返回IE11中的前jqGrid表高度。在Chrome中，他们会回归“第五次”。计算高度（顶部= 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测试他的演示网格。