0

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;
 };
4

1 に答える 1

1

私はjsfiddle のデモを何度も見てきましたが、その起源はどこにあるのだろうかと思っています。問題は、デモが非常に悪いテンプレートであることです。多くの小さなエラーが含まれており、 jqGrid をローカル データで埋める最悪の方法を示しています。テンプレートを実際のコードに使用しないでください。

現在のコードにあるエラーは次のとおりですid。最初の列の名前として選択しました。このプロパティは、rowid (グリッドの要素)idを保存するために使用されます。一方では、 と を使用します。反対側では、 を使用します。したがって、は(1 と 2)に設定されます。したがって、値はグリッドに配置されますが、内部パラメーターのプロパティは1と 2 の値に上書きされます。コードを変更すれば問題は解決します。id<tr>id: 48803id: 48769$("#grid").jqGrid('addRowData', i + 1, mydata[i]);idi + 14880348769iddata$("#grid").jqGrid('addRowData', data[i][0], mydata[i]);

それでも、コードを書き直すことを強くお勧めします。最初に を入力してから、 abdオプションmydataを使用してグリッドを作成する必要があります。使用するデータに対応するようにさらに修正する必要があります。pagerの代わりに追加して使用することをお勧めします。現在のコードはデータの最初の 20 行 (デフォルト値は 20) を表示するだけで、ユーザーは次のページを見ることができません。data: mydatagridview: truesorttypeheight: "auto"height: 250rowNum

于 2012-06-27T07:51:33.837 に答える