2010-12-15 5 views
6
私は (GridViewコントロール:真)に GridViewのを設定

jqGridのパフォーマンス、afterInsertRowのような方法を高めるために私たちのjqGridで、または他の同様の方法は実行されない。続き は私のjgGridのコードです:上記のコードは、カスタマイズツールチップを表示するために使用されafterInsertRow:機能(IDS)メソッドを実行していない私は、GridViewコントロールを使用する場合はtrueを

afterInsertRow : function(ids) { // shows custom tooltip 
    var customToolTip = jQuery("#displaylistGrid").getCell(ids,'ds_name') + " -- " + 
         jQuery("#displaylistGrid").getCell(ids,'hidden4') ; 
    $("#displaylistGrid").setCell(ids,'ds_name', '','',{title:customToolTip}); 
}, 

jQuery("#displaylistGrid").jqGrid({ 
    url: contextRoot + '/StandardProxy/displayListService?userRole='+ 
     userRole+'&userName='+userName+'&userId='+userId+ 
     '&duration='+displayDuration+'&wicNo='+wicNo+ 
     '&displayName='+dlDisplayName+'&displayNameArr='+displayNameArr+ 
     '&pointValue='+pValue+'&locationId='+locId+'&locationCode='+ 
     locCode+'&serviceType=forecast', 
    datatype: 'json', 
    colNames: ["CM Name", "Display ", "Loc. Pt.","Max. Ben." ,"Display Name", 
       "Items w/Fcst", "Units", "Sales $", "Profit $", "GP%", "Units", 
       "Sales $", "Profit $", "GP%","Hidden","Hidden1","Hidden2", 
       "Start Date and End Date", "Hidden4"], 
    colModel: [ 
     { name: "cm_name",  index: "cm_name",  sorttype: "text", width: 120, 
      resizable: true }, 
     { name: "ds_location", index: "ds_location", sorttype: "text", width: 120, 
      resizable: true }, 
     { name: "ds_symbol", index: "ds_symbol", sorttype: "text", width: 50, 
      align: "center",  resizable: true }, 
     { name: "ds_benchMark", index: "ds_benchMark",sorttype: "text", width: 50, 
      align: "center",  resizable: true }, 
     { name: "ds_name",  index: "ds_name",  sorttype: "text", width: 230, 
      resizable: true }, 
     { name: "ds_ItemFrcst", index: "ds_ItemFrcst",sorttype: "int", width: 60, 
      align: "center",  resizable: true, 
      unformat: addDemoninatorSortingFormatter }, 
     { name:"ds_units_promo",index:"ds_units_promo",sorttype:"float",width: 85, 
      align: "right",  unformat : spaceFormatter }, 
     { name:"ds_sales_promo",index:"ds_sales_promo",sorttype:"float",width: 95, 
      align: "right",  unformat : spaceFormatter }, 
     { name: "displaylistGrid_ds_profit_promo", 
      index: "displaylistGrid_ds_profit_promo", 
      sorttype: "float", width: 95,    align: "right", 
      unformat : spaceFormatter }, 
     { name:"ds_gp_pct_promo",index:"ds_gp_pct_promo",sorttype:"int",width: 50, 
      align: "right",  unformat : spaceFormatter }, 
     { name: "ds_units_per_store_week", 
      index: "ds_units_per_store_week",   sorttype:"float",width: 85, 
      align: "right",  unformat : spaceFormatter }, 
     { name: "ds_sales_per_store_week", 
      index: "ds_sales_per_store_week", 
      sorttype: "float", width: 90,    align: "right", 
      unformat : spaceFormatter }, 
     { name: "ds_profit_per_store_week", 
      index: "ds_profit_per_store_week", 
      sorttype: "float", width: 90,    align: "right", 
      unformat : spaceFormatter }, 
     { name: "ds_gp_pct_per_store_week", 
      index: "ds_gp_pct_per_store_week", 
      sorttype: "float", width: 40,    align: "right", 
      unformat : spaceFormatter }, 
     { name: "hidden1",  index: "hidden1",  sorttype: "int", 
      align: "center",  hidden: true }, 
     { name: "hidden2",  index: "hidden2",  sorttype: "text", 
      align: "center",  hidden: true }, 
     { name: "hidden3",  index: "hidden3",  sorttype: "int", 
      align: "center",  hidden: true }, 
     { name:"forecast_dates",index:"forecast_dates",sorttype: "text", 
      align: "center",  hidden: true }, 
     { name: "hidden4",  index: "hidden4",  sorttype: "text", 
      align: "center",  hidden: false } 
    ], 
    onSelectRow: function(ids){ 
     //checkDisplayDetail(); 
     //setDefaultValuesToTheSortingParams(); 
     var dropDownVal = document.getElementById("displayDetailSelection").value; 
     var subTabName = document.getElementById("detailSubTabName").value; 
     if(subTabName=="Active") 
      dropDownVal = document.getElementById("displayDetailActiveSelection").value; 
     reLoadDisplayDetailData(ids,'forecast',dropDownVal,subTabName); 
    }, 
    afterInsertRow : function(ids) { // shows custom tooltip 
     var customToolTip = jQuery("#displaylistGrid").getCell(ids,'ds_name') + 
        " -- " + jQuery("#displaylistGrid").getCell(ids,'hidden4'); 
     $("#displaylistGrid").setCell(ids,'ds_name', '','',{title:customToolTip}); 
    }, 
    gridComplete : function(){ 
     if($("#isForecastedSalesGridLoaded").val()=="no"){ 
      $("#jqgh_displaylistGrid_ds_profit_promo").click(); 
     } 
     else{ 
      $("#isForecastedSalesGridLoaded").val("no"); 
     } 
    }, 
    onSortCol : function(){ 
     $("#isForecastedSalesGridLoaded").val("yes"); 
    }, 
    width: 983, 
    rowNum: 999, 
    height: eval(heightOfDispListGrid()+7), 
    toolbar: [true, "top"], 
    viewrecords: true, 
    treeIcons: {leaf: "ui-icon-document-b"}, 
    treeGrid: true, 
    treeGridModel: 'nested', 
    ExpandColumn : 'Description', 
    ExpandColClick: true, 
    loadonce:false, 
    refresh : true, 
    shrinkToFit: true, 
    gridview:true,   
    sortorder:"asc", 
    sortname:"displaylistGrid_ds_profit_promo" 
}); 

