JqGrid的介绍和使用
来源:互联网 发布:php 九宫格抽奖源代码 编辑:程序博客网 时间:2024/06/07 04:03
jqGrid 是一个用来显示网格数据的jQuery插件,通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。文档比较全面,其官方网址为:http://www.trirand.com。
一、jqGrid特性:
- 基于jquery UI主题,开发者可以根据客户要求更换不同的主题。
- 兼容目前所有流行的web浏览器。
- Ajax分页,可以控制每页显示的记录数。
- 支持XML,JSON,数组形式的数据源。
- 提供丰富的选项配置及方法事件接口。
- 支持表格排序,支持拖动列、隐藏列。
- 支持滚动加载数据。
- 支持实时编辑保存数据内容。
- 支持子表格及树形表格。
- 支持多语言。
- 最关键目前是免费的。
二、jqGrid使用方式:
1.下载文件
- 下载jqGrid的软件包,目前最新版本为4.4.1 下载地址为:http://www.trirand.com/blog/?page_id=6
- 下载jQuery文件,目前最新版本为1.8.2 下载地址为:http://code.jquery.com/jquery-1.8.2.min.js
- 下载jqGrid皮肤,下载地址为:http://jqueryui.com/themeroller/ 我使用的是:ThemeRoller->gallery->cupertino样式
2.准备文件
在项目的根目录下,建立相应的文件夹,放入下载的文件,目录结构如下图:
3.页面中得代码
3.1、head中加入引用
css文件引入:
<link type="text/css" rel="stylesheet" href="jqGrid/themes/cupertino/jquery-ui-1.9.0.custom.min.css"><link type="text/css" rel="stylesheet" href="jqGrid/themes/ui.jqgrid.css">
js文件引入:
<script type="text/javascript" src="jquery-1.8.2.min.js" /><script type="text/javascript" src="jqGrid/js/jquery-ui-1.9.0.custom.min.js"/><script type="text/javascript" src="jqGrid/js/i18n/grid.locale-cn.js"/><script type="text/javascript" src="jqGrid/js/jquery.jqGrid.min.js"/>
3.2、body中的代码
<!-- jqGrid table list4 --><table id="list4"></table><!-- jqGrid 分页 div gridPager --><div id="gridPager"></div>
其中,list4为列表jqGrid,gridPager为列表的分页div
3.3、js中的代码
$(document).ready(function(){ $("#list4").jqGrid({ url:contextPath + "search.action", datatype:"json", //数据来源,本地数据 mtype:"POST",//提交方式 height:420,//高度,表格高度。可为数值、百分比或'auto' //width:1000,//这个宽度不能为百分比 autowidth:true,//自动宽 colNames:['添加日期', '手机号码', '银行卡号','备注','操作'], colModel:[ //{name:'id',index:'id', width:'10%', align:'center' }, {name:'createDate',index:'createDate', width:'20%',align:'center'}, {name:'phoneNo',index:'phoneNo', width:'15%',align:'center'}, {name:'cardNo',index:'cardNo', width:'20%', align:"center"}, {name:'remark',index:'remark', width:'35%', align:"left", sortable:false}, {name:'del',index:'del', width:'10%',align:"center", sortable:false} ], rownumbers:true,//添加左侧行号 //altRows:true,//设置为交替行表格,默认为false //sortname:'createDate', //sortorder:'asc', viewrecords: true,//是否在浏览导航栏显示记录总数 rowNum:15,//每页显示记录数 rowList:[15,20,25],//用于改变显示行数的下拉列表框的元素数组。 jsonReader:{ id: "blackId",//设置返回参数中,表格ID的名字为blackId repeatitems : false }, pager:$('#gridPager') });});
至此,整个使用jqGrid的前端使用就基本完毕了,当加载此页面的时候,将初始化jqGrid表格,并通过url请求数据,返回datatype类型的数据。至于后台的数据,大家可以自己调用,并返回json格式的数据即可填充表格。
具体的参数可以查询jqGrid API。
具体的参数可以查询jqGrid API。
详情请看:http://www.huosen.net/archives/142.html
0 0
- JqGrid的介绍和使用
- jqGrid的简单介绍
- jqGrid简单使用、json格式和jsonReader介绍
- 关于JQGrid使用参数介绍
- jqGrid的使用
- jqGrid的使用
- Jqgrid的使用
- jQGrid的使用记录.
- Jqgrid 的简单使用
- jqgrid的使用
- jqgrid 的使用
- jqGrid及普通表格的生成和使用
- jqgrid介绍
- jqGrid中事件的使用
- 最近使用jqGrid的场景
- 项目中使用的jqGrid
- 一个介绍 JQgrid 插件的好网站
- JQGRID格式化/合并单元格/滚动条问题和多重子表介绍及datepicker参数使用详解(jqgrid表格中应用)
- docker学习10--理解docker容器进程
- Watch Connectivity Framework Reference
- [Widget]SelectionView-快速跳选View
- NOIP2000(4)单词接龙
- Thymeleaf教程 (二) 虚拟购物商店
- JqGrid的介绍和使用
- 链表
- ASP.NET SQL SERVER 三层架构 Ajax 分页
- Sphinx 在 Linux 下的安装与基本配置
- eclipse有时候不能离线或者在线安装SVN
- 从gff3文件获取fasta序列(2)
- Linux 库函数文件操作
- Failed to load the JNI shared
- 判断两个IP是否属于同一子网