jqGrid GridUnload/GridDestroy

Question

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

在维基我发现：

以往方法的唯一区别是，电网被破坏，但 表元素和寻呼机（如果有的话）留给准备再次使用。

我找不到GridUnload/GridDestroy之间的任何区别，或者我做错了什么？我使用jqGrid 3.8。

Answer 1

为了能够在页面上创建jqGrid，您必须在要查看网格的页面位置插入空的<table>元素。表元素的最简单示例是<table id="mygrid"></table>。本身将不会在页面上看到，直到你打电话$('#mygrid').jqGrid({...})和电网的元素，如列标题

空<table>元素将被创建。

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

，另一方面方法GridUnload全部删除，但空<table>元素留在页面上。所以你可以在同一个地方创建新的网格。方法GridUnload是非常有用的，如果你需要在一个地方创建不同的网格取决于不同的条件。请与the demo联系the old answer。该演示展示了如何通过在同一地点动态创建两个不同的网格。如果您只是将代码GridUnload替换为GridDestroy，则该演示将不起作用：在销毁第一个网格之后，不会在同一个地方创建其他网格。

Answer 2

除了Oleg的回答，我想指出GridUnload做的更多，只是从表格中移除网格。它删除了原始的HTML表格元素（和寻呼机），并在其位置上放置了相同的广告（至少在4.5.4中）。这意味着如果你将一些事件处理程序附加到表格HTML元素（即使用jquery on，例如（'#gridID'）。on（'event'，'selector'，handler）），它们也将被删除。奇怪的是，事件不会在新网格上发生，如果你用新网格替换旧网格...

Answer 3

只要我没有组头，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第三列头”项目的高度和顶部的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() 
    }, 

当可调整大小为假上面的代码不会遇到和高度和顶部未设置。
奥列格的jqGrid是一个非常好的控件。也许他可以在IE11上用groupheader测试他的演示网格。