고정 된 열의 행 높이 고정 jqgrid 4.6

Question

this article을 사용하여 JQGrid의 고정 된 열의 행 높이를 수정하려고합니다. 나는 며칠이 지난 지금부터 일하도록 노력해 왔습니다. 그리드로드가 적절하게 확장되었지만 여전히 열 머리글의 크기를 조정할 때 문제가 발생했습니다.

원래 코드에 수행 한 수정 만 다음 조건을 fixPositionsOfFrozenDivs 함수에 추가하는 것입니다.

1. 부하 계통 :

   if (this.grid !== undefined) { }

   문제를 재현한다.

2. 고정 된 열의 높이를 다시 조정할 수 있도록 열 머리글의 너비를 줄이십시오. 이것은 그 때 다시 크기 열 머리글을 표시하는 방법입니다

   $.jgrid.no_legacy_api = true; 
   $.jgrid.useJSON = true; 
   
   //<![CDATA[ 
   /*global $ */ 
   /*jslint browser: true, nomen: true */ 
   $(document).ready(function() { 
       var budgetType = $('#IntBudgetType').val(); 
       var budgetExportJQGridDefaults = { 
        colNames: ['Item Control No', 'Budget Revision'], 
        shrinkToFit: false, 
        colModel: [ 
         { 
          name: 'ItemCode', index: 'ItemCode', search: true, width: 190, cellattr: makeCellContentWrap, frozen: true, searchoptions: { 
           sopt: jqGridSearchOperationsFor.String, 
          }, 
          searchrules: jqGridSearchRulesFor.DefaultMandatory 
         }, 
         { 
          name: 'BudgetRevision', index: 'BudgetRevision', search: true, width: 120, searchtype: 'number', cellattr: makeCellContentWrap, searchoptions: { 
           sopt: jqGridSearchOperationsFor.Number 
          }, 
          searchrules: jqGridSearchRulesFor.PositiveIntMandatory 
         }, 
        ], 
        pager: '#BudgetExportGridPager', 
        rowNum: paramFromView.PageSize, 
        sortname: paramFromView.SortName, 
        sortorder: paramFromView.SortOrder, 
        url: paramFromView.Url, 
        afterInsertRow: afterInsert, 
        loadComplete: function() { 
         fixPositionsOfFrozenDivs.call(this); 
        } 
   
       }; 
       //Add filter only if it's available (an attempt to fire searchrules validations when loading) 
       if (paramFromView.hasFilter) { 
        budgetExportJQGridDefaults = $.extend({}, budgetExportJQGridDefaults, { 
         postData: { 
          filters: paramFromView.filterStr 
         }, 
         search: paramFromView.hasFilter 
        }) 
       } 
       var budgetExportJQGridSearchDefaults = { 
   
       }; 
   
       budgetExportJQGridDefaults = $.extend({}, jqGridAppDefaults, budgetExportJQGridDefaults); 
       budgetExportJQGridSearchDefaults = $.extend({}, jqGridSearchDefauls, budgetExportJQGridSearchDefaults); 
   
       $('#BudgetExportGrid').jqGrid(budgetExportJQGridDefaults).navGrid('#BudgetExportGridPager', jqGridNavGridDefaultParameters, 
       {}, 
       {}, 
       {}, 
       budgetExportJQGridSearchDefaults); 
   
       $("#BudgetExportGrid").jqGrid('setFrozenColumns'); 
   
       function ResizeGridAfterScreenResize() { 
        $('#BudgetExportGrid').jqGrid('setGridWidth', $('#BudgetExportGrid').parents('.main-content').width() - 2); 
       } 
       function afterInsert(rowid, rowdata) { 
        var val = $(this).jqGrid('getCell', rowid, 'Error');; 
        if (val != '') { 
         $(this).jqGrid('setRowData', rowid, false, 'ui-state-error'); 
        } 
   
       } 
   
       $(window).resize(function() { 
        clearTimeout(this.id); 
        this.id = setTimeout(function() { 
         ResizeGridAfterScreenResize(); 
        }, 300); 
       }); 
   
       //fire 1st time when page has loaded 
       ResizeGridAfterScreenResize(); 
   
       //}); 
   
   
       'use strict'; 
       $grid = $("#list"), 
       resizeColumnHeader = function() { 
        var rowHight, resizeSpanHeight, 
         // get the header row which contains 
         headerRow = $(this).closest("div.ui-jqgrid-view") 
          .find("table.ui-jqgrid-htable>thead>tr.ui-jqgrid-labels"); 
   
        // reset column height 
        headerRow.find("span.ui-jqgrid-resize").each(function() { 
         this.style.height = ''; 
        }); 
   
        // increase the height of the resizing span 
        resizeSpanHeight = 'height: ' + headerRow.height() + 'px !important; cursor: col-resize;'; 
        headerRow.find("span.ui-jqgrid-resize").each(function() { 
         this.style.cssText = resizeSpanHeight; 
        }); 
   
        // set position of the dive with the column header text to the middle 
        rowHight = headerRow.height(); 
        headerRow.find("div.ui-jqgrid-sortable").each(function() { 
         var $div = $(this); 
         $div.css('top', (rowHight - $div.outerHeight())/2 + 'px'); 
        }); 
       }, 
       fixPositionsOfFrozenDivs = function() { 
        var $rows; 
        if (this.grid !== undefined) { 
         if (this.grid.fbDiv !== undefined) { 
          $rows = $('>div>table.ui-jqgrid-btable>tbody>tr', this.grid.bDiv); 
          $('>table.ui-jqgrid-btable>tbody>tr', this.grid.fbDiv).each(function (i) { 
           var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height(); 
           if ($(this).hasClass("jqgrow")) { 
            $(this).height(rowHight); 
            rowHightFrozen = $(this).height(); 
            if (rowHight !== rowHightFrozen) { 
             $(this).height(rowHight + (rowHight - rowHightFrozen)); 
            } 
           } 
          }); 
          $(this.grid.fbDiv).height(this.grid.bDiv.clientHeight); 
          $(this.grid.fbDiv).css($(this.grid.bDiv).position()); 
         } 
   
         if (this.grid.fhDiv !== undefined) { 
          $rows = $('>div>table.ui-jqgrid-htable>thead>tr', this.grid.hDiv); 
          $('>table.ui-jqgrid-htable>thead>tr', this.grid.fhDiv).each(function (i) { 
           var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height(); 
           $(this).height(rowHight); 
           rowHightFrozen = $(this).height(); 
           if (rowHight !== rowHightFrozen) { 
            $(this).height(rowHight + (rowHight - rowHightFrozen)); 
           } 
          }); 
          $(this.grid.fhDiv).height(this.grid.hDiv.clientHeight); 
          $(this.grid.fhDiv).css($(this.grid.hDiv).position()); 
         } 
        } 
       }, 
       fixGboxHeight = function() { 
        var gviewHeight = $("#gview_" + $.jgrid.jqID(this.id)).outerHeight(), 
         pagerHeight = $(this.p.pager).outerHeight(); 
   
        $("#gbox_" + $.jgrid.jqID(this.id)).height(gviewHeight + pagerHeight); 
        gviewHeight = $("#gview_" + $.jgrid.jqID(this.id)).outerHeight(); 
        pagerHeight = $(this.p.pager).outerHeight(); 
        $("#gbox_" + $.jgrid.jqID(this.id)).height(gviewHeight + pagerHeight); 
       }; 
   
   
       $grid.jqGrid('gridResize', { 
        minWidth: 450, 
        stop: function() { 
         fixPositionsOfFrozenDivs.call(this); 
         fixGboxHeight.call(this); 
        } 
       }); 
       $grid.bind("jqGridResizeStop", function() { 
        resizeColumnHeader.call(this); 
        fixPositionsOfFrozenDivs.call(this); 
        fixGboxHeight.call(this); 
       }); 
       resizeColumnHeader.call($grid[0]); 
       $grid.jqGrid('setFrozenColumns'); 
       $grid.triggerHandler("jqGridAfterGridComplete"); 
       fixPositionsOfFrozenDivs.call($grid[0]); 
   }); 
   //]]> 
   

   : 다음

내 코드입니다.

내가 잘못 여기서 뭐하는 거지?

Answer 1

시도 the following demo. 같은 문제가 있습니까? 여기에서 문제를 재현 할 수 있다면 전체 테스트 케이스 (문제가 단계적으로 어떻게 재현 될 수 있는지)를 설명하십시오.

업데이트 됨 : 게시 한 코드는 이전 코드와 내 데모 코드의 조합으로 보입니다. 문제는 줄 $grid = $("#list")에 있습니다. 내 데모에서 id="list"으로 그리드를 사용하지만 id="BudgetExportGrid"으로 그리드를 사용합니다. 그래서 $grid.bind("jqGridResizeStop", ...)은 작동하지 않습니다. 올바른 ID를 사용해야하며 크기 조정시 문제가 해결되어야합니다.