Javascript jqGrid GridUnload/ GridDestroy
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4920323/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jqGrid GridUnload/ GridDestroy
提问by Scharlotte
When I use $('#mygrid').jqGrid('GridUnload');my grid is destroyed: no pager/ no header.
当我使用$('#mygrid').jqGrid('GridUnload');我的网格被破坏时：没有寻呼机/没有标题。
In a wiki I found:
在维基中我发现：
The only difference to previous method is that the grid is destroyed, but the table element and pager (if any) are left ready to be used again.
与前一种方法的唯一区别是网格被破坏，但表格元素和分页器（如果有）仍准备好再次使用。
I can't find any difference between GridUnload/ GridDestroy or do I something wrong?
我找不到 GridUnload/GridDestroy 之间的任何区别，还是我有什么问题？
I use jqGrid3.8.
我使用jqGrid3.8。
回答by Oleg
To be able to create jqGrid on the page you have to insert an empty <table>element on the place of the page where you want see the grid. The simplest example of the table element is <table id="mygrid"></table>.
为了能够在页面上创建 jqGrid，您必须<table>在页面上要查看网格的位置插入一个空元素。表格元素的最简单示例是<table id="mygrid"></table>。
The empty <table>element itself will be not seenon the page till you call $('#mygrid').jqGrid({...})and the grid elements like column headers will be created.
在您调用之前不会在页面上看到空<table>元素本身，并且将创建列标题等网格元素。$('#mygrid').jqGrid({...})
The method GridDestroyworks like jQuery.remove. It deletes all elementswhich belong to the grid inclusvethe <table>element.
该方法的GridDestroy工作原理类似于jQuery.remove。它删除属于网格的所有元素，包括该<table>元素。
The method GridUnloadon the other hand delete all, but the empty <table>element stay on the page. So you are able to create new grid on the same place. The method GridUnloadis very usefull if you need create on one place different grids depend on different conditions. Look at the old answerwith the demo. The demo shows how two different grids can by dynamically created on the same place. If you would be just replace GridUnloadin the code to GridDestroythe demo will be not work: after destroying of the first grid no other grids will be created on the same place.
GridUnload另一方面，该方法删除所有，但空<table>元素保留在页面上。所以你可以在同一个地方创建新的网格。GridUnload如果您需要在一个地方根据不同的条件创建不同的网格，则该方法非常有用。用演示看看旧答案。该演示展示了如何在同一位置动态创建两个不同的网格。如果您只是在代码中替换演示将不起作用：在销毁第一个网格后，不会在同一位置创建其他网格。GridUnloadGridDestroy
回答by Fazi
In addition to Oleg's answer I would like to point out that GridUnload does a little more that just remove the grid from the table. It removes the original HTML table element(and the pager), and ads an identical one in its place(at least in 4.5.4 it does).
除了 Oleg 的回答之外，我想指出 GridUnload 所做的更多，只是从表格中删除了网格。它删除了原始的 HTML 表格元素（和寻呼机），并在其位置广告一个相同的元素（至少在 4.5.4 中是这样）。
This means that if you attached some event handlers to the table HTML element(i.e with jquery on, like ('#gridID').on('event','selector',handler)) they will also be removed. Consiquently the events will not fire on the new grid if you replace the old grid with a new one...
这意味着如果您将一些事件处理程序附加到表格 HTML 元素（即启用 jquery，例如 ('#gridID').on('event','selector',handler)），它们也将被删除。因此，如果您用新网格替换旧网格，事件将不会在新网格上触发...
回答by jiminka
Oleg's answer works fine for me as long as I have no Group headers.
只要我没有 Group 标题，Oleg 的回答对我来说就很好用。
When I add group header row with 'setGroupHeaders'
当我使用“setGroupHeaders”添加组标题行时
the results of a 'GridUnload'followed by a $('#mygrid').jqGrid({...})are not consistent.
一个结果'GridUnload'后跟一个$（ '＃mygrid'）。jqGrid的（{...}）并不一致。
It works fine in Chrome but not in IE11.
它在 Chrome 中运行良好，但在 IE11 中不起作用。
In IE11, each 'jqg-third-row-header'item ends up rendered on different rows (diagonally).
在 IE11 中，每个'jqg-third-row-header'项目最终呈现在不同的行上（对角线）。
I am using free-jqGrid:query.jqgrid.src.js version 4.13.4 for debugging. I traced the problem down to code, in this file, that begins with line 9936:
我正在使用 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");
});
This code sets the height and top css values related to each 'jqg-third-row-header' item. This leads to a tall and diagonal layout of the 'jqg-third-row-header'
Potential Bug:.
此代码设置与每个“jqg-third-row-header”项目相关的高度和顶部 css 值。这会导致“jqg-third-row-header”
潜在错误的高对角布局
：.
The $parent.height() and $ts.height() methods, above, return the former jqGrid table height in IE11. In Chrome they return the 'th' computed height(top = 0).
I added and tested the 2 commented lines that use line-height.
IE11 works fine when line-height is used.
I do not completely understand the JqGrid resize logic, so this may not be a fix.
Alternate Solution:
上面的 $parent.height() 和 $ts.height() 方法返回 IE11 中以前的 jqGrid 表格高度。在 Chrome 中，它们返回 'th' 计算高度（top = 0）。我添加并测试了使用 line-height 的 2 条注释行。当使用 line-height 时，IE11 工作正常。我不完全理解 JqGrid 调整大小逻辑，所以这可能不是一个修复。
替代解决方案：
If you specify.
如果指定。
colModel:
{
label: 'D',
name: 'W',
width: 6,
align: 'center',
resizable:false //required for IE11 multiple calls to this init()
},
When resizable is false the code above is not encountered and the height and top are not set.
Oleg's jqGrid is a very nice control. Perhaps he can test his demo grid with a groupheader on IE11.
当 resizable 为 false 时，不会遇到上面的代码，并且不会设置高度和顶部。
Oleg 的 jqGrid 是一个非常好的控件。也许他可以在 IE11 上使用 groupheader 测试他的演示网格。
