一、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。
相关推荐
jquery-grid是一个非常好用的一个表格框架。可以在前台生成一个表格。并提供分页,排序功能
asp.net JqueryGrid 无刷新分页
1.添加了表格树的后台分页代码 2.提供了两种表格树的样式选择 3.添加了全选按钮
这个是在网上收集的一些jquery flexigrid and datepicker 方面的一个整合。
1.完善了样式 2.添加了属性 3.修改了bug 最新版本http://download.csdn.net/source/1757010 提供了后台分页模式,以及提供了两种样式选择,提供全选按钮。
自己写的一个基于jquery的小插件,实现了表格树的基本功能,尽量实现了JQTreeTable的基本功能并实现了前台分页,以及可以添加自定义列。支持json数据格式。 最新版本http://download.csdn.net/source/1757010 ...
propertygrid:修复在仅编辑了一行数据的时候调用'getChanges'方法无法获取正确结果的问题。 Improvement(改进) combo:添加'panelEvents'属性; combo:为组件增加默认的'mousedown'事件处理程序; combobox:可...
grid控件列表!这是jquery的一个grid插件GT-GRID,支持分页、排序等功能
强大的Gridview 分页JqueryGrid
GridView显示数据,无刷新分页,无刷新排序,无刷新过滤(搜索数据),基于ASP.NET(我们这里有ashx一般处理文件来实现)。 $.ajax({ type: p.method, url: p.url, data:param, success: function(msg){ $.Add...
在公司实习看到公司框架里使用了ligerUI的grid进行分页,个人感觉挺好用的,自己摸索着实现了一遍记录下来 简单来说,liger grid 就是提交准备好的数据到指定的目标请求数据,拿到数据以后,显示出来(通过ajax...
jquery.jqGrid-4.4.3,用于web页面的列表分页显示
Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
支持分页、排序、列模型渲染等基本功能,数据模型等。支持行的双击事件。
extgrid 是一款jquery上的gird插件 界面风格采用了类似easyui extjs 界面风格样式 可通过css修改自己想要的样式 extgrid具有列大小 位置改变 排序 分组 分页 工具栏 扩展行 rowNumber 多选列 编辑列 行列锁 ajax...
网格的 API 类似于 ng-grid 的 API,表格架构(每个网格 3 个表)类似于 jQuery DataTables 的架构。 有关文档,请参阅: : 。 鲍尔 bower install ngReactGrid 特征 快速,出色的性能 固定标题 服务器端钩子 ...
自己写的grid插件,希望大家多多指点。支持分页,排序,json传输,记录渲染。具体使用请看页面DEMO,如有交流问题fakename@163.com
bs_grid是一个jQuery DataGrid插件,基于Bootstrap。先进行选择,排序和过滤,分页。完全可定制的,灵活的网络设计,定位。使用方法请查看DEMO 演示地址:http://www.jq22.com/jquery-info427
<script type="text/javascript" src="js/i18n/grid.locale-cn.js"></script> <script type="text/javascript" src="js/jquery.jqGrid.min.js"> <script type="text/javascript" src="js/jquery.tablednd.js"> ...