Использование подсетки в jqGrid с данными из родительской строки - PullRequest
0 голосов
/ 24 июня 2018

У меня есть jqGrid для отображения данных в группах;слишком много столбцов для удобного просмотра, поэтому я хочу поместить менее важные данные в подсетку.В любой подсетке будет только один ряд.Данные для строки подсетки будут получены одновременно с данными в родительской строке;Я хотел бы использовать обратный вызов subGridRowExpanded, чтобы получить данные из родительской строки и поместить их в строку подсетки, когда пользователь развернет строку, чтобы увидеть подсеть.

Отдельно от показанного здесь, я попыталсяиспользуя subGridModel, чтобы указать имя подсетки, но в этом случае и для показанного кода subGridRowExpanded не вызывается, и я не знаю почему.

$(document).ready(function() {
    $(".aclSection").show();
    setListGrid();

    function setListGrid() {
        console.log("entering setListGrid() in opportunitySalesFunnelList.js");

        $("#listGrid").jqGrid(getGridSettings());
        $("#listGrid").jqGrid('navGrid', '#funnelOpportunityListPager',
                { cloneToTop:true,refreshtitle: "Reload Grid",
                    refreshtext: "Refresh Grid",
                    refreshstate:"current",
                    refresh: false,edit:false, add:false, del:false, search:false 
                }
        );

        $(window).bind('resize', function() {
            jQuery("#grid").setGridWidth($('.gridParent').width()-30, true);
        }).trigger('resize');
    }

    function getGridSettings() {

        return {
                url: "/salespoint/secure/funnel/opportunity/list/getDataMap"
               ,datatype:   "json"
               ,height:     "auto"
               ,width:      950
               ,shrinkToFit: true
               ,loadtext:   "Loading..."
               ,colNames:   ["Sales Mgr"
                               ,"Agency / Spersn"
                               ,"Sales Code"
                               ,"Pros Name"
                               ,"Prob"
                               ,"Opp ID"
                               ,"Opp Name"
                               ,"Stg/Sts"
                               ,"3 YR MRC"
                               ,"3 YR NRC"
                               ,"Last Activity"
                               ,"Notes"
                             ]
               ,colModel:[
                   {name:"salesManager",        index:"salesManager"            }
                  ,{name:"agencyOrSalesperson", index:"agencyOrSalesperson"     }
                  ,{name:"salesCode",           index:"salesCode"               }
                  ,{name:"prospectName",        index:"prospectName"            ,align:'left'}
                  ,{name:"probability",         index:"probability"             }
                  ,{name:"opportunityId",       index:"opportunityId"           }
                  ,{name:"opportunityName",     index:"opportunityName"         ,align:'left'}
                  ,{name:"stageAndStatus",      index:"stageAndStatus"          }
                  ,{name:"mrc3yr",              index:"mrc3yr"                  ,align:'right' , summaryType:'sum', summaryRound: 2, summaryRoundType: 'fixed' }
                  ,{name:"nrc3yr",              index:"nrc3yr"                  ,align:'right' , summaryType:'sum', summaryRound: 2, summaryRoundType: 'fixed' }
                  ,{name:"lastActivity",        index:"lastActivity"            ,align:'left'   }
                  ,{name:"noteCount",           index:"noteCount"               }
               ]
              ,gridview: true
              ,subGrid: true
              ,subGridRowExpanded: function(subgrid_id, rowId1) { 
                  console.log("subGridRowExpanded, subGridDivId1/rowId1:" + subGridDivId1 + "/" + rowId1);
                  var subgrid_table_id;
                  subgrid_table_id = subgrid_id + "_t";
                  var listGrid = $("#" + subgrid_id);
                  listGrid.html("<table id='" + subgrid_table_id + "' class='scroll'></table>");
                  listGrid.jqGrid({
                       colNames: ["Pros ID","Pros Age","Opp Age","Location Count by Service","# Locs","Activity Date","Activity Created By"]
                      ,colModel: [ {name:"prospectId",          index:"prospectId"              }
                              ,{name:"prospectAge",         index:"prospectAge"             }
                              ,{name:"opportunityAge",      index:"opportunityAge"          }
                              ,{name:"locationServiceCount",index:"locationServiceCount"    ,align:'left' }
                              ,{name:"numberOfLocations",   index:"numberOfLocations"       }
                              ,{name:"activityDate",        index:"activityDate"            }
                              ,{name:"activityCreatedBy",   index:"activityCreatedBy"       }
                             ]
                      ,rowNum: 1
                      ,height: '100%'
                  })

                  var rowData = $(this).getRowData(rowId1);
              }
              ,grouping:true
              ,groupingView:
                  {
                      groupField: ["salesManager"]
                      ,groupColumnShow: [true]
                      ,groupText: ["<b>{0}</b>"]
                      ,groupOrder: ["asc"]
                      ,groupSummary: [true] // will use the "summaryTpl" property of the respective column
                      ,groupCollapse: false
                      ,groupDataSorted: true
                      ,formatDisplayField: [function(curValue, srcValue, colModelOption, grpIndex, grpObject) {
                          return srcValue.toFixed(2);
                      }]
                  }
              ,footerrow:true
              ,userDataOnFooter:true
              ,rowNum: 20
              ,rowList:[20,50,100,100000000]
              ,rowTotal:4000
              ,loadonce:true
              ,ignoreCase:true
              ,viewRecords:true
              ,onPaging:function(pgButton) {
                  var rowNum = $("#listGrid").getGridParam("rowNum");
                  $.cookie("userOptions_prospectListPagingSize", rowNum);
               }
              ,gridComplete:function(id) {
                  $("#listGrid").setGridWidth($('.gridParent').width(), true);
                  $("#listGrid").trigger("resize", [{page:1}]);
              }
              ,emptyrecords: '<span class="jqGridHighlight">No records found</span>'
              ,pager        : '#funnelOpportunityListPager'
        };
    }

});

