1

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

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

我在让 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');
            }
        });
 };
4

1 回答 1

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>
于 2012-04-17T18:12:39.630 回答