0
J'utilise JQgrid pour afficher mes données avec le regroupement et le tri. Lorsque ma page est chargée, elle n'affiche aucun groupement. Mais, ça marche bien après avoir trié en colonne, ça affiche le groupement. Je veux que le groupement soit affiché sur le chargement de ma page. Aussi, je suis source de confusion avec les fichiers css et js utilisés. Voici mon code. Aidez-moi, s'il vous plaît.JQGrid Regroupement des données de tableau et tri
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/js/src/css/ui.multiselect.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/basic/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/jqModal.css" />
<style type="text">
html, body {
margin: 0; /* Remove body margin/padding */
padding: 0;
overflow: hidden; /* Remove scroll bars on browser window */
font-size: 75%;
}
</style>
<!--<script src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>-->
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
<!--<script src="js/jquery-1.4.2.js" type="text/javascript"></script>-->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.js" type="text/javascript"></script>
<script src="js/src/jqModal.js" type="text/javascript"></script>
<script src="js/src/jqDnR.js" type="text/javascript"></script>
<script src="js/ui.multiselect.js" type="text/javascript"></script>
<script src="js/jquery.tablednd.js" type="text/javascript"></script>
<script src="js/jquery.contextMenu.js" type="text/javascript"></script>
<script src="js/jquery.layout.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("#list4").jGrid.no_legacy_api = true;
</script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/src/grid.loader.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#list4").jqGrid({
data: mydata,
datatype: "local",
height: 'auto',
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[ {name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"},
{name:'name',index:'name', width:100, editable:true},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number", editable:true},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable:true},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false} ],
pager: '#pager',
rowNum:30,
rowList:[10,20,30],
loadonce: true,
sortable:true,
viewrecords: true,
imgpath: "themes/basic/images",
caption: "Grouping Array Data",
sortname: 'name',
grouping:true,
groupingView : { groupField : ['name'], groupColumnShow : [true],groupOrder : ['asc'],groupText : ['<b>{0}</b>', '{0}'] },
groupDataSorted : true,
plusicon: 'bullet_toggle_plus',
minusicon: 'bullet_toggle_minus'
//Required for client side sorting
// loadonce: true,
}
);
var mydata = [ {id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"} ,
{id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"11",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"12",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"13",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"14",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"15",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"16",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"17",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"18",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"19",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"21",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"22",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"23",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"24",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"25",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"26",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"27",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"28",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"29",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"} ];
for(var i=0;i<=mydata.length;i++)
jQuery("#list4").addRowData(i, mydata[i]);
}//function
);//ready
$("#list4").jqGrid().setGridParam({sortname: 'Date,', sortorder:
'asc'}).trigger("reloadGrid");
</script>
</head>
<body>
This is table
<table id="list4">
</table>
<div id="pager" class="scroll" style="text-align:center;">
</div>
This is table
</body>
</html>