Jqgrid列标题和数据未对齐 [英] Jqgrid Column Headers and data not aligned

问题描述

我有一个动态的表，该表是在C#后面的代码中生成的.我使用tabletogrid将此html表转换为Jqgrid，而我使用的代码是

I have a table that is dynamic and is generated at the code behind in C#. I use tabletogrid to convert this html table to a Jqgrid and the code I use to do that is

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时，列标题和数据未正确对齐.这就是我的网格在IE，Firefox和Chrome中的显示方式.

The problem I have is when the jqgrid is generated, the column headers and data is not aligned right.I tried playing with autoWidth, width and shrinkToFit but no luck there. This is how my grid appears in IE,Firefox and Chrome.

我花了一天多的时间，慢慢地杀死了我.任何帮助都会很棒！

I have spent more than a day on this one and its killing me slowly. Any help would be great !

推荐答案

我终于能够解决此问题.

I was finally able to fix the issue.

我在用display: none;调用tableToGrid之前错误地隐藏了 plain HTML表，然后在通过display: block;转换后显示了它. display: block;由数据单元继承，对它们产生负面影响.调整标头大小时，无法调整其大小(一旦达到显示整个单元格内容所需的最小宽度，它们就会停止调整大小.)

I was erroneously hiding the plain HTML table before calling tableToGrid with display: none; and then showing it after the conversion with display: block;. The display: block; was inherited by the data cells, affecting them negatively. Their resizing was blocked when the headers were resized (they stopped resizing once reached the minimum width necessary to show to entire cell content).

请参见此 jsFiddle 以重现该问题. 如果您注释掉脚本的最后一行，问题将消失.

See this jsFiddle to reproduce the issue. If you comment out the last line in the script the issue disappears.

顺便说一句，我知道tableToGrid并不好(就性能而言，这很糟糕)，但是在我的应用程序的特殊情况下，这是我唯一可以使用的方法，不需要大量重写很多传统代码.

BTW I know that tableToGrid is not great (it is terrible in terms of performances) but in a special case in my application is the only approach I can use that doesn't require a massive rewriting of a lot of legacy code.

这篇关于Jqgrid列标题和数据未对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！