2012-04-16 2 views
1

Я пытался использовать jqGrid для разработки мобильных устройств, но я не могу получить тот же вид, что и веб-представление. Стрелки пейджера и другие изображения отображаются только при наведении курсора мыши.JqGrid на мобильном устройстве

Пожалуйста, дайте мне знать, если мне нужно сделать что-то особенное для плагина для работы на мобильном устройстве.

У меня также есть проблема с тем, чтобы заставить columnChooser работать. Всплывающее не приходит

Благодарности

[Update] Пожалуйста, найдите ниже функции, что я пишу.

Файлы, которые я в том числе, являются:

  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

Какое это мобильное устройство и какой браузер вы используете? –

+0

Я фактически оцениваю мобильные устройства для своей компании. Сейчас я работаю над Motorola ET1, основанной на Android. Это не работает, даже когда я пытаюсь имитировать iPad. –

+0

Я использовал jqGrid на iPad без проблем ... –

ответ

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>