javascript - 调整jqGrid页面编辑框的大小

Question

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

页面的文本框(图像的中心，其中有数字 1)非常宽 - 比它需要的宽得多。有谁知道如何调整这个框的大小？

当我的网格比这个窄时，这尤其是一个问题，此时页面的文本框向左推(或放置)太远，最终挤压按钮，如下图所示:

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

也许有一个设置可以解决这个问题，或者有人有解决方法。我希望第二个网格不必比它需要的更宽(我的解决方法是将 width 设置为一个值，而不是 'auto' 或 “继承”，但这会使网格列变宽。页面大小合适的文本框将为寻呼机按钮和我自己的按钮留下足够的空间。

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

 .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。