jQuery學習之：jqGrid表格外掛——第一個Demo

技術小胖子發表於2017-11-02
jQuery
應用中經常會遇到向使用者展示資訊的情況。我們可以自己通過<table>標籤來實現。在此介紹另一種方法：通過jQuery的外掛來實現資訊的展示以及對資料的操作等功能。


在網上，關於jQuery的表格外掛有不少。其中有幾款做的很好，比如：flexiGrid和jqGrid。不過flexGrid網上的資料很少，官方文件不全。而jqGrid的官方文件卻相當的全面。官方文件網址：http://www.trirand.com/jqgridwiki /doku.php?id=wiki:jqgriddocs。


學習任何一項技術，第一個例子相當的重要，如果第一個例子都不能執行成功，那接下來的學習將是相當的困難，甚至沒法進行下去。所以，在此先實現第一個例子，希望對剛剛接觸jqGrid的人有所幫助。
  

jqGrid獲得資料的方式有多種，包括xml和JSON等。第一個例子，我使用了更簡單的方式，即Array方式。之後的例子會用json從伺服器端獲得資料。本例子沒有從跟後臺互動。


本例子的效果如下：
效果圖
列出關鍵程式碼：
 
HTML程式碼：
<link id=”uiThemes” rel=”stylesheet” type=”text/css” media=”screen” href=”styles/themes/redmond/jquery-ui-1.7.2.custom.css” />

    <link rel=”stylesheet” type=”text/css” media=”screen” href=”styles/themes/ui.jqgrid.css” />

    <!— 引入jQuery —>

    <script type=”text/javascript” src=”scripts/jQuery/jquery-1.3.2.js”></script>

    <script src=”scripts/jQuery/plugins/jquery-ui-1.7.2.custom.min.js” type=”text/javascript”></script>

    <script src=”scripts/jQuery/plugins/grid.locale-zh_CN.js” type=”text/javascript”></script>

    <script src=”scripts/jQuery/plugins/jquery.jqGrid.min.js” type=”text/javascript”></script>

…
<body>

        <table id=”gridTable”></table>

        <div id=”gridPager”></div>
</body>

 

因為jqGrid3.6整合了jQuery UI，所以，此處需要匯入UI相關js和css。另外，grid.locale-zh_CN.js這個國際化檔案是自己翻譯的，因為官方網站沒有中文的國際化檔案（官方提供了很多中語言的國際化檔案，但是沒有提供中文的，什麼意思嘛！）。另外，這個檔案必須在jquery.jqGrid.min.js之前匯入，否則會出問題。


javascript程式碼：
$(function()

    {

        $(“#gridTable”).jqGrid({

                datatype: “local”,

                height: 250,

                colNames:[`編號`,`使用者名稱`, `性別`, `郵箱`, `QQ`,`手機號`,`出生日期`],

                colModel:[

                        {name:`id`,index:`id`, width:60, sorttype:“int”},

                        {name:`userName`,index:`userName`, width:90},

                        {name:`gender`,index:`gender`, width:90},

                        {name:`email`,index:`email`, width:125,sorttype:“string”},

                        {name:`QQ`,index:`QQ`, width:100},                

                        {name:`mobilePhone`,index:`mobilePhone`, width:120},                

                        {name:`birthday`,index:`birthday`, width:100, sorttype:“date”}                

                ],

                sortname:`id`,

                sortorder:`asc`,

                viewrecords:true,

                rowNum:10,

                rowList:[10,20,30],

                pager:“#gridPager”,

                caption: “第一個jqGrid例子”

        }).navGrid(`#pager2`,{edit:false,add:false,del:false});

        var mydata = [

                {id:“1”,userName:“polaris”,gender:“男”,email:“fef@163.com”,QQ:“33334444”,mobilePhone:“13223423424”,birthday:“1985-10-01”},

                {id:“2”,userName:“李四”,gender:“女”,email:“faf@gmail.com”,QQ:“222222222”,mobilePhone:“13223423”,birthday:“1986-07-01”},

                {id:“3”,userName:“王五”,gender:“男”,email:“fae@163.com”,QQ:“99999999”,mobilePhone:“1322342342”,birthday:“1985-10-01”},

                {id:“4”,userName:“馬六”,gender:“女”,email:“aaaa@gmail.com”,QQ:“23333333”,mobilePhone:“132234662”,birthday:“1987-05-01”},

                {id:“5”,userName:“趙錢”,gender:“男”,email:“4fja@gmail.com”,QQ:“22222222”,mobilePhone:“1343434662”,birthday:“1982-10-01”},

                {id:“6”,userName:“小毛”,gender:“男”,email:“ahfi@yahoo.com”,QQ:“4333333”,mobilePhone:“1328884662”,birthday:“1987-12-01”},

                {id:“7”,userName:“小李”,gender:“女”,email:“note@sina.com”,QQ:“21122323”,mobilePhone:“13220046620”,birthday:“1985-10-01”},

                {id:“8”,userName:“小三”,gender:“男”,email:“oefh@sohu.com”,QQ:“242424366”,mobilePhone:“1327734662”,birthday:“1988-12-01”},

                {id:“9”,userName:“孫先”,gender:“男”,email:“76454533@qq.com”,QQ:“76454533”,mobilePhone:“132290062”,birthday:“1989-11-21”}

                ];

        for(var i=0;i<=mydata.length;i++)

                jQuery(“#gridTable”).jqGrid(`addRowData`,i+1,mydata[i]);

        });
可以看出，jqGrid的使用是：$(“#tableId”).jqGrid(optional);其中，optional是一個物件，有很多屬性，具體什麼含義，怎麼配置，之後的文章我會介紹，也可以在官方網站找到詳細的介紹。 


jsp/Servlet整合jqGrid、Struts2整合jqGrid請關注本人之後的部落格文章。
 
由於很多人問我要例子的原始碼，polaris也都發給了大家，然而有時候很晚才看到，發的會有點晚。鑑於此，特提供下載polaris的jqGrid的例子程式碼，謝謝大家的支援！
 
可以到：http://www.beijixing001.com/?p=406文章結尾下載我的例子程式碼。


     本文轉自polaris1119 51CTO部落格，原文連結：http://blog.51cto.com/polaris/259336，如需轉載請自行聯絡原作者


相關文章