Question

我正在尝试创建各种各样的仪表板。我正在使用Jquery的Accordion插件，并且在每个视图中都有一个使用jqGrid的网格。我没有留下深刻的印象，因为它看起来很笨重，有一个手风琴盒和另一个网格。是否可以在屏幕上只有多个jqGrids并使用jqGrid右上角的展开/折叠按钮来控制其他网格的手风琴类型视图？

谢谢！

Answer 1

我认为你应该在这个hidegrid按钮上覆盖click事件并强制隐藏所有其他网格（通过触发click事件;））。这是我的第一个想法。

也许有一些我不知道的内置事件。

Answer 2

<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事件（上滑和下移事件）或鼠标悬停事件。
检查我在项目中使用的上述代码。它工作正常

手风琴视图中的多个jqGrid？

2 个答案: