<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>
- Мы можем использовать несколько Jqgrid на одной странице (разные идентификаторы сетки) либо с событием Click (скольжение вверх и вниз), либо с событием Mouse Over.
- Проверьте код выше,который я использовал в своем проекте.Работает нормально