Когда я нажимаю на значок плюса (который появляется), ничего не происходит, и точка прерывания, установленная в первой строке кода в subGridRowExpanded, не срабатывает.Почему он не вызывается, и у меня есть остальные настройки для отображения данных?


редактировать после ответа Олега:

Версия - версия 4.7 trirand передбесплатные / коммерческие вилки.Извините, я не вставил это изначально, я как бы продолжал предыдущий вопрос, но я должен был включить его.

Да, данные сортируются в salesManager, когда они возвращаются с сервера.Как я уже сказал, группировка работает;это подсетка, которая не работает.

Как я уже сказал, rowNum of 1 является точным, в основной строке всегда есть только одна подстрока.Цель здесь - показать больше столбцов с одинаковым индексом.Подсетка полезна, когда есть дети ряда, но в моем случае есть только один ребенок.Я рад увеличить это число, но это самое большое (и наименьшее) количество строк, для которых в моем случае есть данные.

Я попытался исправить subGridRowExpanded с вашими предложениями, вот чтотеперь это выглядит так:

            ,subGridRowExpanded: function (subgridDivId, rowid) {
                var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
                parentRowData = $(this).jqGrid("getLocalRow", rowid),
                // the next line can be used if parent grid doesn't contain local data
                //parentRowData = $(this).jqGrid("getRowData", rowid),
                $subgridDataDiv = $("#" + subgridDivId);

                $subgridDataDiv.append($subgrid); // place subgrid table on the page
                // create subgrid
                $subgrid.jqGrid({
                    colNames: ["Pros ID","Pros Age","Opp Age","Location Count by Service","# Locs","Activity Date","Activity Created By"]
                    ,colModel: [ {name:"prospectId",         }
                                ,{name:"prospectAge"         }
                                ,{name:"opportunityAge"      }
                                ,{name:"locationServiceCount", align:'left' }
                                ,{name:"numberOfLocations"   }
                                ,{name:"activityDate"        }
                                ,{name:"activityCreatedBy"   }
                               ]
                ,rowNum: 1
                ,height: '100%'
                });
            }        

Есть закомментированная строка, которую, как вы говорите, можно использовать, "если родительская сетка не содержит локальных данных", но моя родительская сетка действительно содержит данные для подсетки, поэтомуЯ думал, что строка должна оставаться прокомментированной.JSON для данных сетки выглядит следующим образом:

