Question

我有一个动态的表，它是在C＃后面的代码中生成的。我使用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中的显示方式。

enter image description here

我在这个上花了一天多时间，它慢慢地杀了我。任何帮助都会很棒！

Answer 1

我终于能够解决这个问题了。

我在使用tableToGrid致电display: none;之前错误地隐藏了普通 HTML表格，然后在使用display: block;转换后显示该表格。 display: block;由数据单元继承，对它们产生负面影响。当标题调整大小时，它们的大小调整被阻止（一旦达到显示整个单元格内容所需的最小宽度，它们就会停止调整大小）。

请参阅此jsFiddle以重现此问题。如果您注释掉脚本中的最后一行，问题就会消失。

BTW我知道tableToGrid不是很好（在性能方面很糟糕）但在我的应用程序中的一个特殊情况是我可以使用的唯一方法，不需要大量重写遗留代码。

Answer 2

尝试将此属性应用于您的表格。

table-layout: fixed;

这对我有用。我希望这可能对你有所帮助。

Answer 3

使用

编辑css

.ui-jqgrid tr.jqgrow td{
         white-space: normal;
      }

Jqgrid列标题和数据未对齐

3 个答案: