Question

我试图将jqGrid用于移动设备开发，但我无法获得与Web视图相同的视图。寻呼机箭头和其他图像仅在我进行鼠标悬停时显示。

如果我必须为插件在移动设备上工作做一些特别的事情，请告诉我。

我在使columnChooser工作时遇到了问题。弹出窗口不会出现

由于

[更新] 请在下面找到我正在撰写的函数。

我包含的文件是：

jquery.mobile-1.0.min.css
jqmobile-patch.css
的jquery-ui.css
ui.jqgrid.css
ui.multiselect.css
的jquery-1.7.1.min.js
的jquery-ui.min.js
ui.multiselect.js
grid.locale-en.js
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');
            }
        });
 };

Answer 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>

移动设备上的JqGrid

1 个答案: