文档章节

jqgrid静态数据获取及显示

 青竹风
发布于 2016/09/05 09:40
字数 596
阅读 89
收藏 0
  1. 引入必要文件 在页面中引入jquery.jqGrid.min.js,jquery.js及相关的样式文件

  2. 在页面里面定义 <table></table>用于展示数据的表格区,同时加上一个<div></div>做为分页拦 如:

         <!--  jqGrid的table  -->
        <table id="gridTable"></table>
		<!-- 翻页的div -->
        <div id="gridPager"></div>
  1. 在js脚本文件中,定义本地数据源

    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"}
                ];
    
  2. 在jquery中定义表格的jgGrid生成属性,列定义,高度,展示记录数等

           $("#gridTable").jqGrid({
              datatype: "local", //数据类型
              height: 250,
              colNames:['编号','用户名', '性别', '邮箱', 'QQ','手机号','出生日期'],  //相当于展现列表的//显示名称
              colModel:[  //列定义,name熟悉定义的是对应于数据源的key标示,index对应的则是传到服务器                     断用来排序用的列名称
                      {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, //在grid上显示记录条数,这个参数会传到后台去
              rowList:[10,20,30], //可选的每页多少记录
              pager:"#gridPager", //定义翻页用的导航栏,必须是有效的html元素,翻页工具栏位置可以防止在//任意位置
              caption: "第一个jqGrid例子"  //表格头的名称
      }).navGrid('#pager2',{edit:false,add:false,del:false});
    
  3. 将本地数据通过循环,通过调用jgGrid.addRowData方法插入

     for(var i=0;i<=mydata.length;i++)
               jQuery("#gridTable").jqGrid('addRowData',i+1,mydata[i]);
       });
    

这样就可以将本地数据根据jqgrid等设置,展示出来了

© 著作权归作者所有

粉丝 0
博文 26
码字总数 10579
作品 0
厦门
私信 提问
加载中

评论(1)

程序员的苦谁知道
setTimeout(function(){drawTable()}, 1000),表格里面有数据,但是表格内容不显示。
直接使用drawTable(),却可以显示出来。
jQuery表格插件jqgrid加载数据的问题

最近的项目使用jqgrid来显示数据, 遇到个问题, 需求:页面初始化时表格是空的,只要显示列明就好,这个通过不指定url实现了。 加载数据是跟用用户输入到DB查询,返回数据集。尝试手动将数据...

jay_
2012/01/20
3.7K
1
jqGrid与Struts2集成

因为公司项目需要,在Hibernate+Struts2的环境下,研究了一下如何使用jqGrid。 说实在的,Struts2+jqGrid不是一个很好的组合。因为jqGrid中很多功能,基本上都使用的是AJAX的访问方式,并且,...

yonge
2009/12/09
10.4K
3
关于dwz使用过程中的3个问题,新手勿拍

@张慧华 你好,想跟你请教个问题: 1.如何查看当前的dwz版本是多少?在哪看? 2.为什么我每次从leftside点击链接的时候,都要点两下?第一次是把链接加载到navTab,但是却没有内容显示,第二...

Snakecn21
2012/11/16
8K
13
jfinal与jqgrid结合实例。

直接上代码: index.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> </head> <body> <link rel="stylesheet" ......

控制自己
2013/01/05
0
8
关于jqGrid数据排序的问题

如上图,降序的时候,jqGrid会按前台方法排序,这样显然行不通! (实际上后台数据是以1397、1000、999这样降序的形式返回的!) 说明:通过向后端ajax获取到jsonData,然后传给jqGrid的。没...

零七九三
2016/02/16
5.5K
8

没有更多内容

加载失败,请刷新页面

加载更多

你需要知道的 5 个 Linux 新手会犯的失误

Linux 爱好者们分享了他们犯下的一些最大错误。 终身学习是明智的 —— 它可以让你的思维敏捷,让你在就业市场上更具竞争力。但是有些技能比其他技能更难学,尤其是那些小菜鸟错误,当你尝试...

xiangyunyan
25分钟前
3
0
来迟了,用Python助你叠猫猫,抢618大红包!

目录: 0 引言 1 环境 2 需求分析 3 前置准备 4 逛店铺流程回顾 5 代码全景展示 6 总结 0 引言 最近叠猫猫的活动可真是十分的火爆,每天小伙伴们为了合猫猫忙的可谓是如火如荼。为啥要叠猫猫...

上海小胖
31分钟前
2
0
FPGA 设备 USB Platform Cable USB

lsusbFuture Technology Devices International, Ltd FT232H Single HS USB-UART/FIFO IC

MtrS
今天
4
0
lua web快速开发指南(6) - Cache、DB介绍

"数据库"与"缓存"的基本概念 数据库与缓存是服务端开发人员的必学知识点. 数据库 "数据库"是一种信息记录、存取的虚拟标记地点的集合统称. 比如现实生活中, 我们经常会用到文件柜、书桌等等数...

水果糖的小铺子
今天
9
0
Oracle分页查询语句的写法

Oracle分页查询语句的写法 Oracle分页查询语句使我们最常用的语句之一,下面就为您介绍的Oracle分页查询语句的用法,Oracle分页查询语句基本上可以按本文给出的格式来进行套用。   Oracle分...

康师傅
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部