Как использовать замороженный столбец jqgrid для экрана разной ширины? - PullRequest
Новая
       25

Как использовать замороженный столбец jqgrid для экрана разной ширины?

5 голосов
/ 19 декабря 2011

У меня есть сетка JQgrid с большим количеством столбцов. У некоторых людей очень широкие мониторы, а у некоторых - маленькие ноутбуки.

Мне нужно решение, при котором у людей с широкими мониторами сетка может растягиваться до размера окна.

Для тех, у кого есть ноутбуки, я хочу, чтобы у них были замороженные столбцы, чтобы при прокрутке они не теряли первый столбец в сетке.

Каков наилучший способ поддержки этого макета?

Ответы [ 2 ]

4 голосов
/ 01 января 2012

В этой теме описывается, как установить ширину сетки в зависимости от размера окна браузера:

javascript - изменить размер jqGrid при изменении размера браузера? - Переполнение стека

Этот предлагает использовать опцию 'fixed' colModel, чтобы установить для определенных столбцов постоянный размер:

jQGrid установить ширину столбца - переполнение стека

И, наконец, этот сайт дает пример кода и дополнительные советы по использованию JQGrid:

10 JQGrid Типлс узнал из моего опыта << SANDBOX ……. </a>

1 голос
/ 05 января 2012

Чтобы иметь как разметку флюида, так и замороженные столбцы в соответствии с размером монитора, посмотрите этот пример с таблицей флюидов и замороженным первым столбцом:

Step1 - добавьте скрипт jquery.jqGrid.min.js с основного сайта.

Step2 - добавить скрипт jquery.jqGrid.fluid.js с сайта http://code.google.com/p/codeincubator/source/browse/Samples/steveharman/jQuery/jquery.jqgrid.fluid/jquery.jqGrid.fluid.js?r=170

Step3 - html 

<div id="grid_wrapper" class="ui-corner-all floatLeft">
<table id="theGrid" class="scroll">
</table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</div>

Step4 - активировать скрипт 

function resize_the_grid()

      {
        $('#theGrid').fluidGrid({base:'#grid_wrapper', offset:-20});
      }

$(document).ready(function(){

        var myGrid = $('#theGrid');        

        myGrid.jqGrid({

          datatype:'clientSide',

          altRows:true,

          colNames:['Name', 'Side', 'Power'],

          colModel:[

            { name:'name', index: 'name', frozen : true },

            { name:'side', index: 'side' },

            { name:'power', index: 'power' } ],

          pager: jQuery('#pager'),

          viewrecords: true,

          imgpath: 'css/start/images',

                caption: 'The Force: Who\'s Who?',

                height: "100%"

        });

        myGrid.addRowData("1", {name:"Luke", side:"Good", power:"6"});

        myGrid.addRowData("2", {name:"Vader", side:"Dark", power:"9"});

        myGrid.addRowData("3", {name:"Han", side:"meh?", power:"0"});        

        resize_the_grid();
});

$(window).resize(resize_the_grid);

Надеюсь, это помогло.

...