手風琴視圖中有多個jqGrid？

我正在嘗試創建各種儀表板。我使用的是Jquery的Accordion插件，每個視圖都有一個使用jqGrid的網格。當我看到龐大的手風琴盒和另一個網格時，我並沒有留下深刻的印象。是否有可能在屏幕上只有多個jqGrid，並使用jqGrid右上方的展開/摺疊按鈕來控制與其他網格的手風琴類型視圖？手風琴視圖中有多個jqGrid？

謝謝！

來源

2011-12-29 CreationSL

我想你應該重寫此隱藏網格按鈕上的click事件，並強制每個其他網格隱藏（通過觸發click事件;））。這是我的第一個想法。

也許有一些我不知道的內置事件。

來源

2011-12-29 17:10:03 freakish

<html> 
<head> 
<script type="text/javascript"> 
jQuery(document).ready(function() { 
$("#Grid1").jqGrid({      // 1st Grid 
      url: 'service URL', 
      ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }, 
      type: "GET", 
      datatype: "json", 
      colNames: ['Id','MID','VendorCode1','VendorCode2','Percentage'], 
      colModel: [ 
      {name:"id",index:"id",width:30}, 
      {name:"mid",index:"mid",width:30}, 
      {name:"vendorcode1",index:"vendorcode1",width:40}, 
      {name:"vendorcode2",index:"vendorcode2",width:40}, 
      {name:"percentage",index:"percentage",width:70} 
     ], 

    jsonReader: { 
     repeatitems: false,  // To Bind the Data in Grid. 
     id: "id", 
     root: function (obj) { return obj; },  // To Bind the Data in Grid. 
     //page: function() { return 1; }, 
     page: function (obj) { return obj.length > 0 ? 1 : 0; }, 
     total: function() { return 1; }, 
     records: function (obj) { return obj.length; } 
    }, 

      rowNum:20, 
      rowList:[20,30,40,50], 
      loadonce: true,  // If True, all pages will be loaded, else only 1 page will be displayed. 
      pager: '#navGrid', 
      sortable: true, 
      sortname: 'mid', 
      viewrecords: true, 
      ignoreCase: true, 
      showOn: 'button', 
      multiselect:true, // Enabling Checkbox.  
      sortorder: 'asc', 
      prmNames: {rows: 'max'}, 
      height: 290, 
      width: 1222, 
      shrinkToFit: false,   // For Horizontal Scrollbar. 
      toolbar: [true,"bottom"],  // For appending Buttons in Toolbar. 
      rownumbers: true    // To display No.of rows. 
    }); 
    jQuery("#Grid1").jqGrid('navGrid','#navGrid',{view: false,edit:false,add:false,del:false,refresh:true}); 


$("#Grid2").jqGrid({      // 2nd Grid 
      url: 'service URL', 
      ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }, 
      type: "GET", 
      datatype: "json", 
      colNames: ['Id','MID','VendorCode1','VendorCode2','Percentage'], 
      colModel: [ 
      {name:"id",index:"id",width:30}, 
      {name:"mid",index:"mid",width:30}, 
      {name:"vendorcode1",index:"vendorcode1",width:40}, 
      {name:"vendorcode2",index:"vendorcode2",width:40}, 
      {name:"percentage",index:"percentage",width:70} 
     ], 

    jsonReader: { 
     repeatitems: false,  // To Bind the Data in Grid. 
     id: "id", 
     root: function (obj) { return obj; },  // To Bind the Data in Grid. 
     //page: function() { return 1; }, 
     page: function (obj) { return obj.length > 0 ? 1 : 0; }, 
     total: function() { return 1; }, 
     records: function (obj) { return obj.length; } 
    }, 

      rowNum:20, 
      rowList:[20,30,40,50], 
      loadonce: true,  // If True, all pages will be loaded, else only 1 page will be displayed. 
      pager: '#navGrid', 
      sortable: true, 
      sortname: 'mid', 
      viewrecords: true, 
      ignoreCase: true, 
      showOn: 'button', 
      multiselect:true, // Enabling Checkbox.  
      sortorder: 'asc', 
      prmNames: {rows: 'max'}, 
      height: 290, 
      width: 1222, 
      shrinkToFit: false,   // For Horizontal Scrollbar. 
      toolbar: [true,"bottom"],  // For appending Buttons in Toolbar. 
      rownumbers: true    // To display No.of rows. 
     }); 
    jQuery("#Grid2").jqGrid('navGrid','#navGrid',{view:  false,edit:false,add:false,del:false,refresh:true}) 
}); 
</script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
      $('#firstpane p.menu_head').click(function() { 

     //slideup or hide all the Submenu 

     //remove all the "Over" class, so that the arrow reset to default 
     $('#firstpane p.menu_head').each(function() { 
      if ($(this).attr('rel')!='') { 
       $(this).removeClass($(this).attr('rel') + 'Over');    
      } 
     });  
     //show the selected submenu 
     $(this).siblings('div.menu_body').slideDown('fast'); 

     //add "Over" class, so that the arrow pointing down 
     $(this).addClass($(this).attr('rel') + 'Over'); 
    }); 
}); 
</script> 
</head> 
<body> 
<div class="menu_list" id="firstpane"> 
<p class="menu_head">Grid-1</p> 
<div class="menu_body"> 
<table id="Grid1"></table> 
<div id="navGrid1"></div> 
</div> 
<div style="text-align:center;"> 
<p class="menu_head">Grid-2</p> 
<div class="menu_body"> 
<table id="Grid2"></table> 
<div id="navGrid2"></div> 
</div> 
</div> 
</div> 
    </body> 
</html>

我們可以在一個頁面（不同的網格-ID）的使用多個jqGrid的使用是Click事件（向上滑動&下事件）或鼠標懸停事件。
檢查上面的代碼，我已經在我的項目中使用。它工作正常

來源

2013-06-26 06:51:59

手風琴視圖中有多個jqGrid？

回答

相關問題