调整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>

这将解决宽度计算的一些问题,并将删除不需要的水平滚动条.我发出了功能请求,要求在jqGrid的标准CSS中进行相应的更改,但请求保持不变.

我建议你从答案中看看演示.演示中使用了所有设置和一些其他技巧.演示项目降级到VS2008对应的问题,但通过最小的修改,您可以将其转换回VS2010.