jqgrid表格高度宽度设置

# jqgrid表格高度宽度设置


## 问题说明


> 页面上使用上面搜索框，下面是jqgrid表格形式，总是出现，grid表格加载宽度、高度问题。本文通过主要解决表格高度宽度变化适应的问题。


## grid宽度


1. 修改文件jeesite.min.js，里面的 `changeGridTable`


```
$.changeGridTable = {
        changeStyle: function (table) {
            var t = this;
            setTimeout(function(){
                t.styleCheckbox(table);
                t.updateActionIcons(table);
                t.updatePagerIcons(table);
                t.enableTooltips(table);
            }, 0);
        },
        changeSize:function(tableId,callback){
            var changeGridWidth = function(gridWidth){
                $.each(tableId,function(i,n){
                    $(n).jqGrid('setGridWidth',gridWidth);
                });
            };
//子表格自适应宽度
var changeSubGridWidth = function () {
//判读是否存在子表
var subTable = $(tableId[0]).find('tr.ui-subgrid table.ui-jqgrid-btable.ui-common-table');
if (subTable.length < 1) {
return;
}
$.each(subTable, function (i, n) {
//暂时未处理  grid_selector + " ~ .widget-box" 的情况 ？？？
$(n).jqGrid('setGridWidth', $(n).closest('div.tablediv').width());
});
};
            //resize to fit page size
            var parent_column = $(tableId[0]).closest('[class*="col-"]');
            $(window).off('resize.jqGrid').on('resize.jqGrid', function () {
//if (callback != undefined) {
// callback();
//}
console.log(parent_column.width());
changeGridWidth(parent_column.width());
changeSubGridWidth();
//todo lijunjie 测试 调整高度最后执行
                if(callback != undefined){
                callback();
                }
            });
            
            //resize on sidebar collapse/expand
            $(document).on('settings.ace.jqGrid' , function(ev, event_name, collapsed) {
                if( event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed' ) {
                    //setTimeout is for webkit only to give time for DOM changes and then redraw!!!
                    setTimeout(function() {
                        changeGridWidth(parent_column.width());
changeSubGridWidth();
                    }, 0);
                }
            });
            
            //如果你的表格在其他元素（举例：tab pane）里，你需要使用父元素的宽度:
    /**
    $(window).on('resize.jqGrid', function () {
    var parent_width = $(grid_selector).closest('.tab-pane').width();
    $(grid_selector).jqGrid( 'setGridWidth', parent_width );
    })
    //and also set width when tab pane becomes visible
    $('#myTab a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      if($(e.target).attr('href') == '#mygrid') {
    var parent_width = $(grid_selector).closest('.tab-pane').width();
    $(grid_selector).jqGrid( 'setGridWidth', parent_width );
      }
    })
    */
            
            $(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size
        },
        
        //it causes some flicker when reloading or navigating grid
        //it may be possible to have some custom formatter to do this as the grid is being created to prevent this
        //or go back to default browser checkbox styles for the grid
        styleCheckbox:function(table){
             $(table).find('input:checkbox').addClass('ace').wrap('').after('');
             $('.ui-jqgrid-labels th[id*="_cb"]').find('input.cbox[type=checkbox]').addClass('ace').wrap('').after('');
        },
        //unlike navButtons icons, action icons in rows seem to be hard-coded
        //you can change them like this in here if you want
        updateActionIcons:function(table) {
            // var replacement = {
            //     'ui-ace-icon fa fa-pencil' : 'ace-icon fa fa-pencil blue',
            //     'ui-ace-icon fa fa-trash-o' : 'ace-icon fa fa-trash-o red',
            //     'ui-icon-disk' : 'ace-icon fa fa-check green',
            //     'ui-icon-cancel' : 'ace-icon fa fa-times red'
            // };
            // $(table).find('.ui-pg-div span.ui-icon').each(function(){
            //     var icon = $(this);
            //     var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
            //     if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
            // });
        },
        //replace icons with FontAwesome icons like above
        updatePagerIcons:function(table) {
            var replacement = {
                'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140',
                'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140',
                'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140',
                'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140'
            };
            $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
                var icon = $(this);
                var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
                if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
            });
        },
        enableTooltips:function(table) {
            $('.navtable .ui-pg-button').tooltip({container:'body'});
            $(table).find('.ui-pg-div').tooltip({container:'body'});
        }
    };
```


主要是`changeGridTable`-`changeSize`，添加里面的`changeSubGridWidth`子表格自适应宽度   


2. 在页面的js内


```js
$.changeGridTable.changeSize([grid_selector, grid_selector + " ~ .widget-box"], reSizeHeight);
```


> grid_selector 表示 表格的ID`"#grid-table"`   ，reSizeHeight表示高度的调整，下节说明


同时为了保证页面大小的变化后，宽度还是适应的，执行如下：


```js
//显示内容区域大小变化
$('#main-container').resize(function () {
$.changeGridTable.changeSize([grid_selector, grid_selector + " ~ .widget-box"], reSizeHeight);
})
```






## grid高度


主要修改了 `reSizeHeight()`  通过元素高度计算来设置高度的


```js
function reSizeHeight() {
    var strs = $.getWindowSize().toString().split(",");
    var navbar_h = $('#navbar').height();
    var breadcrumbs_h = $('#breadcrumbs').height();
    var padding = 20 + 2;  //   +2校准


    var searchBox = $('div.page-content-area div.widget-box.widget-compact.search-box').first().outerHeight(true);
    var gridTitlebar = $('div.ui-jqgrid-titlebar.ui-jqgrid-caption').first().outerHeight(true);
    var gridToppager = $('div.ui-jqgrid-toppager').first().outerHeight(true);
    var jqgridHdiv = $('div.ui-jqgrid-hdiv').first().outerHeight(true);
    var jqgridPagerBottom = $('div.ui-jqgrid-pager').first().outerHeight(true);
    
    var jqgrid_height = strs[0] - (navbar_h + breadcrumbs_h + padding + searchBox +
    gridTitlebar + gridToppager + jqgridHdiv + jqgridPagerBottom);
    //显示内容过少时，默认显示6行内容
    (jqgrid_height <= 26 * 3) && (jqgrid_height = 26 * 6);
    $(grid_selector).jqGrid('setGridHeight', jqgrid_height);
}


```


**注：**因为不确定页面上是否存在多个搜索框，故在指定`searchBox`时，额外添加了 `.search-box`类选择，需要手动在确认的搜索框对应的控件上加上 `search-box`