{
  "userdata": {
    "nrc3yr": "2705545.00",
    "mrc3yr": "2798103.26"
  },
  "records": "4",
  "rows": [{
    "prospectName": "Big Daddy Daycare",
    "opportunityName": "Opp2018-06-22",
    "nrc3yr": "295.00",
    "salesCode": "CMR",
    "probability": "50%",
    "noteCount": 0,
    "subgrid": [{
      "prospectId": 309,
      "prospectAge": "2",
      "activityDate": "06-22-2018",
      "opportunityAge": 2,
      "numberOfLocations": 1,
      "locationServiceCount": "Cable (1), IP Hosted (1)",
      "activityCreatedBy": "rcook"
    }],
    "agencyOrSalesperson": "CMR",
    "opportunityId": 696,
    "salesManager": "CMR",
    "stageAndStatus": "Draft\/Create",
    "mrc3yr": "223.01",
    "lastActivity": "Opportunity (696) created (Opp2018-06-22)"
  },
  {
    "prospectName": "Wine Not",
    "opportunityName": "Opp20180410-1051",
    "nrc3yr": "0.00",
    "salesCode": "ADV004",
    "probability": "50%",
    "noteCount": 17,
    "subgrid": [{
      "prospectId": 297,
      "prospectAge": "89",
      "activityDate": "06-07-2018",
      "opportunityAge": 75,
      "numberOfLocations": 1,
      "locationServiceCount": "EoC Symmetric (1)",
      "activityCreatedBy": "rcook"
    }],
    "agencyOrSalesperson": "ADV",
    "opportunityId": 682,
    "salesManager": "JWE",
    "stageAndStatus": "Proposal\/In Progress",
    "mrc3yr": "312.60",
    "lastActivity": "Proposal (1,099) published (Prop20180607-1642)"
  },
  {
    "prospectName": "Ever Lovin' Lovin",
    "opportunityName": "Opp20180531-1943",
    "nrc3yr": "0.00",
    "salesCode": "RTB",
    "probability": "50%",
    "noteCount": 0,
    "subgrid": [{
      "prospectId": 307,
      "prospectAge": "24",
      "activityDate": "05-31-2018",
      "opportunityAge": 24,
      "numberOfLocations": 1,
      "locationServiceCount": "EoC Asymmetric (1)",
      "activityCreatedBy": "rcook"
    }],
    "agencyOrSalesperson": "RTB",
    "opportunityId": 690,
    "salesManager": "RTB",
    "stageAndStatus": "Proposal\/Complete",
    "mrc3yr": "129.95",
    "lastActivity": "Proposal (1,098) published (Prop20180531-1947)"
  },
  {
    "prospectName": "mothra",
    "opportunityName": "big",
    "nrc3yr": "2705250.00",
    "salesCode": "RTB",
    "probability": "50%",
    "noteCount": 0,
    "subgrid": [{
      "prospectId": 280,
      "prospectAge": "153",
      "activityDate": "06-12-2018",
      "opportunityAge": 13,
      "numberOfLocations": 501,
      "locationServiceCount": "Dedicated (501), EoF Symmetric (500), POTS (500)",
      "activityCreatedBy": "alexdev"
    }],
    "agencyOrSalesperson": "RTB",
    "opportunityId": 691,
    "salesManager": "RTB",
    "stageAndStatus": "Proposal\/Complete",
    "mrc3yr": "2797437.70",
    "lastActivity": "Proposal (1,106) published (big prop 7)"
  }]
}

Самая большая проблема, с которой я сталкиваюсь в настоящий момент, заключается в том, что функция для subGridRowExpanded никогда не вызывается.Я поместил точку останова и вызов console.log () в начале процедуры, и точка останова не была достигнута, и сообщение console.log () не появилось.Как будто что-то не так с настройкой для вызова subGridRowExpanded, и я не знаю, что это такое.

-

Дополнительная информация - если я закомментирую конфигурацию группировки, тонажатие на знак плюс вызывает функцию subGridRowExpanded.Возможно ли, что в 4.7 jqGrid нельзя использовать группировку и подсетку в одной сетке?Расширение показывает только новые заголовки столбцов, но не данные, я пытаюсь выяснить, почему это так.Если есть возможность использовать обе эти функции в одной сетке, я хотел бы знать об этом

1 Ответ

0 голосов
/ 25 июня 2018

Текущий код subGridRowExpanded неверен.При щелчке на значке подсетки (обычно «+») jqGrid добавляет строку под текущей строкой, где div покрывает большинство столбцов.Идентификатор div будет перенаправлен на subGridRowExpanded в качестве первого параметра.По коду var listGrid = $("#" + subgrid_id); вы получаете упаковщик jQuery на div и вызываете listGrid.jqGrid({...}) на div.С другой стороны, jqGrid может быть создан только на элементе <table>.Вы можете исправить код, добавив .children("table") (я имею в виду использование listGrid.children("table").jqGrid({...})) или используя шаблон как

subGridRowExpanded: function (subgridDivId, rowid) {
    var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
        parentRowData = $(this).jqGrid("getLocalRow", rowid),
        // the next line can be used if parent grid doesn't contain local data
        //parentRowData = $(this).jqGrid("getRowData", rowid),
        $subgridDataDiv = $("#" + subgridDivId);

    $subgridDataDiv.append($subgrid); // place subgrid table on the page
    // create subgrid
    $subgrid.jqGrid({
        // ...
    });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...