jQuery學習之：jqGrid表格插件——第一個Demo

應用中常常會遇到向用戶展現信息的狀況。咱們能夠本身經過<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文章結尾下載個人例子代碼。