Question

我无法通过“name”值以外的索引对列进行排序。在这种情况下，我试图按周订单排序聚合类型列（值是星期几），而不是字母数字顺序。为此，我添加了一个索引列（'Aggregation type-index'），其中包含整数周的日期。但是，使用此配置时，它无法按索引或名称对该列进行排序。有人能用我的方式指出我的错误吗？

我发布了页面上的所有js和css，因为我还有另外两个问题，如果你注意到这个问题很好，否则我会继续打猎。我希望能够启用列重新排序并能够调整网格大小（两者都显示在3.6中新增的http://trirand.com/blog/jqgrid/jqgrid.html下）。这两个选项都不起作用。

<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>

Answer 1

您在代码中遇到一些问题：

您应该使用没有空格或元字符的name和index属性（请参阅here）。例如，您可以在“Aggregation_type”中重命名列名'Aggregation type'。
只有在远程数据的情况下，才能对name和index属性使用不同的值（如果是datatype: "json"或datatype: "xml"）
你不应该对addRowData填充网格。这是我所知道的最缓慢的方式。更好更容易的是在代码顶部移动mydata的定义（在创建网格之前），在数组的每个项目中包含其他属性id并使用{{1} jqGrid的选项。如果网格将与数据一起创建，数据将被排序，并显示第一页数据。
如果您需要实现任何自定义排序，您可以将列的data: mydata属性定义为 function 而不是默认sorttype（请参阅here和{{3 }} 例如）。例如，函数可以为'text'值返回4，为'Date=Fri'返回5。然后，您可以根据需要实现完全自定义排序。

jqGrid：按索引排序

1 个答案: