排序时如何防止jqgrid被折叠

Posted

技术标签:

【中文标题】排序时如何防止jqgrid被折叠【英文标题】:How to prevent from being collapsed jqgrid while sorting 【发布时间】:2014-05-05 21:51:15 【问题描述】:

我已经在我的 asp.net mvc 项目中实现了 jqgrid 并且它工作正常,我在排序时遇到问题。在加载时我保持 groupCollapse = true 并且我需要它但是当我打开任何组并单击以对其进行排序时折叠它。是否有任何解决方案可以防止打开组在排序时被折叠。

我的代码在这里

 jQuery("#tblEmployeeReport").jqGrid(
                      data: ParsedJson,
                      datatype: "local",
                      height: 'auto',
                      width: 'auto',
                      rowNum: 50,
                      rowList: [50, 100],
                      colNames: ['Date', 'Clock In', 'Clock Out', 'Working Hr'],
                      colModel: [
                           name: 'DayDate', index: 'DayDate', width: 90, sorttype: "date", resizable: false, ,
                           name: 'ClockIn', index: 'ClockIn', width: 100, resizable: false, ,
                           name: 'ClockOut', index: 'ClockOut', width: 100, resizable: false, ,
                           name: 'Working_Hr', index: 'Working_Hr', width: 100, resizable: false, ,
                      ],
                      pager: "#EmployeeReportPager",
                      viewrecords: true,
                      sortorder: "desc",
                      caption: "Employee Report",
                      sortname: 'DayDate',
                      grouping: true,
                      resizable: false,
                      groupingView: 
                          groupField: ['DayDate'],
                          groupText: ['<b>0 - 1 Employee</b>'],
                          groupCollapse: true,
                          groupOrder: ['asc']
                      
                  );
                  jQuery("#tblEmployeeReport").jqGrid('navGrid', '#EmployeeReportPager',  add: false, edit: false, del: false );

【问题讨论】:

得到了我的问题的解决方案,它只是添加了更多的事件 【参考方案1】:

得到了我的问题的解决方案。只需再添加两个事件并实现逻辑

更新代码,

var expandEmpGroups = [];

 jQuery("#tblEmployeeReport").jqGrid(
                      data: ParsedJson,
                      datatype: "local",
                      height: 'auto',
                      width: 'auto',
                      rowNum: 50,
                      rowList: [50, 100],
                      colNames: ['Date', 'Clock In', 'Clock Out', 'Working Hr'],
                      colModel: [
                           name: 'DayDate', index: 'DayDate', width: 90, sorttype: "date", resizable: false, ,
                           name: 'ClockIn', index: 'ClockIn', width: 100, resizable: false, ,
                           name: 'ClockOut', index: 'ClockOut', width: 100, resizable: false, ,
                           name: 'Working_Hr', index: 'Working_Hr', width: 100, resizable: false, ,
                      ],
                      pager: "#EmployeeReportPager",
                      viewrecords: true,
                      sortorder: "desc",
                      caption: "Employee Report",
                      sortname: 'DayDate',
                      grouping: true,
                      resizable: false,
                      groupingView: 
                          groupField: ['DayDate'],
                          groupText: ['<b>0 - 1 Employee</b>'],
                          groupCollapse: true,
                          groupOrder: ['asc']
                      ,
                      onClickGroup: function (hid, collapsed) 

                          var i;
                          i = $.inArray(hid, expandedEmpGroups) > -1;

                          if (!collapsed && i == false) 
                              expandedEmpGroups.push(hid);
                          
                          else if (collapsed && i == true) 
                              //Grouphid.splice(i, 1);
                              expandedEmpGroups.splice($.inArray(hid, expandedEmpGroups), 1);
                          

                      ,

                      loadComplete: function () 
                          var $this = $(this)
                          if (expandedEmpGroups.length > 0) 
                              for (var i = 0; i <= expandedEmpGroups.length; i++) 
                                  if (typeof (expandedEmpGroups[i]) != "undefined") 
                                      $this.jqGrid("groupingToggle", expandedEmpGroups[i]);
                                  
                              
                          

                      
                  );
                  jQuery("#tblEmployeeReport").jqGrid('navGrid', '#EmployeeReportPager',  add: false, edit: false, del: false );

数组变量expandEmpGroups[]定义在外部作用域内。

【讨论】:

以上是关于排序时如何防止jqgrid被折叠的主要内容,如果未能解决你的问题,请参考以下文章

如何防止扩展的 React-Table 行在重新渲染时折叠?

防止电子邮件结尾被折叠

如何防止剑道抽屉在点击时折叠? (角度 - 剑道用户界面)

如何防止 Bootstrap 崩溃的子项在崩溃崩溃时调整大小

如何防止 Resizable 和 Draggable 元素相互折叠?

Bootstrap Accordion:防止打开的面板折叠