Заголовки столбцов Jqgrid и данные не выровнены

У меня есть таблица, которая является динамической и создается в коде на С#. Я использую tabletogrid для преобразования этой HTML-таблицы в Jqgrid, и код, который я использую для этого,

tableToGrid('#gvSearchDocuments',
                    { height: 'auto',
                        autowidth:true,
                        multiselect: true,
                        pager: 'pagersearch',
                        rowList: [20, 30, 50],
                        colNames: ['ID','Message Date', 'Fund', 'Partner', 'Menu', 'Sub Menu', 'Document Name', 'Document Description', 'Type'],
                        colModel: [
                            { name: 'ID', hidden: true},
                            { name: 'MessageDate',
                            align: 'right',
                            sorttype: 'date',
                            formatter: 'date',
                            formatoptions: { newformat: 'M-d-Y' }
                                    },
                                    { name: 'Fund', align: 'left'},
                                    { name: 'Partner', align: 'left' },
                                    { name: 'Menu', align: 'left'},
                                    { name: 'SubMenu', align: 'left'},
                                    { name: 'Documentname', align: 'left' },
                                    { name: 'DocumentDescription', align: 'left'},
                                    { name: 'Type', align: 'left' }

                                   ]
                    });

Проблема, с которой я сталкиваюсь, заключается в том, что при создании jqgrid заголовки столбцов и данные не выровнены правильно. Я пробовал играть с autoWidth, width и shrinkToFit, но не повезло. Вот как моя сетка отображается в IE, Firefox и Chrome.

введите здесь описание изображения

Я потратил на это больше дня, и это медленно меня убивает. Любая помощь будет здорово!


jquery jqgrid
person Vish    schedule 08.11.2012    source источник
comment
Я не рекомендую вам использовать tableToGrid. Вы должны создать jqGrid напрямую.   -  person Oleg    schedule 08.11.2012
comment
Не могли бы вы настроить jsfiddle с фактическим html со страницы, чтобы мы могли увидеть, как он работает?   -  person Jerryf    schedule 28.06.2013
comment
Вы устанавливаете формат всех столбцов, кроме MessageDate до align:"left". Я что-то упускаю?   -  person Tommi    schedule 28.06.2013
comment
Нельзя воспроизвести проблему, не имея HTML-таблицы, в которой находятся входные данные. Я дополнительно согласен с предыдущим комментарием (@Tommi). Можно удалить свойства align: 'left' из всех столбцов, поскольку 'left' является значением по умолчанию для align. Тем не менее, основная проблема заключается в ширине столбцов. Тони Тони Чоппер открыл награду, потому что у него, вероятно, серьезные проблемы. Лучше бы он свою демку выложил. Использование очень старых tableToGrid действительно плохой выбор, особенно если таблица содержит форматированные данные вместо чистых данных.   -  person Oleg    schedule 28.06.2013
comment
У меня была такая же проблема при использовании jqGrid. Пожалуйста, дайте нам jsfiddle, чтобы помочь вам.   -  person Rafi W.    schedule 28.06.2013

Ответы (3)


arrow_upward
1
arrow_downward

Наконец-то я смог решить проблему.

Я ошибочно скрывал обычную HTML-таблицу перед вызовом tableToGrid с помощью display: none;, а затем показывал ее после преобразования с помощью display: block;. display: block; был унаследован ячейками данных, что отрицательно сказалось на них. Их изменение размера блокировалось при изменении размера заголовков (они прекращали изменять размер, как только достигали минимальной ширины, необходимой для отображения всего содержимого ячейки).

См. этот jsFiddle, чтобы воспроизвести проблему. Если вы закомментируете последнюю строку в скрипте, проблема исчезнет.

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

person Toni Toni Chopper    schedule 02.07.2013
comment
jqGrid позволяет заполнять сетку данными, а не только строками. Таким образом, числа и даты, например, будут правильно отсортированы и отображены в соответствии с параметрами locale или форматирования, которые используются. Только после этого можно реально использовать локальную сортировку, разбиение по страницам и фильтрацию данных. tableToGrid заполнить сетку относительно addRowData, чтобы разместить все данные на одной странице. Если вы разместите на пути больше 20 строк, то после следующей сортировки вы увидите только 20 строк (из-за использования rowNum: 20 и без указания пейджера). Это просто пример. Проблем больше. - person Oleg; 02.07.2013

arrow_upward
0
arrow_downward

Попробуйте применить это свойство к своей таблице.

table-layout: fixed;

Это будет работать для меня. Я надеюсь, что это может быть полезно для вас.

person Dipen Dedania    schedule 05.07.2013

arrow_upward
-1
arrow_downward

редактировать css с помощью

.ui-jqgrid tr.jqgrow td{
         white-space: normal;
      }
person Albin Mathew    schedule 24.12.2014
comment
Пожалуйста, 4nsw3r d4 q43sti0ns в h4lfw4y d3c3nt 3nglish, потому что его легче читать и, следовательно, понимать, как вы уже могли заметить. - person Markus W Mahlberg; 24.12.2014