javascript - jqgrid 4.5.1 寻呼机不调整以适应网格宽度

Question

查看问题图片。我已经包含了 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 错误，请让我知道任何事情。谢谢!

Answer 1

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

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

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