`
mushme
  • 浏览: 789301 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

jqgrid做表格

阅读更多
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 编辑表格 一列

    jqGrid 是一个强大的 jQuery 插件,用于在网页上创建、操作和展示数据表格。它提供了丰富的功能,包括数据的加载、排序、过滤、编辑和显示。本篇文章将深入探讨如何在 jqGrid 中实现表格的一列编辑功能。 一、...

    jqGrid 做的表格分页

    ; charset=utf-8"&gt; &lt;title&gt;Insert title here ...&lt;link type="text/css" rel="stylesheet" href="css/ui.jqgrid.css"&gt; &lt;script type="text/javascript" src="js/jquery-1.11.0.min.js" &gt;&lt;/script&gt; ...

    jqGrid绘制表格

    jqGrid是一款功能强大的JavaScript库,专门用于在网页上绘制交互式表格。它基于jQuery库,提供了丰富的特性,如数据分页、排序、过滤、编辑以及自定义格式化等,使得在Web应用中处理大量数据变得更为便捷。在这个...

    jqGrid的自适应表格

    在这个"jqGrid的自适应表格"示例中,我们将探讨如何利用jqGrid实现表格的自适应窗口大小,以及在单元格数据过多时如何优雅地处理显示。 首先,要创建一个基本的jqGrid,你需要在HTML文件中引入jQuery库和jqGrid的...

    Jquery表格插件jqGrid 4.3.0及其Demo

    **jQuery表格插件jqGrid 4.3.0详解** jqGrid是一款基于JavaScript的开源网格控件,它充分利用了jQuery库的强大功能,为Web开发者提供了丰富的数据展示和操作功能。jqGrid 4.3.0是该插件的一个重要版本,它在前一...

    jqGrid表格数据展示插件

    jqGrid是一款功能强大的JavaScript表格插件,主要用于网页数据的展示、编辑和管理。它基于jQuery库,提供了丰富的功能,如分页、排序、过滤、编辑、添加、删除和搜索等,使得网页上的表格操作变得更加便捷和高效。在...

    数据表格JqGrid自适应列宽度

    JqGrid是一款基于jQuery的数据表格插件,它提供了一种高效、可定制的方式来展示和操作表格数据。本文将深入探讨“数据表格JqGrid自适应列宽度”这一主题,以帮助开发者更好地理解和实现这一功能。 首先,JqGrid允许...

    jqGrid表格内容查询读取代码.zip

    在"jqGrid表格内容查询读取代码.zip"压缩包中,我们可以找到实现jqGrid表格内容查询读取的相关代码。 首先,让我们深入理解jqGrid的核心概念: 1. **初始化表格**:在HTML页面中,我们需要创建一个空的表格元素,...

    jqgrid jquery 表格插件

    **jqGrid jQuery 表格插件** jqGrid是一款基于jQuery的开源数据网格插件,它为Web应用程序提供了强大的数据展示和管理能力。这个插件深受开发者喜爱,因为它提供了丰富的功能和自定义选项,使得在网页上创建交互式...

    jqGrid 表格demo

    **jqGrid表格组件详解** jqGrid是一款非常强大的jQuery插件,用于创建高度可定制的数据网格。这个组件允许用户轻松地展示、操作和管理大量数据,提供了丰富的功能,如排序、分页、过滤、编辑和更多。在本篇文章中,...

    table表格样式利用jqgrid实现

    在网页开发中,表格(Table)是展示数据的重要方式,而jqGrid是一个强大的JavaScript库,专门用于创建交互式、功能丰富的表格。本教程将深入探讨如何利用jqGrid来实现美观且功能丰富的表格样式。 首先,我们需要...

    jqGrid表格属性大全

    jqGrid表格属性大全 jqGrid是基于jQuery的表格控件库,它提供了许多有用的属性和方法来操作HTML表格。下面是jqGrid表格属性大全的详细介绍: Table对象 Table对象是jqGrid中的一个基本对象,表示HTML文档中的表,...

    jqgrid表格

    在“jqgrid表格,单元格合并,并显示,demo版本”中,我们可以深入探讨以下几个关键知识点: 1. **单元格合并**:jqGrid允许在表格中合并单元格,这在显示具有层次结构的数据时非常有用。通过设置`cellattr`或`...

    jqGrid的表格数据呈编辑转态

    ### jqGrid表格数据呈编辑状态知识点详解 #### 一、jqGrid简介 jqGrid是一款功能强大的jQuery插件,用于在网页上实现数据网格展示。它不仅支持数据展示,还提供了丰富的交互功能,如排序、搜索、分页等,并且允许...

    jquery表格插件jqgrid

    **jQuery表格插件jqGrid详解** jqGrid是一款强大的基于JavaScript的开源网格控件,它能够为Web应用程序提供灵活、功能丰富的数据展示和操作界面。这款插件是jQuery库的一个扩展,专为处理大量数据和实现复杂的表格...

    jqGrid插件--JQuery表格插件

    jqGrid是一款基于jQuery的开源表格插件,专为数据管理和展示设计,提供了丰富的功能和高度的自定义性。它在Web开发中广泛应用于构建高效、交互式的数据网格。以下是关于jqGrid的一些关键知识点: 1. **基本使用**:...

    jqgriddemo,样式漂亮,可以直接使用

    jqGrid是一款基于JavaScript的开源数据网格组件,它是jQuery库的一部分,用于创建交互式的、数据丰富的Web表格。jqGrid以其强大的数据管理能力、丰富的功能集和灵活的可定制性,深受开发者的喜爱。它允许用户进行...

    jqgrid 表格的增删改查以及modal弹出框

    总的来说,jqGrid 提供了一个全面的解决方案来管理表格数据,包括基础操作和高级功能。通过结合 modal 弹出框,它为用户提供了更友好的交互体验。理解并熟练掌握 jqGrid 的使用,对任何需要处理大量数据的 Web 应用...

    基于jqgrid实现树形菜单分页列表查询

    "基于jqgrid实现树形菜单分页列表查询"这一主题,旨在创建一个既能展示层级结构又能进行高效分页查询的表格组件。jqGrid是一款强大的jQuery插件,它提供了丰富的功能,如数据网格、分页、排序、过滤、编辑等,同时...

    PHP+jqGrid表格插件实现增删改查

    要实现“PHP+jqGrid表格插件实现增删改查”,首先需要在HTML页面中引入jqGrid的CSS和JS文件,然后创建一个表格元素,定义相应的列名和ID。接着,使用jQuery初始化jqGrid,设置数据源(通常是PHP脚本返回的JSON或XML...

Global site tag (gtag.js) - Google Analytics