Изменение размера jqGrid при изменении размера браузера?

Question

Есть ли способ изменить размер jqGrid при изменении размера окна браузера? Я пробовал описанный метод here, но этот метод не работает в IE7.

Answer 1

В последующих:

предыдущий код, показанный на этом посту был в конечном итоге отказались, потому что она была ненадежной. Я теперь с помощью следующей функции API, чтобы изменить размер сетки, как это рекомендовано в документации jqGrid:

jQuery("#targetGrid").setGridWidth(width); 

Чтобы сделать фактическое изменение размера, функция реализации следующей логики связано с событием изменения размера окна:

• Рассчитайте ширину сетки с помощью clientWidth своего родителя и (если это невозможно) ее атрибут offsetWidth.

• Выполните проверку вменяемости, чтобы убедиться, что ширина изменилась более чем х пикселей (для работы вокруг некоторых конкретных прикладных задач)

• Наконец, используйте setGridWidth() для изменения ширины GRID в

Вот пример кода для обработки изменения размера:

jQuery(window).bind('resize', function() { 

    // Get width of parent container 
    var width = jQuery(targetContainer).attr('clientWidth'); 
    if (width == null || width < 1){ 
     // For IE, revert to offsetWidth if necessary 
     width = jQuery(targetContainer).attr('offsetWidth'); 
    } 
    width = width - 2; // Fudge factor to prevent horizontal scrollbars 
    if (width > 0 && 
     // Only resize if new width exceeds a minimal threshold 
     // Fixes IE issue with in-place resizing when mousing-over frame bars 
     Math.abs(width - jQuery(targetGrid).width()) > 5) 
    { 
     jQuery(targetGrid).setGridWidth(width); 
    } 

}).trigger('resize'); 

И пример разметки:

<div id="grid_container"> 
    <table id="grid"></table> 
    <div id="grid_pgr"></div> 
</div> 

Answer 2

Заимствование из кода в вашей ссылке, вы можете попробовать что-то вроде этого:

$(window).bind('resize', function() { 
    // resize the datagrid to fit the page properly: 
    $('div.subject').children('div').each(function() { 
     $(this).width('auto'); 
     $(this).find('table').width('100%'); 
    }); 
}); 

Таким образом, вы связываете непосредственно к событию window.onresize, который на самом деле выглядит как то, что вы хотите от вашего вопроса.

Если ваша сетка установлена ​​на 100% ширину, хотя она должна автоматически расширяться, когда ее контейнер расширяется, если только не используются некоторые тонкости плагина, который вы используете, о котором я не знаю.

Answer 3

Авторазмер:

Для jQgrid 3.5+

 if (grid = $('.ui-jqgrid-btable:visible')) { 
      grid.each(function(index) { 
       gridId = $(this).attr('id'); 
       gridParentWidth = $('#gbox_' + gridId).parent().width(); 
       $('#' + gridId).setGridWidth(gridParentWidth); 
      }); 
     } 

Для jQgrid 3.4.x:

 if (typeof $('table.scroll').setGridWidth == 'function') { 
      $('table.scroll').setGridWidth(100, true); //reset when grid is wider than container (div) 
      if (gridObj) { 

      } else { 
       $('#contentBox_content .grid_bdiv:reallyvisible').each(function(index) { 
        grid = $(this).children('table.scroll'); 
        gridParentWidth = $(this).parent().width() – origami.grid.gridFromRight; 
        grid.setGridWidth(gridParentWidth, true); 
       }); 
      } 
     } 

Answer 4

использовали это в производстве в течение некоторого времени без каких-либо жалоб (Возможно, вы немного подберете, чтобы посмотреть прямо на своем сайте .. например, вычитая ширину боковой панели и т. Д.)

$(window).bind('resize', function() { 
    $("#jqgrid").setGridWidth($(window).width()); 
}).trigger('resize'); 

Answer 5

это, кажется, работает хорошо для меня

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

Answer 6

Я использую 960.gs для макета, так что мое решение выглядит следующим образом:

