2013-09-30 39 views
1

查看問題圖片。我已經包含了HTML和JS網格定義。您可以在尋呼機中看到UI不縮小以適應容器的寬度。jqgrid 4.5.1 pager未調整爲適合網格寬度

我正在使用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}); 

實際輸出: jQgrid pager width not adjusting

期望中的尋呼機輸出(http://trirand.com/blog/jqgrid/jqgrid.html): example of pager adjusting properly

我沒有看到任何JS錯誤,請讓我知道任何事情。謝謝!

回答

2

我試過你的代碼。我在你的代碼中做了一些修改。傳呼機對我來說工作得很好。事情是設置百分比colModel可能無法正常工作。刪除所有百分比,witdh:100%並添加下面的代碼。

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

您可以在fiddle找到工作示例。讓我知道這是否有幫助..

+0

感謝您的幫助。奇怪的是,我在頁面中擁有完全相同的表格定義,並且它仍然沒有正確格式化。 –

+1

是啊,非常感謝,我最終發現了一些衝突的CSS。一切順利! –

+0

@jeffery_the_wind很高興幫助.. –

相關問題