關於爲ID列排序數據更改的JQgrid

Question

我正在使用JQgrid來顯示數據，網格中的數據是逐行添加的。我也使用「本地」數據類型來啓用客戶端排序。 我有'id'in 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; 
}; 

Answer 1

我已經多次看到the jsfiddle demo，我想知道它的起源在哪裏。問題是，演示是真的很糟糕的模板。它包含許多小錯誤，並顯示最糟糕的方式用本地數據填充jqGrid。請不要將模板用於真實代碼。

您當前代碼中的錯誤如下：您選擇id作爲第一列的名稱。 id屬性將用於保存rowid（id的<tr>的網格元素）。一方面你使用id: 48803和id: 48769。另一方面，您使用$("#grid").jqGrid('addRowData', i + 1, mydata[i]);。所以id將被設置爲i + 1（1和2）。所以值48803和48769將被放置在網格中，但id屬性的內部參數data將被重寫爲爲1和2的值。如果您將代碼更改爲$("#grid").jqGrid('addRowData', data[i][0], mydata[i]);，問題將得到解決。

不過，我強烈建議您重寫代碼。您應先填寫mydata，然後使用data: mydata abd gridview: true選項創建網格。您還應該修復sorttype以對應您使用的數據。我建議您另外使用height: "auto"而不是height: 250幷包含尋呼機。當前代碼只顯示前20行數據（rowNum的默認值爲20），用戶將無法看到下一頁。