手风琴视图中有多个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？

回答

相关问题