jqGrid GridUnload/ GridDestroy答案

【问题标题】：jqGrid GridUnload/ GridDestroyjqGrid GridUnload/ GridDestroy
【发布时间】：2011-06-22 15:54:15
【问题描述】：

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

在我发现的一个 wiki 中：

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

我找不到 GridUnload/GridDestroy 之间的任何区别，还是我有什么问题？

我使用jqGrid 3.8。

【问题讨论】：

标签： javascript jqgrid

【解决方案1】：

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

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

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

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

【讨论】：

还有一个问题：是否有等待/暂停/超时功能，直到 php 脚本完成他的工作（在我的脚本中创建 pdf 并进行一些 mysql 查询）。 .delay （来自 jquery）似乎不起作用。任何想法和 VIELEN VIELEN DANK（对于社区：Oleg 会说德语；-)
再次感谢奥列格！我的问题是 jqgrid 比 php-Skript 快我想延迟 createmygrid() 函数的执行，就像你的例子一样。
@Oleg..你能帮忙吗。stackoverflow.com/questions/19908551/…
在较新的版本中，这不再起作用。使用它来卸载 jqGrid：$.jgrid.gridUnload('#list');
@tudor：在哪个产品的较新版本中？ “jqGrid”不存在。 jqGrid 的最新版本是 4.7。 Tony Tomov 将许可协议、产品的名称更改为“Guriddo jqGrid”（参见the post）并使其商业化（参见价格here）。不久之后，我开始fork jqGrid 4.7（jqGrid 的最后一个版本），并以"free jqGrid" 的名义在 GitHub 上发布。当前的免费 jqGrid 版本是 4.14.0。免费 jqGrid 允许 $("#list").jqGrid("GridUnload")

【解决方案2】：

除了 Oleg 的回答之外，我想指出 GridUnload 所做的更多只是从表格中删除网格。它删除了原始的 HTML 表格元素（和分页器），并在其位置添加了一个相同的元素（至少在 4.5.4 中是这样）。

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

【讨论】：

【解决方案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-third-row-header' 项目相关的高度和顶部 css 值。这导致“jqg-third-row-header”的高对角布局
潜在错误：。

上面的 $parent.height() 和 $ts.height() 方法在 IE11 中返回以前的 jqGrid 表格高度。在 Chrome 中，它们返回“th”计算高度（top = 0）。我添加并测试了使用行高的 2 条注释行。使用 line-height 时 IE11 工作正常。我不完全理解 JqGrid 调整大小的逻辑，所以这可能不是一个修复。
替代解决方案：

如果您指定。

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

当 resizable 为 false 时，不会遇到上面的代码，也没有设置高度和顶部。
Oleg 的 jqGrid 是一个非常好的控件。也许他可以在 IE11 上使用 groupheader 测试他的演示网格。

【讨论】：