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

Javascript jqgrid 4.5.1寻呼机未调整以适应网格宽度,javascript,jquery,jqgrid,Javascript,Jquery,Jqgrid,请参见问题的图片。我已经包括了HTML和JS网格定义。您可以看到,寻呼机中的UI没有缩小以适应容器的宽度 我使用的是jQuery1.10.2、jQueryUI1.10.3和jQGrid4.5.1。铬浏览器 网格定义: $("#phone_calls").jqGrid({ url:'/data.php', datatype: "json", height: 255, width: '100%', colNames:['

请参见问题的图片。我已经包括了HTML和JS网格定义。您可以看到,寻呼机中的UI没有缩小以适应容器的宽度

我使用的是jQuery1.10.2、jQueryUI1.10.3和jQGrid4.5.1。铬浏览器

网格定义:

$("#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});
实际产量:

所需的寻呼机输出():


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

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

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

您可以在中找到工作示例。如果有帮助,请告诉我。

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