2014-01-23 59 views
0

我讀過這個問題上的其他幾個帖子堆棧和無法找到解決方案。這裏是我的html的鏈接。我是否缺少任何CSS或其他東西?jqGrid尋呼機圖標沒有顯示

<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頁。當我單擊「每頁記錄數」框以更改爲默認值以外的值時,頁碼將正確更新。有沒有辦法解決這個問題,以便頁面加載時頁碼顯示正確的第1頁/共2頁?

謝謝!

+0

你有代碼「navGrid」?也看到類似的問題:http://stackoverflow.com/questions/3491963/pagination-problem-in-jqgrid-with-array-data – vissu

+0

謝謝!該鏈接幫助我解決了分頁問題。不知道在添加這些行後我必須重新加載網格。 – JimC

+0

我很高興我可以幫你:) – vissu

回答

0

我發現在你的代碼中的一些語法錯誤,並根據您的本地數據修正一些邏輯的。這對我來說工作得很好。我已經將您的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。希望這可以幫助。

+0

謝謝!這真的幫助我找出缺少的東西。我使用您使用的Google CSS文件解決了問題。那個navGrid真的很酷,但它只有一半在我身邊。我完全複製了您的代碼,但「查找」按鈕沒有像您的演示那樣正確查找搜索。任何想法爲什麼? – JimC

+0

不客氣。如果您覺得它有用,請將其標記爲答案。你的意思是在你的網格中找到按鈕? –

+0

是的,查找記錄按鈕。它只適用於數字等特定字段,但不適用於文本字段。它也不適用於「Inv No」字段。 – JimC

1

對我來說,這是一個.png文件沒有被拾起的情況。在jQuery的ui.css通過把../在前例如圖像更改相對引用/ xxxxx.png變得../images/xxxxxx.png