Jquery JQGrid分组数组数据和排序
我使用JQgrid来显示分组和排序的数据。 加载我的页面时，它根本不显示分组。 但是，在我对列进行排序之后，它工作得很好，它显示分组。我希望在页面加载时显示分组。 此外，我对使用的css和js文件感到困惑。下面是我的代码。请帮帮我Jquery JQGrid分组数组数据和排序,jquery,jqgrid,grouping,sorting,Jquery,Jqgrid,Grouping,Sorting,我使用JQgrid来显示分组和排序的数据。 加载我的页面时，它根本不显示分组。 但是，在我对列进行排序之后，它工作得很好，它显示分组。我希望在页面加载时显示分组。 此外，我对使用的css和js文件感到困惑。下面是我的代码。请帮帮我 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <link rel="stylesheet" type="text/css" med
<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>
html，正文{
边距：0；/*删除正文边距/填充*/
填充：0；
溢出：隐藏；/*删除浏览器窗口上的滚动条*/
字体大小：75%；
}
$（“#list4”）.jGrid.no_legacy_api=true；
$（函数（）{
$（“#列表4”）.jqGrid({
数据：mydata，
数据类型：“本地”，
高度：“自动”，
colname:['Inv No'，'Date'，'Client'，'Amount'，'Tax'，'Total'，'Notes'，]，
colModel:[{name:'id'，index:'id'，width:60，sorttype:“int”}，
{名称：'invdate'，索引：'invdate'，宽度：90，排序类型：“date”，格式化程序：“date”}，
{name:'name'，index:'name'，宽度：100，可编辑：true}，
{name:'amount'，index:'amount'，width:80，align:“right”，sorttype:“float”，格式化程序：“number”，可编辑：true}，
{名称：'tax'，索引：'tax'，宽度：80，对齐：“right”，排序类型：“float”，可编辑：true}，
{名称：'total'，索引：'total'，宽度：80，对齐：“right”，排序类型：“float”}，
{name:'note'，index:'note'，width:150，sortable:false}，
寻呼机：“#寻呼机”，
rowNum:30，
行列表：[10,20,30]，
有一次：是的，
可排序：是的，
viewrecords：是的，
imgpath：“主题/基本/图像”，
标题：“分组数组数据”，
sortname:'名称'，
分组：对，
groupingView:{groupField:['name']，groupColumnShow:[true]，groupOrder:['asc']，groupText:['{0}'，'{0}]}，
groupDataSorted：对，
普鲁西贡：“子弹头”，
小图标：“项目符号\u切换\u减号”
//客户端排序所需
//有一次：是的，
}
);
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”，note2，tax:“20.00”，total:“320.00”}，
{id:“3”，invdate:“2007-09-01”，name:“test3”，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”，note2，tax:“20.00”，total:“320.00”}，
{id:“6”，invdate:“2007-09-06”，name:“test3”，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”，note2，amount:“300.00”，tax:“21.00”，total:“320.00”}，
{id:“9”，invdate:“2007-09-01”，name:“test3”，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”，note2，amount:“300.00”，tax:“20.00”，total:“320.00”}，
{id:“13”，invdate:“2007-09-01”，name:“test3”，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”，note2，amount:“300.00”，tax:“20.00”，total:“320.00”}，
{id:“16”，invdate:“2007-09-06”，name:“test3”，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”，note2，amount:“300.00”，tax:“20.00”，total:“320.00”}，
{id:“19”，invdate:“2007-09-01”，name:“test3”，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”，note2，amount:“300.00”，tax:“20.00”，total:“320.00”}，
{id:“23”，invdate:“2007-09-01”，name:“test3”，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”，note2，amount:“300.00”，tax:“20.00”，total:“320.00”}，
{id:“26”，invdate:“2007-09-06”，name:“test3”，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”，note2，amount:“300.00”，tax:“20.00”，total:“320.00”}，
{id:“29”，invdate:“2007-09-01”，name:“test3”，note3，amount:“400.00”，tax:“30.00”，total:“430.00”}]；
对于（var i=0；i，我终于找到了问题本身的答案。
数组声明和操作循环应该在匿名函数jQuery（document）.ready（function（）{…}）的内部，而不是外部。这样，它将在jqQrid初始化之后而不是之前执行