当我使用gridview:true时，afterInsertRow:function(ids)方法未执行 [英] The afterInsertRow : function(ids) method is not executing when I use gridview:true
问题描述
当我在我们的jqGrid中将 gridview 设置为 true (gridview:true)以提高jqGrid的性能时，使用 afterInsertRow 之类的方法，或其他类似方法未执行. 以下是我的jgGrid的代码:
When I set gridview to true (gridview:true) in our jqGrid to increase the performance of jqGrid, the method like afterInsertRow, or other similar methods are not executed. Following is the code of my 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});
},
前面的代码用于显示自定义工具提示.请告诉我我在做什么错.
The preceding code is used to show customize tool tip. Please suggest me what I am doing wrong.
请帮助我
谢谢， DISMGMT
Thanks, DISMGMT
推荐答案
接下来是gridview:true用法的含义.在网格视图"模式下，将作为字符串创建最多的网格.确切地说，是为每个网格行构建一个带有HTML标记的子字符串数组，一个由字符串数组根据join('')创建一个字符串，然后才创建一个表示网格的DOM对象.它不仅提高了对长字符串(join(''))的处理效果，而且还因为减少了对DOM对象的处理而降低了性能，而DOM对象的处理要比对字符串的处理慢得多.
The sense of the usage of gridview:true is following. In the "gridview" mode the most grid contain will be created as a string. To be exactly one builds an array of substrings with HTML markup for every grid row, one creates one string from the string array with respect of join('') and only then one creates an DOM object represented the grid. It improves the performance not only because of better working with the long strings (join('')), but because of reducing working with DOM objects which is much slowly as working with strings.
因此，我建议您完全不使用afterInsertRow.取而代之的是，您可以成功地对以下代码执行相同的操作
So I recommend you not use afterInsertRow at all. Instead of that you can successfully do the same with respect of the following code
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中.
which you can include in the gridComplete or loadComplete.
您将使用自定义格式化程序来获得最佳性能对于要在其中设置自定义工具提示的列ds_name.实现非常简单，因为您的自定义格式化程序将以rowObject参数的形式接收服务器数据的行，就像从服务器(作为数组或作为对象)接收数据的形式一样.正确的hidden4将立即可用(我建议您阅读此答案以获取更多详细信息).
The best performance you will archive using custom formatter for the column ds_name where you want to set the custom tooltip. The implementation is pretty simple because your custom formatter will receive as the rowObject parameter the row of the server data in the same form like it will be received from the server (as array or as an object). The properly hidden4 will be immediately accessible (I recommend you to read this answer for more details).
已更新:答案很旧. jqGrid提供了许多替代的实现方式，从性能的角度来看，这些方式要好得多.页面上的所有更改都遵循浏览器 reflow .因此，在循环中使用setCell无效. cellattr或rowattr的使用要好得多，并且要继续使用gridview: true，答案中描述了这些优点.一个>.
UPDATED: The answer is very old. jqGrid provides many alternative implementation ways which are much better from the performance point of view. Every change on the page follows browser reflow. So the usage of setCell in the loop is not effective. Much better is the usage of cellattr or rowattr and to continue to use gridview: true which advantages are described in the answer.
答案演示了一种非常有效的方法，该方法使用cellattr而不是setCell在单元格上设置title在当前答案中使用. 另一个答案提供了使用cellattr的另一个常见示例.要设置网格行的属性，可以使用rowattr回调.有关代码示例，请参见答案.
The answer demonstrates very effective way to set title on the cell using cellattr instead of setCell used in the current answer. Another answer provide one more common example to use cellattr. To set attributes of the rows of the grid one can use rowattr callback. See the answer for the code example.
这篇关于当我使用gridview:true时，afterInsertRow:function(ids)方法未执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
