JQgrid 对 ID 列的数据更改进行排序
Posted
技术标签:
【中文标题】JQgrid 对 ID 列的数据更改进行排序【英文标题】：JQgrid on sorting data changes for ID column 【发布时间】：2012-06-28 12:14:33 【问题描述】：我使用 JQgrid 显示数据，网格中的数据是逐行添加的。我也使用“本地”数据类型来启用客户端排序。 我在存储数据库 ID 的 colmodel 中有 'id'。第一次正确加载数据 但是当我单击标题以对“id”列的数据内容进行排序时更改为 1,2 ...
请帮忙..
我的代码
var pageNumber=0,
previouslySelectedId,
numberOfRecords;
var numberOfPages,sortingFlag=false;
$(function()
$("#supplierCommodityList").jqGrid(
datatype: "local",
colNames:['ID','Supplier','Commodity','Unit','Cost Per Unit','Start Date','End Date'],
colModel:[
name:'id',index:'id',hidden:true,
name:'supplier.name',index:'supplier.name',sorttype:"string",formatter:wrapToLinkFormatter,
name:'coProductSpecification.name',index:'coProductSpecification.name',sorttype:"string",sortable:true,
name:'unit',index:'unit',sorttype:"string",
name:'expense',index:'expense',sorttype:"int",
name:'startDateStr',index:'startDate',formatter:dateFormatter,
name:'endDateStr',index:'endDate',formatter:dateFormatter
],
pager: '#supplierCommodityPager', //require id pagination, contains id for pagination div.
viewrecords: true,
multiselect: false, // to enable multiselect (chack box)
caption: "Supplier Commodity", //to show title on top
width: 920,
height:600,
viewrecords: true,
loadonce: true, // to enable sorting on client side
sortable: true, //to enable sorting
onPaging:paginationEvent, //pagination
onSortCol:sortingEvent,
gridComplete:gridCompleteFunction,
editurl: "clientArray"
).navGrid('#supplierCommodityList',edit:false,add:false,del:false);
attach_events(pagiantion_control_classes,'supplierCommodityList','supplierCommodityPager',get_supplier_commodity_details);
sortingEvent.gridId='supplierCommodityList'; //Id of grid
sortingEvent.pagerId='supplierCommodityPager';//Id of Pager
get_supplier_commodity_details(0);
);
/**
* method to get data .
*/
var get_supplier_commodity_details=function(requestedPage)
if(typeof requestedPage == 'undefined')
requestedPage=0;
var rurl='supplierCommodity/false';
$.ajax(
url: rurl+'/'+requestedPage,
processData:false,
type: 'GET',
success: function(data, textStatus, jqXHR)
render_supplier_commodity_details(data,requestedPage);
);
;
/**
* method used to render data in grid, row by row
*
*/
var render_supplier_commodity_details=function(data,pageNo)
numberOfRecords=data.numberOfRecords;
var numberOfPages=data.totalPages;
var noOfRecordPerPage=0;
console.debug(data);
$.each(data.supplierCommodityList,function(i,row)
$("#supplierCommodityList").jqGrid('addRowData',row.id,row);
noOfRecordPerPage+=1;
);
//alert(noOfRecordPerPage);
$("#supplierCommodityList").setGridParam(rowNum:numberOfRecords);
//jQuery("#supplierCommodityList").trigger("reloadGrid"); // to avoid total no of pages to be shown as 0.
$('span#sp_1_supplierCommodityPager').text(data.totalPages); //shows total pages
$('input.ui-pg-input').val(pageNo+1);
$("#supplierCommodityList").setGridParam(rowNum:numberOfRecords);
if(numberOfPages==1)
$('#supplierCommodityPager .ui-paging-info').text('View '+ 1 +' - '+ noOfRecordPerPage+ ' of '+noOfRecordPerPage);
else if(numberOfPages==(parseInt(pageNo)+1))
var minrecord=numberOfRecords-noOfRecordPerPage+1;
var maxrecord=numberOfRecords;
$('#supplierCommodityPager .ui-paging-info').text('View '+ minrecord +' - '+ maxrecord+ ' of '+numberOfRecords);
else if(numberOfPages!=1)
var minrecord=(noOfRecordPerPage*pageNo)+1;
var maxrecord=noOfRecordPerPage*(pageNo+1)>numberOfRecords?noOfRecordPerPage :noOfRecordPerPage*(pageNo+1);
$('#supplierCommodityPager .ui-paging-info').text('View '+minrecord +' - '+ maxrecord+ ' of '+data.numberOfRecords);
;
/**
* method handling sorting of column
*/
sortingEvent=function(index,iCol,sortorder)//index=col. name, icol=index of column,sortorder=asc or desc
// console.debug(index+ iCol+sortorder+" satrt");
sortingFlag=true; //flag required in gridCompleteFunction to change Text in Pager.
numberOfPages=$('span#sp_1_'+sortingEvent.pagerId).text();
var pageNumber=$('#'+sortingEvent.pagerId+' .ui-pg-input').val();
if(iCol== 6 || iCol==7)
var obj=$("#"+sortingEvent.gridId).jqGrid('getRowData');
console.debug(obj);
compareDate.sortorder=sortorder=='asc'?1:-1; //for acending order directly return 1 if 1st element<2nd element
compareDate.sortingField=(iCol==6)?'startDateStr':'endDateStr';
obj.sort(compareDate);
console.debug(obj);
var gridObj = jQuery("#"+sortingEvent.gridId);
var textOnPager=$('#'+sortingEvent.pagerId+' .ui-paging-info').text();
gridObj.clearGridData();
$.each(obj,function(i,row)
$("#"+sortingEvent.gridId).jqGrid('addRowData',row.id,row); //appends data row by row to grid
);
$('#'+sortingEvent.pagerId+' .ui-paging-info').text(textOnPager);
$('span#sp_1_'+sortingEvent.pagerId).text(numberOfPages); //shows total pages
$('#'+sortingEvent.pagerId+' .ui-pg-input').val(pageNumber);
return 'stop';
;
/**
* method called when we click on link for updating Headline
*/
clickMethod=function(id)
if(id!=null && typeof id != 'undefined')
window.location = "/kiss/portal/yoadmintool/supplierCommodity/supplierCommodityDetail/"+id+"/";
else
window.location = "/kiss/portal/yoadmintool/supplierCommodityList";
;
/*
* method which gets called on pagination.
*/
var paginationEvent=function(pgButton)
pageNumber=$('#supplierCommodityPager .ui-pg-input').val();
var gridObj = jQuery("#supplierCommodityList");
gridObj.clearGridData();
get_supplier_commodity_details(pageNumber-1);
;
gridCompleteFunction=function()
var noOfRecordPerPage=jQuery("#supplierCommodityList").jqGrid('getGridParam', 'records');
if(sortingFlag)
if(numberOfPages==1)
$('#supplierCommodityPager .ui-paging-info').text('View '+ 1 +' - '+ noOfRecordPerPage+ ' of '+noOfRecordPerPage);
else if(numberOfPages==(parseInt(pageNumber)+1))
var minrecord=numberOfRecords-noOfRecordPerPage+1;
var maxrecord=numberOfRecords;
$('#supplierCommodityPager .ui-paging-info').text('View '+ minrecord +' - '+ maxrecord+ ' of '+numberOfRecords);
else if(numberOfPages==0)
else if(numberOfPages!=1)
var minrecord=(noOfRecordPerPage*pageNumber)+1;
var maxrecord=noOfRecordPerPage*(parseInt(pageNumber))>numberOfRecords?noOfRecordPerPage :noOfRecordPerPage*(parseInt(pageNumber));
$('#supplierCommodityPager .ui-paging-info').text('View '+minrecord +' - '+ maxrecord+ ' of '+numberOfRecords);
sortingFlag=false;
$('.ui-state-disabled.ui-pg-button').removeClass('ui-state-disabled').addClass('ui-state-enabled');//to enable pager button
;
/**
* method to wrap discription to link for updation purpose
*/
wrapToLinkFormatter=function(cellvalue, options, rowObject)
var link="<a href=\"javascript:clickMethod('"+rowObject.id+"');\">"+cellvalue+"</a>";
return link;
;
【问题讨论】：
【参考方案1】：我已经多次看到the jsfiddle demo，我想知道它的起源在哪里。问题是演示是非常糟糕的模板。它包含许多小错误，并显示了用本地数据填充 jqGrid 的最糟糕的方法。请永远不要将模板用于您的真实代码。
您当前代码中的错误如下：您选择id 作为第一列的名称。 id 属性将用于保存 rowid（网格的 <tr> 元素的 id）。一方面，您使用id: 48803 和id: 48769。另一方面，您使用$("#grid").jqGrid('addRowData', i + 1, mydata[i]);。因此id 将设置为i + 1（1 和2）。因此48803 和48769 的值将被放置在网格中，但内部data 参数的id 属性将被覆盖为1 和2 值。如果您将代码更改为$("#grid").jqGrid('addRowData', data[i][0], mydata[i]);，问题将得到解决。
不过，我强烈建议您重写代码。您应该首先填充mydata，然后使用data: mydata abd gridview: true 选项创建网格。您还应该修复 sorttype 以对应您使用的数据。我建议您另外使用height: "auto" 而不是height: 250 并包含寻呼机。当前代码只会显示前 20 行数据（rowNum 的默认值为 20），用户将无法看到下一页。
【讨论】：
感谢您的回复.. 但这是我从网上获取的示例代码。在我的代码中，我使用 id 作为字符串，它将包含存储在数据库中的 ID。例如。 "pqrs---1222" @swap：抱歉，如果您需要帮助，您应该发布有问题的代码。从哪里获得代码示例并不重要。你应该正确使用它。因此，您必须将id 列重命名为任何其他名称，或者使用与addRowData 相同的id 参数作为id 列中的值。
我已按照您的建议修改了我的问题。我正在从 ajax 调用中获取数据并将数据逐行添加到网格中，我的数据具有嵌套对象，所以我使用了“。”运算符，我尝试了与 id 列中的值相同的 addRowData 的 id 参数，但对于绑定到嵌套对象的列，我仍然没有定义。以上是关于JQgrid 对 ID 列的数据更改进行排序的主要内容，如果未能解决你的问题，请参考以下文章