2011-11-24 77 views
1

我在我的項目中的兩個地方使用jqGrid。jqGrid中的水平滾動條

在第一示例代碼它正在運行與完美單槓顯示出來...

爲第一的jqGrid 示例代碼示例代碼:

jQuery("#list2").jqGrid({ 
    url:'server1.php?P1=ACNO,APHID', 
    datatype: "json", 
    colNames:[ 
     'ACNO','APHID' 
    ], 
    colModel:[ 
     {name:'ACNO',index:'ACNO', width:80, sortable:true, search:true}, 
     {name:'APHID',index:'APHID', width:80, sortable:true, search:true} 
    ], 
    rowNum:100, 
    rowList:[100,200,300,400], 
    pager: '#pager2', 
    loadonce: true, 
    sortname: 'geneID', 
    viewrecords: true, 
    width:700, 
    shrinkToFit:false, 
    height:700, 
    sortorder: "desc", 
    caption:"Breeder Tool Box" 
}); 

用於第二的jqGrid 示例代碼示例代碼:

jQuery("#list2").jqGrid({ 
    url:'server4.php?P1=NEMATODE', 
    datatype: "json", 
    colNames:['Linkage_group','Chromosome','Start_Position','Stop_Position','Start','End','geneID','Feature_Type','Feature_Name','Mstart','Mstop','Trait'], 
    colModel:[ 
     {index: 'Linkage_group', name: 'Linkage_group',width:170, sortable:true, search:true}, 
     {index: 'Chromosome', name: 'Chromosome',width:170, sortable:true, search:true}, 
     {index: 'Start_Position', name: 'StartPos',width:170, sortable:true, search:true}, 
     {index: 'Stop_Position', name: 'StopPos',width:170, sortable:true, search:true}, 
     {index: 'Start', name: 'Start',width:170, sortable:true, search:true}, 
     {index: 'End', name: 'End',width:170, sortable:true, search:true}, 
     {index: 'geneID', name: 'geneID',width:170, sortable:true, search:true,formatter: formatOperations}, 
     {index: 'Feature_Type', name: 'Feature_Type',width:170, sortable:true, search:true}, 
     {index: 'Feature_Name', name: 'Feature_Name',width:170, sortable:true, search:true}, 
     {index: 'Mstart', name: 'Mstart',width:170, sortable:true, search:true}, 
     {index: 'Mstop', name: 'Mstop',width:170, sortable:true, search:true}, 
     {index: 'Trait', name: 'Trait',width:170, sortable:true, search:true}], 
    rowNum:100, 
    rowList:[100,200,300,400], 
    pager: '#pager2', 
    loadonce: true, 
    shrinkToFit:false, 
    viewrecords: true, 
    width:700, 
    height:700, 
    sortorder: "desc", 
    caption: "Breeder Tool Box", 
    sortname: 'Linkage_group' 
}); 

的jqGrid對於第二網格所有失真無水平條。 我無法找到這兩個代碼之間的差異, 請問您可以指出我的錯誤在哪裏?

+0

我想,這個問題與不在您發佈的代碼單槓。它應該在發佈代碼的代碼中。例如,這可能是HTML或CSS的一些問題。 – Oleg

+0

我不確定,你明白'index'屬性的正確含義。在第二個網格中,您對'index'和'name'('index:'Start_Position',名稱:'StartPos''和'index:'Stop_Position',名稱:'StopPos'')使用不同的值。在第一個網格中,您定義了'sortname:'geneID''並且沒有列'geneID''。所有問題都與橫槓問題無關,但存在錯誤。屬性'search'和'sortable'具有默認值'true',所以你可以在那裏刪除。如果你想改變列的默認屬性,你可以使用'cmTemplate:{width:170}'並減少你的代碼。 – Oleg

回答

4

你可以用CSS來做到這一點。更改下列ui.grid.css

.ui-jqgrid .ui-jqgrid-bdiv { 
    position: relative; 
    margin: 0em; 
    padding:0; 
    /*overflow: auto;*/ 
    overflow-x:visible; 
    overflow-y:auto; 
    text-align:left; 
} 
+0

我在CSS中進行了更改,但沒有看到任何區別。它全部扭曲了。 – KAPILP

+0

感謝您的幫助..它解決了問題 – KAPILP

+0

非常感謝您的解決方案。它幫助我解決了這個問題:)。 –