0

我无法让列按“名称”值以外的索引进行排序。在这种情况下,我试图按周顺序而不是字母数字顺序对聚合类型列(值是星期几)进行排序。为此,我添加了一个索引列(“聚合类型索引”),其中包含整数的星期几。但是,使用此配置,它无法按索引或名称对该列进行排序。有人可以指出我的错误吗?

我发布了页面上的所有 js 和 css,因为我还有另外两个问题,如果你发现问题很大,否则我会继续寻找。我希望能够启用列重新排序并能够调整网格的大小(两者都显示在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>
4

1 回答 1

1

您在代码中有一些问题:

  • 您应该使用没有空格或元字符的name和属性(请参见此处)。例如,您可以重命名“Aggregation_type”中的列名。index'Aggregation type'
  • 只有在远程数据的情况下(在or的情况下),您才能对nameindex属性使用不同的值。datatype: "json"datatype: "xml"
  • 你不应该填充网格addRowData。这是我所知道的最慢的方式。更好和更容易的是移动mydata代码顶部的定义(在创建网格之前),id在数组的每个项目中包含附加属性并使用data: mydatajqGrid 选项。如果网格将与数据一起创建,则会对数据进行排序并显示第一页数据。
  • 如果您需要实现任何自定义排序,您可以将sorttype列的属性定义为函数而不是默认值'text'(例如,请参见此处此处)。例如,该函数可以为'Date=Fri'value 返回 4,为 . 返回 5 'Date=Sat'。然后,您可以根据需要实现精确的自定义排序。
于 2012-06-20T21:12:58.350 回答