1. 首頁
  2. 問答
  3. 使用jQGrid和jQUery選項卡如何oprimize網格的數量

使用jQGrid和jQUery選項卡如何oprimize網格的數量

2011-07-13 28 views
0

我有3個不同的選項卡，我用jQGrids（每個選項卡包含一個網格）顯示數據。使用jQGrid和jQUery選項卡如何oprimize網格的數量

但我只是認爲我的網格是完全相同的，只是區別在於他們使用不同的URL來獲取數據。

所以我只有網址不同的每個選項卡上的三個類似girds：

First: url: '/Home/GetData?id=1' Second: url: '/Home/GetData?id=2' and Third: url: '/Home/GetData?id=3'

所以我在想，可能是我可以聲明電網只有一次，不是每個選項卡上單擊可以將URL傳遞到加載數據？所以在每個標籤上單擊jQGrid將從新的URL填充。

可能有人對此有任何想法嗎？

或者可能有些人可能會有更好的想法，在這種情況下如何減少「jQGrid複製粘貼」？

更新0：

幾乎得到它的工作我的意思是這是工作，但有一個小問題， 當我切換標籤網格的頭迷路......以及一些jqGrid的格式爲好。

這裏是我的代碼：

$("#tabs").tabs({ 
      show: function (event, ui) { 

       if (ui.index == 0) { 
        //$("#Grid1").appendTo("#tab1"); 
        //$("#Grid1Pager").appendTo("#tab1"); 

        //When Appending only pager and grid div, header getting lost so i've append the whole grid html instead 
        $("#gbox_Grid1").appendTo("#tab1"); 

        changeGrid("#Grid1", 1); 
       } 

       else if (ui.index == 1) { 
        //$("#Grid1").appendTo("#tab2"); 
        //$("#Grid1Pager").appendTo("#tab2"); 

        $("#gbox_Grid1").appendTo("#tab2"); 

        changeGrid("#Grid1", 2); 
       } 

       else if (ui.index == 2) { 
        //$("#Grid1").appendTo("#tab3"); 
        //$("#Grid1Pager").appendTo("#tab3"); 

        $("#gbox_Grid1").appendTo("#tab3"); 

        changeGrid("#Grid1", 3); 
       } 
      } 
     }); 

function changeGrid(grid, id) { 
     $(grid).jqGrid('setGridParam', { 
      url: '/Home/GetData?id=' + id 
     }); 

     $(grid).trigger('reloadGrid'); 
    }

更新1

好吧，我已經改變了代碼追加整個網格，而不是隻追加電網格和尋呼機。所以它就是這樣工作的。

來源

2011-07-13 Joper

+1

您可以使用jQuery的方法，如[$ .prependTo（http://api.jquery.com/prependTo/）或[$ .appendTo（HTTP：//api.jquery。 com/appendTo /）**將包含「

」和「
」的div從一個選項卡包含到另一個選項卡。您可以在[jQuery UI選項卡]（http://jqueryui.com/demos/tabs/#events）的'select'或'show'事件處理程序中放置此類運動。之後，你可以用'setGridParam'來更改網格'url'參數，並觸發「reloadGrid」 – Oleg

+0

@Oleg我已經更新了這個問題，你怎麼看？ – Joper

回答

0

基本上可以將選項卡設置爲常規按鈕，這些常規按鈕將調用某個函數，該函數會將新的URL參數設置爲網格並重新加載它。

函數應該是這樣的：

function changeGrid(grid, id) { 
    $(grid).jqGrid('setGridParam', { 
     url: '/Home/GetData?id=' + id, page: 1 
    }); 
    $(grid).trigger('reloadGrid'); 
}

注意，我設置頁面1.請記住，您可能需要設置默認的排序列或類似取決於您的解決方案的東西。

UPDATE

如果你真的想要去的選項卡，在「顯示」事件處理程序可以簡化。 試試這個：

$("#tabs").tabs({ 
    show: function (event, ui) { 
     var id = ui.index + 1; 

     $("#gbox_Grid1").appendTo("#tab" + id); 

     $("#Grid1").jqGrid('setGridParam', { 
      url: '/Home/GetData?id=' + id 
     }); 
     $("#Grid1").trigger('reloadGrid'); 
    } 
});

來源

2011-07-13 17:15:08 shizik

相關問題

 相關問題