「名前」値以外のインデックスで列をソートするのに問題があります。この場合、英数字順ではなく、週順で集計タイプの列 (値は曜日) を並べ替えようとしています。これを行うために、整数の曜日を持つインデックス列 (「Aggregation type-index」) を追加しました。ただし、この構成では、その列をインデックスまたは名前でソートできません。誰かが私のやり方で間違いを指摘できますか?
ページにあるすべての js と css を投稿しました。他にも 2 つの問題があるためです。問題が大きいことに気付いた場合は、探し続けます。列のリオーダーを有効にして、グリッドのサイズを変更できるようにしたい (両方ともhttp://trirand.com/blog/jqgrid/jqgrid.htmlの 3.6 タブの新機能に表示されている)。どちらのオプションも機能していません。
<link rel="stylesheet" type="text/css" href="/static/latest_ui/themes/base/jquery.ui.all.css"/>
<link rel="stylesheet" type="text/css" media="print" href="/static/css/print.css"/>
<script src="/static/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="/static/latest_ui/ui/jquery.ui.core.js"></script>
<script src="/static/latest_ui/ui/jquery.ui.widget.js"></script>
<script src="/static/latest_ui/ui/jquery.ui.position.js"></script>
<script src="/static/latest_ui/ui/jquery.ui.button.js"></script>
<script src="/static/latest_ui/ui/jquery.ui.menu.js"></script>
<script src="/static/latest_ui/ui/jquery.ui.menubar.js"></script>
<script src="/static/latest_ui/ui/jquery.ui.tabs.js"></script>
<script src="/static/latest_ui/ui/jquery.ui.datepicker.js"></script>
<script src="/static/js/custom.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="/static/css/custom_style.css" />
<link rel="stylesheet" type="text/css" media="all" href="/static/css/custom_colors.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/static/css/ui.jqgrid.css" />
<body>
<table id="grid_reports"></table>
<div id='pager'></div>
</body>
<script src="/static/latest_ui/ui/jquery.ui.resizable.js"></script>
<script src="/static/latest_ui/ui/jquery.ui.sortable.js"></script>
<script src="/static/js/grid.locale-en.js" type="text/javascript"></script>
<script src="/static/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="/static/js/jqGrid_src/grid.jqueryui.js"></script>
<script>
$(function() {
jQuery("#grid_reports").jqGrid({
sortable: true,
datatype: "local",
height: 500,
width: 300,
colNames:['Series', 'Agg Type', 'Days'],
colModel:[{'index': 'By series', 'align': 'left', 'sorttype': 'text', 'name': 'By series', 'width': 65}, {'index': 'Aggregation type-index', 'align': 'left', 'sorttype': 'int', 'name': 'Aggregation type', 'width': 75}, {'index': 'Days since event', 'align': 'center', 'sorttype': 'text', 'name': 'Days since event', 'width': 50}],
rowNum:50,
pager: '#pager',
sortname: 'Aggregation type',
sortorder: 'desc',
altRows: true,
rowList:[20,50,100,500,10000],
viewrecords: true,
gridview: true,
caption: "Report for 6/19/12"
});
jQuery("#grid_reports").navGrid("#pager",{edit:false,add:false,del:false});
jQuery("#grid_reports").jqGrid('gridResize',{minWidth:60,maxWidth:2500,minHeight:80, maxHeight:2500});
var mydata = [{'Days since event': 132, 'Aggregation type': 'Date=Fri', 'By series': 'mean', 'Aggregation type-index': 5}, {'DIM at event': 178, 'Aggregation type': 'Date=Thu', 'By series': 'mean', 'Aggregation type-index': 4}, {'DIM at event': 172, 'Aggregation type': 'Date=Wed', 'By series': 'mean', 'Aggregation type-index': 3}, {'DIM at event': 146, 'Aggregation type': 'Date=Tue', 'By series': 'mean', 'Aggregation type-index': 2}, {'DIM at event': 132, 'Aggregation type': 'Date=Sat', 'By series': 'mean', 'Aggregation type-index': 6}, {'DIM at event': 162, 'Aggregation type': 'Date=Mon', 'By series': 'mean', 'Aggregation type-index': 1}, {'DIM at event': 139, 'Aggregation type': 'Date=Sun', 'By series': 'mean', 'Aggregation type-index': 0}];
for(var i=0;i<=mydata.length;i++)
jQuery("#grid_reports").jqGrid('addRowData',i+1,mydata[i]);
});
</script>