jqGrid寻呼机图标不显示

Question

我阅读了有关此问题 Stack 的其他几篇帖子，但无法找到解决方案。这是我的html的链接。我是否缺少任何 CSS 或其他内容？

<script src="jquery/jquery-1.4.1.min.js"></script>
<script src="jquery/jquery-1.4.1.js"></script>

<!-- jqGrid -->
<link rel="stylesheet" type="text/css" href="jqGrid/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="jqGrid/jquery-ui-custom.css" />
<script src="jqGrid/grid.locale-en.js" type="text/javascript"></script>
<script src="jqGrid/jquery.jqGrid.min.js" type="text/javascript"></script>

我正在测试的代码只是 jqGrid 站点中示例的副本。

 $(document).ready(function (event) {

  jQuery("#listArray").jqGrid({
    datatype: "local",
    height: 100,
    colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
    colModel: [
        { name: 'id', index: 'id', width: 60, sorttype: "int" },
        { name: 'invdate', index: 'invdate', width: 90, sorttype: "date" },
        { name: 'name', index: 'name', width: 100 },
        { name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float" },
        { name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float" },
        { name: 'total', index: 'total', width: 80, align: "right", sorttype: "float" },
        { name: 'note', index: 'note', width: 150, sortable: false }
    ],
    multiselect: false,
    caption: "Manipulating Array Data",
    rowNum: 6,
    rowList: [3, 6, 9],
    pager: '#jqPager',
  });

  var mydata = [
        { id: '1', invdate: '2007-10-01', name: 'test', note: 'note', amount: '200.00', tax: '15.37', total: '210.89' },
        { id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
        { id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
        { id: "4", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
        { id: "5", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
        { id: "6", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
        { id: "7", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
        { id: "8", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
        { id: "9", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }
        ];

  for (var i = 0; i <= mydata.length; i++) {
    jQuery("#listArray").addRowData(i + 1, mydata[i]);
  }

另一件事是页码无法正常工作。当我第一次加载页面时，它将显示第 1 页，共 0 页。当我单击“每页记录数”框以更改为默认值以外的内容时，页码将正确更新。有没有办法修复它，以便在页面加载时页码将显示正确的第 1 页，共 2 页？

谢谢！

Answer 1

对我来说，这是 .png 文件没有被拾取的情况。在 jquery-ui.css 中，通过将 ../ 放在前面来更改您的相对引用，例如 images/xxxxx.png 变为 ../images/xxxxxx.png

Answer 2

我在您的代码中发现了一些语法错误，并根据您的本地数据更正了一些逻辑。这对我来说很好。我已将您的 localdata 直接添加到 jqgrid 中。像这样，

datatype: "local",
height: 'auto',
data : mydata,

你的 html 可能看起来像这样，

<table id="listArray">
<tr>
    <td />
</tr>
</table>
<div id="jqPager"></div>

当然你需要添加 navGrid 部分。像这样，

 $("#listArray").jqGrid('navGrid', '#jqPager', 
           { edit: false, add: false, del: false });

这是您的代码的Demo。希望这会有所帮助。