$(window).bind(
     'resize', 
     function() { 
        // Grid ids we are using 
      $("#demogr, #allergygr, #problemsgr, #diagnosesgr, #medicalhisgr").setGridWidth(
        $(".grid_5").width()); 
      $("#clinteamgr, #procedgr").setGridWidth(
        $(".grid_10").width()); 
     }).trigger('resize'); 
// Here we set a global options 

jQuery.extend(jQuery.jgrid.defaults, { 
    // altRows:true, 
    autowidth : true, 
    beforeSelectRow : function(rowid, e) { // disable row highlighting onclick 
     return false; 
    }, 
    datatype : "jsonstring", 
    datastr : grdata, // JSON object generated by another function 
    gridview : false, 
    height : '100%', 
    hoverrows : false, 
    loadonce : true, 
    sortable : false, 
    jsonReader : { 
     repeatitems : false 
    } 
}); 

// Demographics Grid 

$("#demogr").jqGrid({ 
    caption : "Demographics", 
    colNames : [ 'Info', 'Data' ], 
    colModel : [ { 
     name : 'Info', 
     width : "30%", 
     sortable : false, 
     jsonmap : 'ITEM' 
    }, { 
     name : 'Description', 
     width : "70%", 
     sortable : false, 
     jsonmap : 'DESCRIPTION' 
    } ], 
    jsonReader : { 
     root : "DEMOGRAPHICS", 
     id : "DEMOID" 
    } 
}); 

// Другие сетки определены ниже. ..

Answer 7

autowidth: true 

отлично работал для меня. из here.

Answer 8

Главный ответ сработал для меня, но сделал приложение крайне невосприимчивым к IE, поэтому я использовал таймер, как было предложено. Код выглядит примерно так ($(#contentColumn) является ДИВ, что JQGrid сидит):

function resizeGrids() { 
    var reportObjectsGrid = $("#ReportObjectsGrid"); 
    reportObjectsGrid.setGridWidth($("#contentColumn").width()); 
}; 

var resizeTimer; 

$(window).bind('resize', function() { 
    clearTimeout(resizeTimer); 
    resizeTimer = setTimeout(resizeGrids, 60); 
}); 

Answer 9

Привет Stack энтузиастов переполнения. Мне понравилось большинство ответов, и я даже проголосовал за пару, но ни один из них не работал для меня в IE 8 по какой-то странной причине ... Я все же столкнулся с этими ссылками ... Этот парень написал библиотеку, которая, кажется, Работа. Включите его в свои проекты в adittion для jquery UI, введите имя вашей таблицы и div.

http://stevenharman.net/blog/archive/2009/08/21/creating-a-fluid-jquery-jqgrid.aspx

http://code.google.com/p/codeincubator/source/browse/#svn%2FSamples%2Fsteveharman%2FjQuery%2Fjquery.jqgrid.fluid%253Fstate%253Dclosed

Answer 10

<script> 
$(document).ready(function(){  
$(window).on('resize', function() { 
    jQuery("#grid").setGridWidth($('#fill').width(), false); 
    jQuery("#grid").setGridHeight($('#fill').height(),true); 
}).trigger('resize');  
}); 
</script> 

Answer 11

Это работает ..

var $targetGrid = $("#myGridId"); 
$(window).resize(function() { 
    var jqGridWrapperId = "#gbox_" + $targetGrid.attr('id') //here be dragons, this is  generated by jqGrid. 
    $targetGrid.setGridWidth($(jqGridWrapperId).parent().width()); //perhaps add padding calculation here? 
}); 

Answer 12

Попробуйте это:

width: null 
shrinkToFit: true 

Answer 13

Если вы:

• имеет shrinkToFit: false (средние столбцов с фиксированной шириной)
• имеет autowidth: true
• не заботятся о высоте жидкости
• имеет горизонтальную полосу прокрутки

Вы можете сделать сетку с шириной жидкости со следующими стилями :

.ui-jqgrid { 
    max-width: 100% !important; 
    width: auto !important; 
} 

.ui-jqgrid-view, 
.ui-jqgrid-hdiv, 
.ui-jqgrid-bdiv { 
    width: auto !important; 
} 

Here is a demo