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測試他的演示網格。