JQGrid: решение проблемы с шириной таблицы и колонок

Если вам когда-нибудь нужно было по-быстрому реализовывать  мощные таблицы в онлайне, чтобы пользователи могли забивать в них свои данные, что-то там вычислять и т.п., — в общем некое упрощенное подобие Microsoft Excell, то вряд ли вы не могли бы не заметить такую замечательную реализацию решения сей задачи, как например JQuery плагин под названием JQGrid.

Однако хватит лирики, давайте-ка я приведу решение такой проблемы, как установка правильной ширины ячеек таблицы и общей ширины таблицы. В общем, что можно сделать, если колонок много, они не умещаются в width окна / экрана / заданного блочного элемента. По крайней мере для меня это совсем недавно было очень большой проблемой, т.к. я полагал, что весь вопрос должен был бы решаться с помощью установки autowidth в true, ан нет, не все так просто, к сожалению.

Скачать полный пример с JQGrid

Описание задачи:

Итак, имеем таблицу с N-м количеством столбцов, каждый из которых имеет фиксированную ширину. Также мы имеем блочную верстку с фиксированной шириной. Задача: сделать так, чтобы таблица не выползала куда не следует. В общем смотрите скриншот:

JQGrid ширина колонок и ширина самой таблицы

Решение задачи:

CSS:

#table_wrapper {
    width: 800px;
    /* ... */
}

HTML:

<div id="table_wrapper">
    <table id="list"><tr><td></td></tr></table> 
</div>
<div id="pager"></div>

JavaScript:

$(document).ready(function () {

    /* ... */

    grid.jqGrid({

        /* ... */

        autowidth: true,
        shrinkToFit: false
    })

});

В общем проблемка решается правильной комбинацией свойств autowidth и shrinkToFit. После этого ширину таблицы, генерируемой плагином JQGrid

Опубликовано 5-12-2013 в 15:05


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Свежие комментарии

  • Иван: к записи Привет всем, доброго времени суток! Я излазил весь »
  • Александер: к записи Потом пригляделся, вроде Вы не это имели в виду и »
  • Александер: к записи У Вас не русифицируется, потому что не везде включ »
  • Администратор: к записи Это надо использовать функции вашей CMS. »
  • Alex: к записи Ребят, а подскажите пожалуйста, как реализовать с »
  • Владимир: к записи А как теперь будет выглядеть ссылка для перехода н »
  • Администратор: к записи Не знаю. »

Статистика спама

Последние твиты