Question

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

Answer 1

您可以使用css类轻松完成。添加一个新类，将jqgridsClass添加到用于jqGrid的所有div，如：

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

现在上面的陈述可以简化为

$(".jqgridsClass")

来自

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

希望它有所帮助...

Answer 2

我找不到获取所有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/

使用jquery获取页面中所有jqgrids的id

2 个答案: