博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jqGrid 是一个用来显示网格数据的jQuery插件
阅读量:5845 次
发布时间:2019-06-18

本文共 2004 字,大约阅读时间需要 6 分钟。

jqGrid 是一个用来显示网格数据的jQuery插件,通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。文档比较全面,其官方网址为: 。
 

一、jqGrid特性:

  • 基于jquery UI主题,开发者可以根据客户要求更换不同的主题。
  • 兼容目前所有流行的web浏览器。
  • Ajax分页,可以控制每页显示的记录数。
  • 支持XML,JSON,数组形式的数据源。
  • 提供丰富的选项配置及方法事件接口。
  • 支持表格排序,支持拖动列、隐藏列。
  • 支持滚动加载数据。
  • 支持实时编辑保存数据内容。
  • 支持子表格及树形表格。
  • 支持多语言。
  • 最关键目前是免费的。

二、jqGrid使用方式:

1.下载文件
  1. 下载jqGrid的软件包,目前最新版本为4.4.1 下载地址为:
  2. 下载jQuery文件,目前最新版本为1.8.2 下载地址为:
  3. 下载jqGrid皮肤,下载地址为: 我使用的是:ThemeRoller->gallery->cupertino样式
2.准备文件
在项目的根目录下,建立相应的文件夹,放入下载的文件,目录结构如下图:
3.页面中得代码
3.1、head中加入引用
  • css文件引入:

 

  • js文件引入:

 

3.2、body中的代码

 

其中,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。
详情请看:
 
分类:  ,  , 

转载于:https://www.cnblogs.com/guohaijun/p/4816270.html

你可能感兴趣的文章
oracle用户表视图初探
查看>>
每天一个linux命令(3):pwd命令
查看>>
google重定向错误问题
查看>>
Sublime3 快捷键
查看>>
apache压力测试(性能及监控)
查看>>
列出所有子集-----字典顺序 2013年1月14日
查看>>
定制个人的todo list
查看>>
Python+sklearn使用线性回归算法预测儿童身高
查看>>
记一次与自动论坛发帖机的斗争
查看>>
恢复Reflector反编译后资源文件的办法
查看>>
HandlerExceptionResolver异常解析器家族揭秘
查看>>
Red Hat Linux4.0下主DNS服务器的搭建
查看>>
https/443安装
查看>>
Web服务器压力测试工具http_load、webbench、ab、Siege使用教程
查看>>
我的友情链接
查看>>
RHEL6.3 源码安装Puppet
查看>>
RSAT for Windows10
查看>>
我的友情链接
查看>>
mybatis 和 hibernate 区别?
查看>>
关于线程耗尽导致请求超时系统假死的思考
查看>>