jqgrid 4.5.1 寻呼机未调整以适应网格宽度答案

【问题标题】：jqgrid 4.5.1 pager not adjusting to fit width of gridjqgrid 4.5.1 寻呼机未调整以适应网格宽度
【发布时间】：2013-09-30 11:57:56
【问题描述】：

查看问题的图片。我已经包含了 HTML 和 JS 网格定义。您可以看到分页器中的 UI 没有缩小以适应容器的宽度。

我正在使用 jQuery 1.10.2、jQuery UI 1.10.3 和 jQgrid 4.5.1。 Chromium 浏览器。

网格定义：

$("#phone_calls").jqGrid({
    url:'/data.php',
    datatype: "json",
    height: 255,
    width: '100%',
    colNames:['Status','Call Time', 'Reason','Name','Phone Number','Address','City or Town','Notes','id'],
    colModel:[
            {name:'Status',index:'Status', width:'60%',searchoptions:{sopt:['eq','ne','le','lt','gt','ge']}},
            {name:'Call_Time',index:'Call_Time', width:'60%',searchoptions:{sopt:['eq','ne','le','lt','gt','ge']}},
            {name:'Reason',index:'Reason', width:'60%',searchoptions:{sopt:['eq','ne','le','lt','gt','ge']}},
            {name:'Name',index:'Name', width:'60%',searchoptions:{sopt:['eq','ne','le','lt','gt','ge']}},
            {name:'Phone_Number',index:'Phone_Number', width:'60%',searchoptions:{sopt:['eq','ne','le','lt','gt','ge']}},
            {name:'Address',index:'Address', width:'60%',searchoptions:{sopt:['eq','ne','le','lt','gt','ge']}},
            {name:'City_Town',index:'City_Town', width:'60%',searchoptions:{sopt:['eq','ne','le','lt','gt','ge']}},
            {name:'Notes',index:'Notes', width:'60%',searchoptions:{sopt:['eq','ne','le','lt','gt','ge']}},
            {name:'id',index:'id', width:'60%',searchoptions:{sopt:['eq','ne','le','lt','gt','ge']}}
    ],
    rowNum:20,
    rowTotal: 200,
    rowList : [20,30,50],
    loadonce:true,
    mtype: 'POST',
    postData: {a:'phone_calls'},
    rownumbers: true,
    rownumWidth: 40,
    gridview: true,
    pager: '#pager_phone_calls',
    sortname: 'id',
    viewrecords: true,
    sortorder: "asc",
    caption: "Phone Calls"  
})
        .jqGrid('filterToolbar',{searchOperators : true});

实际输出：

所需的寻呼机输出（http://trirand.com/blog/jqgrid/jqgrid.html）：

我没有看到任何 JS 错误，请告诉我任何事情。谢谢！

【问题讨论】：

标签： javascript jquery jqgrid

【解决方案1】：

我已经尝试过您的代码。我对你的代码做了一些修改。寻呼机对我来说工作正常。问题是将百分比设置为 colModel 可能不起作用。删除所有百分比，witdh:100% 并添加以下代码。

shrinkToFit : false,
autowidth : true,
height : 'auto',

您可以在fiddle 中找到工作示例。让我知道这是否有帮助..

【讨论】：

感谢您的帮助。奇怪的是，我的页面中的表格定义与您在小提琴中的完全相同，但格式仍然不正确。
是的，非常感谢，我最终发现了一些冲突的 CSS。一切顺利！