jqgrid

来源：互联网发布：mac系统安装word文档编辑：程序博客网时间：2024/04/26 13:29

一数据来自本地(客户端)

Js代码  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
<title>My First Grid</title>  
   
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.9.2.custom.min.css" />  
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />  
   
<style type="text/css">  
html, body {  
    margin: 0;  
    padding: 0;  
    font-size: 75%;  
}  
</style>  
   
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>  
<script src="js/grid.locale-en.js" type="text/javascript"></script>  
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>  
   
<script type="text/javascript">  
  
var data=[  
         {id:1,name:"xiao",birthday:"2012-12-12"},  
         {id:2,name:"xiao",birthday:"2012-12-12"},  
         {id:3,name:"xiao",birthday:"2012-12-12"},  
         {id:4,name:"xiao",birthday:"2012-12-12"},  
         {id:5,name:"xiao",birthday:"2012-12-12"},  
         {id:6,name:"xiao",birthday:"2012-12-12"},  
         {id:7,name:"xiao",birthday:"2012-12-12"},  
         {id:8,name:"xiao",birthday:"2012-12-12"},  
         {id:9,name:"xiao",birthday:"2012-12-12"},  
         {id:10,name:"xiao",birthday:"2012-12-12"},  
];// the native data  
  
$(function(){   
  $("#list").jqGrid({  
    datatype: "local",// specify the data from local   
    data:data,// the data which will be displayed   
    colNames:["ID","NAME", "BIRTHDAY"],// the column header names  
    colModel :[   
      {name:"id", index:"id", width:100},   
      {name:"name", index:"name", width:100},   
      {name:"birthday", index:"birthday", width:100, sortable:false},   
    ],// the column discription  
    pager: "#pager",// specify the pager bar   
    rowNum:10, // sets how many records we want to view in the grid  
    // An array to construct a select box element in the pager   
    // in which we can change the number of the visible rows.  
    rowList:[10,20,30],  
    // add the new column which counts the number of available rows  
    rownumbers:true,   
    // the column according to which the data is to be sorted   
    // when it is initially loaded  
    sortname: "id",     
    sortorder: "desc", // the initial sorting order  
    // view the beginning and ending record number in the grid  
    viewrecords: true,   
    gridview: true,  
    caption: "native grid",  
    width:500,   
    height:200,  
  });   
});   
</script>  
</head>  
<body>  
    <table id="list"></table>   
    <div id="pager"></div>   
</body>  
</html>  

二数据源来自服务器

Js代码  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
<title>My First Grid</title>  
   
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.9.2.custom.min.css" />  
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />  
   
<style type="text/css">  
html, body {  
    margin: 0;  
    padding: 0;  
    font-size: 75%;  
}  
</style>  
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>  
<script src="js/grid.locale-en.js" type="text/javascript"></script>  
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>  
<script type="text/javascript">  
$(function(){   
    var result=null;  
      $("#list").jqGrid({  
            datatype: "json", // specify the data in json format  
            // specify the url of the file that returns   
            // the data needed to populate the grid  
            url:"/JavaWeb/JSONServlet",   
            // an array which describes the structure of the expected json data  
            jsonReader:{ repeatitems: false },  
            colNames:["ID","NAME", "BIRTHDAY"],// the column header names  
            colModel :[   
              {name:"id", index:"id", width:100},   
              {name:"name", index:"name", width:100},   
              {name:"birthday", index:"birthday", width:100, sortable:false},   
            ],// the column discription  
            pager: "#pager",// specify the pager bar   
            rowNum:10, // sets how many records we want to view in the grid  
            // An array to construct a select box element in the pager   
            // in which we can change the number of the visible rows.  
            rowList:[10,20,30],  
            // add the new column which counts the number of available rows  
            rownumbers:true,   
            // the column according to which the data is to be sorted   
            // when it is initially loaded  
            sortname: "id",     
            sortorder: "desc", // the initial sorting order  
            // view the beginning and ending record number in the grid      
            viewrecords: true,  
            gridview: true,  
            caption: "remote grid",  
            width:500,   
            height:200,  
          });   
  
});   
</script>  
</head>  
<body>  
    <table id="list"></table>   
    <div id="pager"></div>   
</body>  
</html>  

Note:jsonReader可以不指定。它的默认设置如下：

Js代码  
jQuery("#gridid").jqGrid({  
...  
   jsonReader : {  
     root: "rows",  
     page: "page",  
     total: "total",  
     records: "records",  
     repeatitems: true,  
     cell: "cell",  
     id: "id",  
     userdata: "userdata",  
     subgrid: {root:"rows",   
        repeatitems: true,   
       cell:"cell"  
     }  
   },  
...  
});  

如果使用默认的jsonReader设置(repeatable:true)，jqGrid所期望的json格式是

Js代码  
{   
  "total": "xxx",   
  "page": "yyy",   
  "records": "zzz",  
  "rows" : [  
    {"id" :"1", "cell" :["cell11", "cell12", "cell13"]},  
    {"id" :"2", "cell":["cell21", "cell22", "cell23"]},  
      ...  
  ]  
}  

标签描述total返回的页面数量page要展现的当前页records返回的记录数量rows包含返回记录的数组id行的唯一标识符cell作为rows数组元素对象的一个属性包含返回记录数据的数组(与rows的区别在于:rows可包含除了真正的数据之外的其他属性)

如果设置repeatable:false，则表明让jqGrid通过名字在json数据中搜索元素。
jqGrid期望的json返回格式如下:

Js代码  
{   
  "total": "xxx",   
  "page": "yyy",   
  "records": "zzz",  
  "rows" : [  
    {"id" :"1", "name" :"xiao","birthday":"2012-01-01"},  
    {"id" :"2", "name":"xiao","birthday":"2012-01-01"},  
      ...  
  ]  
}  

其中的id,name,birthday对应于colModel中jsonmap的nam

0 0