当前位置:首页 > 开发 > 互联网 > 正文

jqGrid basic demo

发表于: 2013-01-03   作者:antlove   来源:转载   浏览次数:
摘要: 一 数据来自本地(客户端) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="
一 数据来自本地(客户端)
<!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>


二 数据源来自服务器
<!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可以不指定。它的默认设置如下:
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格式是
{ 
  "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返回格式如下:
{ 
  "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的name属性。

更多可参考 http://blog.csdn.net/hurryjiang/article/details/6891115

jqGrid basic demo

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
工程目录如下图所示: build.xml <?xml version="1.0" encoding="UTF-8"?> <project defau
0.Maven Dependency <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://ww
3 JQGrid
JqGrid文档:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs JqGrid Demo:http:/
4 jqGrid
前段时间做了个小项目,用到了jqgrid,jqgrid看起来还是很强大的,通过一些配置既可以实现对数据的
为了大家能够更好的学习和使用Jqgrid网格插件,我决定用Strtus2+Spring+hibernate+Jquery+Jqgrid实
应用中经常会遇到向用户展示信息的情况。我们可以自己通过<table>标签来实现。在此介绍另一种
应用中经常会遇到向用户展示信息的情况。我们可以自己通过<table>标签来实现。在此介绍另一种
应用中经常会遇到向用户展示信息的情况。我们可以自己通过<table>标签来实现。在此介绍另一种
jqGrid: 是一个用于处理表格的 jquery插件, 它能够处理json/xml..等格式数据, 实现高效的获取数据,
jqGrid的编辑——基础知识 10 人收藏此文章, 我要收藏 发表于3年前(2009-12-11 10:20) , 已有 13545
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号