jqgrid靜態數據獲取及顯示

1. 引入必要文件 在頁面中引入jquery.jqGrid.min.js，jquery.js及相關的樣式文件

2. 在頁面裏面定義 <table></table>用於展現數據的表格區，同時加上一個<div></div>作爲分頁攔 如：

<!--  jqGrid的table  -->
        <table id="gridTable"></table>
		<!-- 翻頁的div -->
        <div id="gridPager"></div>

3. 在js腳本文件中，定義本地數據源

   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"}
               ];

4. 在jquery中定義表格的jgGrid生成屬性，列定義，高度，展現記錄數等

   $("#gridTable").jqGrid({
             datatype: "local", //數據類型
             height: 250,
             colNames:['編號','用戶名', '性別', '郵箱', 'QQ','手機號','出生日期'],  //至關於展示列表的//顯示名稱
             colModel:[  //列定義，name熟悉定義的是對應於數據源的key標示，index對應的則是傳到服務器                     斷用來排序用的列名稱
                     {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, //在grid上顯示記錄條數，這個參數會傳到後臺去
             rowList:[10,20,30], //可選的每頁多少記錄
             pager:"#gridPager", //定義翻頁用的導航欄，必須是有效的html元素，翻頁工具欄位置能夠防止在//任意位置
             caption: "第一個jqGrid例子"  //表格頭的名稱
     }).navGrid('#pager2',{edit:false,add:false,del:false});

5. 將本地數據經過循環，經過調用jgGrid.addRowData方法插入

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

這樣就能夠將本地數據根據jqgrid等設置，展現出來了