jqgrid做表格

mushme

浏览: 790128 次
性别:
来自: 西安

最近访客更多访客>>

mumume123

sker

odpsoft

西红柿炒笨蛋

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript相关

QQ jQuery Gmail json HTML

jqgrid做表格很方便，mark一个简单的例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>qgrid.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <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>
  </head>
<body>
	<table id="gridTable"></table>
    <div id="gridPager"></div>
    <script type="text/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('#gridPager',{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]);
        });    
    </script>
</body>
</html>

以下是一个从外部或许数据的例子，用json来传值

<script type="text/javascript">   
			$(function()
			{
				$("#gridTable").jqGrid({
					url:'jqGridServlet',
					datatype: "json",
					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],
					jsonReader:{
						repeatitems : false
					},
					pager:"#gridPager",
					caption: "jqGrid与Servlet集成"
			}).navGrid('#gridPager',{edit:false,add:false,del:false});
		})
	</script>  
		
	</head>
	<body>
		<table id="gridTable"></table>
		<div id="gridPager"></div>
	</body>

分享到：

jqgrid学习记录，从外部url获取json数据 | 强大的jquery验证框架

2011-01-20 17:28
浏览 2947
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jqgrid做表格

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jqgrid做表格

评论

发表评论

相关推荐

zhihu图片无法显示问题插件

makr一个base64编码和解码的js

jrcode生成二维码

根据数字生成一维码

jQuery MsgBox Plugin[转]

jqgrid属性只colmodel

批量设置输入框的只读属性

表单验证，在每一个有requred类的文本框后加入“*”以提示必填项

加载Google cdn jQuery库

获取鼠标当前位置的js

原生态的js map

jqgrid数据转换

jquery只允许输入整数

生成表单json字串

jqgrid学习记录，从外部url获取json数据

强大的jquery验证框架

复制内容的js，通过json来实现

js表格求和

form嵌套问题

复制粘贴的js

最近访客更多访客>>