jquery를 사용하여 페이지에서 모든 jqgrids의 id를 얻습니다.

Question

MVC3보기에는 여러 개의 jqgrid가 포함되어 있습니다. 이제 확장 및 축소라는 두 개의 단추가 있습니다. 확장 버튼을 클릭하면 페이지의 모든 jqgrid의 크기를 조정하여 너비를 100px 늘릴 수 있습니다. Collpase 버튼을 클릭하면 페이지의 모든 jqgrid의 크기를 조정하여 너비를 100px 줄입니다. $("#grid1", "#grid2", "#grid3") 대신 jquery를 사용하여 모든 jqGrids를 쉽게 얻을 수 있습니까?

Answer 1

css 클래스를 사용하면 쉽게 할 수 있습니다. 모두가 같이있는 jqGrid 사용 DIV에 새로운 클래스를 추가 jqgridsClass 말 :

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

에서

지금 문 위의

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

가 단순한

$(".jqgridsClass") 

로 감소 될 수있다이 도움이되기를 바랍니다 ...

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/