afterInsertRowメソッドのコードです。私が間違っていることを教えてください。

gridview:trueの使用感は以下の通りです

おかげで、 DISMGMT

答えて

4

を助けてください。 "gridview"モードでは、大部分のグリッドはという文字列としてに作成されます。正確には、グリッド行ごとにHTMLマークアップを持つ部分文字列を作成するには、join('')に関して文字列配列から文字列を1つ作成し、グリッドを表すDOMオブジェクトを作成します。これは、長い文字列(join(''))を使用した方が優れているだけでなく、文字列を扱う際に非常に遅いDOMオブジェクトの使用を減らすため、パフォーマンスが向上します。

だから、afterInsertRowを一切使用しないことをお勧めします。その代わりに、あなたは成功しますがgridCompleteまたはloadCompleteに含めることができ、次のコード

var myGrid = jQuery("#displaylistGrid"); 
var ids = myGrid.jqGrid('getDataIDs'); 
for (var i = 0; i < ids.length; i++) { 
    var id=ids[i]; 
    var customToolTip = myGrid.jqGrid('getCell',ids,'ds_name') + " -- " + 
         myGrid.jqGrid('getCell',ids,'hidden4'); 
    myGrid.jqGrid('setCell',ids,'ds_name', '','',{title:customToolTip}); 
} 

の敬意と同じことを行うことができます。

カスタムツールチップを設定する列ds_nameの列にcustom formatterを使用してアーカイブすると、最高のパフォーマンスが得られます。カスタムフォーマッタはサーバデータをサーバから(配列またはオブジェクトとして)受け取るような形式でサーバデータの行をrowObjectパラメータとして受け取るので、実装は非常に簡単です。適切にhidden4にすぐにアクセスできます(詳細はthis answerをお読みください)。

更新済み:回答は非常に古いです。 jqGridは、パフォーマンスの観点からはるかに優れた多くの代替実装方法を提供します。ページ上のすべての変更は、ブラウザreflowに従います。したがって、ループ内でのsetCellの使用は効果的ではありません。 cellattrまたはrowattrの使用法がさらによく、gridview: trueを引き続き使用する利点は、the answerに記載されています。

The answerは、現在の回答で使用されているsetCellの代わりにcellattrを使用してセルにtitleを設定する非常に有効な方法を示しています。 Another answerは、cellattrを使用するもう1つの一般的な例を提供します。グリッドの行の属性を設定するには、rowattrコールバックを使用できます。コード例については、the answerを参照してください。

関連する問題