Метод afterInsertRow: function (ids) не выполняется, когда я использую gridview: true

Question

Когда я устанавливаю gridview на true (gridview: true) в нашей jqGrid для увеличения производительности 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

Answer 1

Смысл использования 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.

Наилучшая производительность, которую вы будете архивировать, используя пользовательский форматер для столбца ds_name, где вы хотите установить пользовательскую подсказку. Реализация довольно проста, потому что ваш пользовательский модуль форматирования будет получать в качестве параметра rowObject строку данных сервера в той же форме, в которой они будут получены от сервера (в виде массива или в виде объекта). Правильно hidden4 будет сразу же доступен (я рекомендую прочитать этот ответ для более подробной информации).

ОБНОВЛЕНО : Ответ очень старый. jqGrid предоставляет много альтернативных способов реализации, которые намного лучше с точки зрения производительности. Каждое изменение на странице следует браузеру reflow . Поэтому использование setCell в цикле неэффективно. Гораздо лучше использовать cellattr или rowattr и продолжать использовать gridview: true, преимущества которого описаны в ответе .

Ответ демонстрирует очень эффективный способ установить title в ячейке, используя cellattr вместо setCell, использованного в текущем ответе. Другой ответ приведите еще один распространенный пример использования cellattr. Для задания атрибутов строк сетки можно использовать rowattr callback. См. ответ для примера кода.

Answer 2

Примечание: это событие не срабатывает, если для параметра gridview установлено значение true

У меня была похожая проблема, после прочтения вики jqgrid я подумал дать ссылку на документ, если кто-то еще сталкивается с таким жепроблема.