调整jqGrid页面编辑框的大小

Question

在我的ASP.NET MVC 3应用程序中，我在jqGrid上启用了寻呼机，如下图所示：

页面的文本框（图像中心，其中的数字为1）的范围非常广泛 - 比它需要的宽。有谁知道如何调整这个盒子的大小？

当我的网格比这个网格更窄时，这尤其是一个问题，此时页面的文本框推动（或放置）太远到左边并最终挤压按钮，如下图所示：

此处，“页面”（上一页，第一页）左侧的两个按钮位于“编辑”标签下，该标签是我的自定义“编辑”按钮的一部分。请注意，页面框仍然很宽。此外，右侧的“视图1-10 of 1005”（在第一张图像中可见）在较窄的网格中被截断。

也许有一个设置或某人有一个解决方法。我宁愿第二个网格不必比它需要的更宽（我的解决方法是将width设置为值而不是'auto'或'inherit'，但这会使网格变为网格列宽适当。页面适当大小的文本框会为寻呼机按钮和我自己的按钮留出足够的空间。

我的网格的寻呼机/自定义按钮看起来像这样：

 .jqGrid('navGrid', '#icecreamPager', 
    { search: true, edit: false, add: false, del: false, searchText: "Search" },
   {}, // default settings for edit
   {}, // default settings for add
   {}, // default settings for delete
   {closeOnEscape: true, closeAfterSearch: true, multipleSearch: true }, // settings for search
   {}
  )
  .jqGrid('navButtonAdd', '#icecreamPager',
   { caption: "Edit", buttonicon: "ui-icon-pencil",
     onClickButton: function () {
       var grid = $("#icecreamGrid");
       var rowid = grid.jqGrid('getGridParam', 'selrow');
       var cellID = grid.jqGrid('getCell', rowid, 'icecreamID');
       var src = '@Url.Action("Edit", "Icecream", new { id = "PLACEHOLDER" })';
       document.location = src.replace('PLACEHOLDER', cellID);
    },
    position: "last"
   });

我一直在查看jqGrid文档和示例，但没有想过如何设置它。想法？这是4.0 jqGrid。

Answer 1

我认为您使用ASP.NET MVC标准CSS会在jqGrid中带来一些小问题。其中一个是寻呼机宽度。它可以修复

<style type="text/css">
    /* fix the size of the pager */
    input.ui-pg-input { width: auto; }
</style>

另一个小建议是使用

<style type="text/css">
    table { border-style:none; border-collapse:separate; }
    table td { border-style:none; }
</style>

或

<style type="text/css">
    div.ui-jqgrid-view table.ui-jqgrid-btable {
        border-style:none;
        /*border-top-style:none;*/
        border-collapse:separate;
    }
    div.ui-jqgrid-view table.ui-jqgrid-btable td {
        border-left-style:none
    }
    div.ui-jqgrid-view table.ui-jqgrid-htable {
        border-style:none;
        /*border-top-style:none;*/
        border-collapse:separate;
    }
    div.ui-jqgrid-view table.ui-jqgrid-btable th {
        border-left-style:none
    } 
</style>

这将解决宽度计算的一些问题，并将删除不需要的水平滚动条。我让the feature request在jqGrid的标准CSS中进行相应的更改，但请求保持不变。

我建议您从the demo查看the answer。演示中使用了所有设置和一些其他技巧。演示项目降级为VS2008对应问题，但只需进行少量修改即可将其转换回VS2010。