2012-04-16 256 views
1

我正在嘗試使用jqGrid進行移動設備開發,但我無法獲得與Web視圖相同的視圖。尋呼機箭頭和其他圖像只有當我做鼠標懸停時才顯示。移動設備上的JqGrid

請讓我知道如果我必須做一些特殊的插件在移動設備上工作。

我也有一個讓columnChooser工作的問題。彈出是不是來

感謝

[更新] 請發現我寫了以下功能。

,我包括的文件有:

  1. jquery.mobile-1.0.min.css
  2. jqmobile-patch.css
  3. jQuery的ui.css
  4. ui.jqgrid。 CSS
  5. ui.multiselect.css
  6. jQuery的1.7.1.min.js
  7. jQuery的ui.min.js
  8. ui.multiselect.js
  9. grid.locale-en.js
  10. jquery.jqGrid.min.js

在提供的順序。

function buildGrid() { 
var grid = jQuery("#contactGrid"); 
grid.jqGrid({ 
    url: '/public/json/contactsdata.json', 
    mtype:'GET', 
    datatype: 'json', 
    headertitles: true, 
    sortable: true, 
    colNames:['ID','Name','Date of Birth',"Email","Marital Status"], 
    colModel:[ 
    {name:'id', index:'id'}, 
    {name:'name',index:'name'}, 
    {name:'dob',index:'dob'}, 
    {name:'email',index:'email'}, 
    {name:'maritalstatus',index:'maritalstatus'} 
    ], 
    sortname: 'id', 
    sortorder: 'asc', 
    rowNum:5, 
    rowList:[5,10,20], 
    pager: '#contactPager', 
    viewrecords: true, 
    autowidth: true, 
    shrinkToFit: true, 
    loadonce:true, 
    emptyrecords: "No Records to display", 
    height: 'auto', 
    width: '80%', 
    caption: "Contact Details", 
    ignoreCase: true, 
    gridview: true 

}); 

    grid.jqGrid('navGrid', '#contactPager', {refreshstate: 'current', search:true,add: false, edit: false, del: false}); 
    grid.jqGrid('navButtonAdd', '#contactPager', { 
      caption: "", 
      buttonicon: "ui-icon-calculator", 
      title: "Choose columns", 
      onClickButton: function() { 
       $(this).jqGrid('columnChooser'); 
      } 
     }); 
}; 
+0

它是什麼類型的移動設備,以及您使用的是哪種瀏覽器? – 2012-04-16 14:15:17

+0

我實際上正在評估我公司的移動設備。目前,我正在開發基於Android的摩托羅拉ET1。即使我嘗試模擬iPad,它也不起作用。 – 2012-04-16 14:37:42

+0

我在iPad上使用jqGrid時沒有任何問題... – 2012-04-16 15:05:01

回答

1

我解決了這個問題。問題在於包含文件的順序。我遵循的順序是:

<link rel="stylesheet" href="/public/jqmobile/jquery.mobile-1.0.min.css"> 
<link rel="stylesheet" href="/public/css/jqmobile-patch.css"> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css" /> 
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/css/ui.jqgrid.css" /> 
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/plugin/ui.multiselect.css" /> 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" charset="utf-8" src="/public/jqmobile/jquery.mobile-1.0.min.js"></script> 
<script type="text/javascript" charset="utf-8" src="/public/js/jqmobile-patch.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> 
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/plugin/ui.multiselect.js"></script> 
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js"></script> 
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/jquery.jqGrid.src.js"></script>