设置jQuery JQGrid的宽度和高度的最佳解决方案是什么？ [英] What's the best solution for setting the width and height to a jQuery JQGrid?

问题描述

我在使用jQuery的JQGrid时遇到了一个奇怪的问题，下面的片段代码用于创建它：

I encountered a strange problem during using jQuery's JQGrid, following fragment code is for creating it:

grid= jQuery("#grid_id").jqGrid({
    data : response.list,
    datatype : "local",
    colNames : columnNames,
    colModel : [ {....}],                       
    rowNum : 30,
    width : $("#grid_id").width(),
    height: $("#grid_page").height(),
    rowList : [ 30, 100, 150 ],
    pager : "#grid_page",
    sortname : 'name',
    viewrecords : true,
    sortorder : "desc",
    shrinkToFit: false,
    rownumbers: true,
    altRows:true,
    caption: "Sample Grid"
});

此问题有3个症状：

1，此网格有超过35列，每列的宽度大于100 PX，此网格的宽度固定为1000PX，因此网格显示滚动条，供用户查看所有列。 （如您所见，我使用固定值设置网格宽度和高度）

1, This grid has more than 35 columns and the width of each column is greater than 100 PX, and this grid's width is fixed in 1000PX, so the grid displays a scroll bar for user to view all columns. (As you see, I set the grid width and height with fixed values)

2，此网格第一次运行良好，但标题和内容错过了当它第二次或更晚更新时。

2, This grid works well for the first time, but the headers and content of it missed when it has been updated for the second time or later.

3，我试图评论宽度设置，换句话说，我没有设置宽度到这个网格，无论是第一次还是第二次都能正常工作，但是网格的宽度是所有列的总和（3500PX），它使整个页面难以扩展。

3, I am attempting to comment the width setting, in other words, I didn't set a width to this grid, it works fine no matter whether it is for first time or second, but the width of grid is the sum of all columns (3500PX), it expand the whole page ugly.

grid= jQuery("#grid_id").jqGrid({
    data : response.list,
    datatype : "local",
    colNames : columnNames,
    colModel : [ {....}],                       
    rowNum : 30,
    // width : $("#grid_id").width(), COMMENT it.
    height: $("#grid_page").height(),
    rowList : [ 30, 100, 150 ],
    pager : "#grid_page",
    sortname : 'name',
    viewrecords : true,
    sortorder : "desc",
    shrinkToFit: false,
    rownumbers: true,
    altRows:true,
    caption: "Sample Grid"
});

所以我想问的问题是：将宽度和高度设置为a的最佳解决方案是什么？ jQuery JQGrid？应该如何设置它们到我的网格？

So the question I want to ask is: What's the best solution for setting the width and height to a jQuery JQGrid? How should set them to my grid?

简单地说，如何让一个有很多列的网格与X滚动条配合使用？

Simply, how to have a grid that has many columns works with a X scrollbar?

推荐答案

多次尝试后，我解决了这个问题。对于我的情况，如果网格需要具有固定的宽度和高度，并且当其列太多时显示水平滚动条，就像以下设置jqGrid的方式一样：

After trying for several times, I solved this issue. For my case, if grid need to have fixed width and height, and display horizontal scroll bar when its columns too many, just like following way to set the jqGrid:

grid= jQuery("#grid_id").jqGrid({
    width : 1000,
    height: 800,
    shrinkToFit: false,
});

确保网格工作没有问题的最重要的事情是你应该添加THML配置'对齐=中心到网格所附的表格。

The most important thing that makes sure the grid working no problem is that you SHOULD add THML configuration 'align="center"' to the table that the grid attaches.

<table id="grid_id" align="center"></table>

我不知道为什么会解决这个问题，但无论如何，它都有效。

I don't know why this solves it, but anyway, It works.

这篇关于设置jQuery JQGrid的宽度和高度的最佳解决方案是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！