jqGrid详解及高级应用(十四)

一：jqGrid 是一个用来显示网格数据的jQuery插件，文档比较全面，附带中文版本。

 二：官方主页
http://www.jqgrid.com/
目前最新版本：jqGrid 3.7 Beta
在线文档
http://www.secondpersonplural.ca/jqgriddocs/index.htm
在线Demo
http://www.trirand.com/blog/jqgrid/jqgrid.html

三：jqGrid的使用

  1.准备好相应的数据库

  2.HTML前台页面准备好js

     必须的三个JS

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>    ----JQuery库
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>   ---jqGrid语言库
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>      ---jqGrid库

3.前台HTML页面准备好两个css

  <link href="themes/redmond/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css" /> ----JQuery UI样式
   <link href="themes/ui.jqgrid.css" rel="stylesheet" type="text/css" />    ---jqGrid  CSS
4.前台HTML页面的HTML代码

<table id="list1"></table>    ----显示jqGrid 内容

<div id="pager1"></div>     -----显示jqGrid 分页

 

5.jqGrid取数据的四种方式
方式一、XML数据
方式二、XMLString数据
方式三、JSON数据
方式四、JSONString数据
附一扩展方式: ArrayData数据
附二扩展方式: DataType指定特定的Function加载数据
   1.jqGrid取数据方式1 – XML

后台页面XMLData.aspx
要求返回数据的格式：xmlReader : { 
 root: "rows", 
  row: "row", 
  page: "rows>page", 
  total: "rows>total", 
  records : "rows>records", 
  repeatitems: true, 
  cell: "cell", 
  id: "[id]",  
  userdata: "userdata",  
  subgrid: { 
    root:"rows",  
    row: "row",  
    repeatitems: true,  
    cell:"cell" 
  } 
} 

 格式：

前台调用页面
 $(function (){
        jQuery("#list1").jqGrid({
   	        url:'AjaxPage/XMLData.aspx?q=1',
	        datatype: "xml",
   	        colNames:['编号','登录帐号', '密码', '状态','班级','真实姓名','性别','联系电话','家庭住址','Email','是否在线'],
   	        colModel:[
   		        {name:'StudentId',index:'1', width:75},
   		        {name:'LoginId',index:'2', width:90},
   		        {name:'LoginPwd',index:'3', width:100},
   		        {name:'UserState',index:'4', width:80, align:"right"},
   		        {name:'Class',index:'5', width:80, align:"right"},		
   		        {name:'StudentName',index:'6', width:80,align:"right"},		
   		        {name:'Sex',index:'7', width:50, sortable:false},	
   		        {name:'Phone',index:'8', sortable:false},
   		        {name:'Adress',index:'9', width:100, sortable:false},
   		        {name:'Email',index:'10',  sortable:false},
   		        {name:'UserOnline',index:'11', width:100, sortable:false}	
   	        ],

 jqGrid取数据方式1--XML

          rowNum:5,            ----设置分页条数对rows参数

            autowidth: true,   -----可以用page 参数获取前台jqGrid 请求的是第几页的数据

            rowList:[5,10,15],

             pager: jQuery('#pager1'),

             sortname: '1',    ---设置排序字段，对应sidx参数

               viewrecords: true,

               sortorder: "asc",     ----设置排序方式，对应sord参数        

            caption:"学生基本信息-XML"

        }).navGrid('#pager1',{edit:false,add:false,del:false});

        });