2013-09-25 90 views
1

我们有一个MVC3视图,其中包含多个jqgrid。我现在有两个按钮展开和折叠。在展开按钮上单击我需要调整页面中的所有jqgrid以将其宽度增加100px,并在Collpase按钮单击上我需要调整页面中的所有jqgrid以将其宽度减小100px。有没有简单的方法来获取所有jqGrids使用jQuery而不是给$("#grid1", "#grid2", "#grid3")使用jquery获取页面中所有jqgrid的ID号

回答

0

你可以很容易地使用CSS类。添加一个新类说jqgridsClass所有DIV用于jqGrid的,如:

<div id="grid1" class="jqgridsClass"> 
<div id="grid2" class="jqgridsClass"> 
<div id="grid3" class="jqgridsClass"> 

现在上面的语句可以降低到仅仅

$(".jqgridsClass") 

$("#grid1", "#grid2", "#grid3") 

希望它可以帮助...

0

我ca'nt找到一种方法来获取所有jqGrid实例;但是您可以在定义它们时将每个jqGrid实例引用添加到数组中。

当您通过迭代数组进行内联时,您将拥有每个网格实例,并且您可以完成自己的任务。

代码:

var $grids = $("#grid1, #grid2, #grid3").jqGrid({ 
    datatype: "local", 
    height: 250, 
    colNames: ['Inv No', 'Thingy', 'Blank', 'Number', 'Status'], 
    colModel: [{ 
     name: 'id', 
     index: 'id', 
     width: 60, 
     sorttype: "int" 
    }, { 
     name: 'thingy', 
     index: 'thingy', 
     width: 90, 
     sorttype: "date" 
    }, { 
     name: 'blank', 
     index: 'blank', 
     width: 30 
    }, { 
     name: 'number', 
     index: 'number', 
     width: 80, 
     sorttype: "float" 
    }, { 
     name: 'status', 
     index: 'status', 
     width: 80, 
     sorttype: "float" 
    }], 
    caption: "Stack Overflow Example", 
    // ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');} 
}); 

$("#resizeMe").click(function() { 
    $($grids).each(function (index) { 
     $(this).jqGrid('setGridHeight', "20px"); 
    }); 

}); 

演示:http://jsfiddle.net/IrvinDominin/XQmgK/

相关问题