当我在jqGrid中将 gridview 设置为 true (gridview:true)以提高jqGrid的性能时,像 afterInsertRow 这样的方法,或者不执行其他类似的方法。 以下是我的jgGrid的代码:
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 方法的代码:
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});
},
上述代码用于显示自定义工具提示。请告诉我我做错了什么。
请帮帮我
谢谢, DISMGMT
答案 0 :(得分:4)
gridview:true
的用法意义如下。在“gridview”模式中,最多网格包含将创建为字符串。准确地说,为每个网格行构建一个带有HTML标记的子字符串数组,从字符串数组创建一个字符串,相对于join('')
,然后只创建一个表示网格的DOM对象。它提高了性能,不仅因为更好地处理长字符串(join('')
),而且因为减少了对DOM对象的处理,这对于使用字符串来说要慢得多。
所以我建议你根本不要使用afterInsertRow
。而不是你可以成功地对以下代码做同样的事情
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});
}
,您可以将其包含在gridComplete
或loadComplete
。
您将使用custom formatter为要设置自定义工具提示的列ds_name
存档的最佳效果。实现非常简单,因为您的自定义格式化程序将以rowObject
参数的形式接收服务器数据的行,其形式与从服务器(作为数组或作为对象)接收的服务器数据相同。可以立即访问正确的hidden4
(建议您阅读this answer了解更多详情。)
更新:答案很老。从性能的角度来看,jqGrid提供了许多替代实现方法,这些方法要好得多。页面上的每个更改都在浏览器reflow之后。因此,循环中setCell
的使用无效。更好的是使用cellattr
或rowattr
并继续使用gridview: true
the answer中描述了哪些优势。
The answer演示了使用title
代替当前答案中使用的cellattr
在单元格上设置setCell
的非常有效的方法。 Another answer提供了一个使用cellattr
的常见示例。要设置网格行的属性,可以使用rowattr
回调。有关代码示例,请参阅the answer。
答案 1 :(得分:2)
Note: this event does not fire if gridview option is set to true
我遇到了类似的问题,在阅读了jqgrid的wiki后,如果有其他人遇到同样的问题我会考虑提供文档链接。