jqGrid入门简单使用
jqGrid中文API：https://blog.mn886.net/jqGrid/
源码：https://github.com/xiaostudy/web_sample
这里没有请求后台，是直接读取本地.json文件
就两个文件，一个html、一个json文件，jquery是jqgrid在线引用的
目录结构
效果
代码
test2.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<!--jqueryui-->
<link href="//cdn.bootcss.com/jqueryui/1.12.0-rc.2/jquery-ui.min.css" rel="stylesheet">
<!--jqgrid的css-->
<link href="//cdn.bootcss.com/jqgrid/4.6.0/css/ui.jqgrid.css" rel="stylesheet"> <!--jquery-->
<script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"></script>
<!--locale-->
<script src="//cdn.bootcss.com/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<!--jqgrid的js-->
<script src="//cdn.bootcss.com/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<!--<script src="../js/layer/layer.js"></script>--> <meta charset="utf-8" />
<title>jqGrid Loading Data</title> </head>
<body>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
<script language="JavaScript">
$(function(){
$("#jqGrid").jqGrid({
url: "../json/test2.json",
datatype:'json',
colModel:[
{label: "ID", name:"id",index:"id", width: 20},
{label: "名称", name:"name",index:"name", width: 40},
{label: "年龄", name:"age",index:"age", width: 40}
],
viewrecords:true,//是否显示所有记录的总数
height: $(window).height() - 240,//定高度
// height: "auto",//自动高度，随行数变
rowNum:50,//当前显示行数
rowList:[2,4,5,6,8,10,12,15,25,30],//可选的行数
rownumbers: true,//显示行序列
rownumWidth: 25,//如果rownumbers为true，则可以设置column的宽度
// width: 500,//定宽度
autowidth: true,//自动宽度
pager:"#jqGridPager",//定义翻页用的导航栏，必须是有效的html元素，例如id为jqGridPager
jsonReader: {//来跟服务器端返回的数据做对应
root: "records",//包含实际数据的数组
page: "current",//当前页
total: "pages",//总页数
records: "total"//查询出的记录数
},
prmNames: {//发送数据到服务器，当参数为null时不会被发到服务器端
page: "page",
rows: "rows",
order: "order"
},
beforeRequest: function() {//请求前触发的事件
// layer.msg("beforeRequest");
console.log("1——beforeRequest");
},
onPaging: function(pgButton) {//点击翻页按钮或点击换行数时触发此事件，也就是重新请求，参数pgButton为翻页，长度为总页数。初次加载时不执行，事件最后执行
console.log("onPaging");
},
gridComplete: function () {//跟onPaging的事件一样，只是这个触发时最后执行。初次加载时也执行，两者事件不冲突
console.log("2——gridComplete");
},
loadComplete: function (xhr) {//当从服务器返回响应时执行，xhr：XMLHttpRequest 对象
console.log("3——loadComplete");
},
onCellSelect: function (rowid,iCol,cellcontent,e) {//当点击单元格时触发。rowid：当前行id；iCol：当前单元格索引；cellContent：当前单元格内容；e：event对象
console.log("onCellSelect——rowid:" + rowid);
console.log("onCellSelect——iCol:" + iCol);
console.log("onCellSelect——cellcontent:" + cellcontent);
console.log("onCellSelect——e:" + e);
},
ondblClickRow: function (rowid,iRow,iCol,e) {//双击行时触发。rowid：当前行id；iRow：当前行索引位置；iCol：当前单元格位置索引；e:event对象
console.log("ondblClickRow——rowid:" + rowid);
console.log("ondblClickRow——iRow:" + iRow);
console.log("ondblClickRow——iCol:" + iCol);
console.log("ondblClickRow——e:" + e);
}//和鼠标右键事件onRightClickRow一样参数
});
});
</script> </body>
</html>
json文件test2.json
{
"current": 1,
"total": 31,
"pages": 4,
"records": [
{
"id": 1,
"name": "test1",
"age": 21
},
{
"id": 2,
"name": "test2",
"age": 22
},
{
"id": 3,
"name": "test3",
"age": 23
},
{
"id": 4,
"name": "test4",
"age": 24
},
{
"id": 5,
"name": "test5",
"age": 25
},
{
"id": 6,
"name": "test6",
"age": 26
},
{
"id": 7,
"name": "test7",
"age": 27
},
{
"id": 8,
"name": "test8",
"age": 28
},
{
"id": 9,
"name": "test9",
"age": 29
},
{
"id": 10,
"name": "test10",
"age": 30
},
{
"id": 11,
"name": "test11",
"age": 31
},
{
"id": 12,
"name": "test12",
"age": 32
},
{
"id": 13,
"name": "test13",
"age": 33
},
{
"id": 14,
"name": "test14",
"age": 34
},
{
"id": 15,
"name": "test15",
"age": 35
},
{
"id": 16,
"name": "test16",
"age": 36
},
{
"id": 17,
"name": "test17",
"age": 37
},
{
"id": 18,
"name": "test18",
"age": 38
},
{
"id": 19,
"name": "test19",
"age": 39
},
{
"id": 20,
"name": "test20",
"age": 40
},
{
"id": 21,
"name": "test21",
"age": 41
},
{
"id": 22,
"name": "test22",
"age": 42
},
{
"id": 23,
"name": "test23",
"age": 43
},
{
"id": 24,
"name": "test24",
"age": 44
},
{
"id": 25,
"name": "test25",
"age": 45
},
{
"id": 26,
"name": "test26",
"age": 46
},
{
"id": 27,
"name": "test27",
"age": 47
},
{
"id": 28,
"name": "test28",
"age": 48
},
{
"id": 29,
"name": "test29",
"age": 49
},
{
"id": 30,
"name": "test30",
"age": 50
},
{
"id": 31,
"name": "test31",
"age": 51
}
]
}
jqGrid入门简单使用的更多相关文章
- Jqgrid入门-Jqgrid格式化数据(九)
上一章已经说明了在Jqgrid中如何对数据分组,这一章主要探讨如何格式化Jqgrid中的数据.何谓格式化呢?举个例子,比如对时间格式化处理,去掉后面的时分秒:对数字进行处理,加上千分位分隔符,小数的保 ...
- Jqgrid入门-显示基本的表格(一)
首先对Jqgrid网格插件做个简要的说明.在众多的表格插件中,Jqgrid的特点是非常鲜明的. 特点如下: 完整的表格呈现与运算功能,包含换页.栏位排序.grouping.新增.修改及 ...
- Jqgrid入门-Jqgrid分组的实现(八)
上一章主要说明了如果实现Jqgrid列数据拖动,这一章主要讨论在Jqgrid中如何实现分组功能. 类似于Sql语句的Group By,Jqgrid提供了属性实现数据分组,这样表现数据会 ...
- Jqgrid入门-Jqgrid列数据拖动(七)
上一章提到在Jqgrid中如何设置二级表头,这一章节主要探讨Jqgrid表格里面的数据如果实现拖动功能,比如你想把第一行的数据拖到当前页的最后一行,或者其他位置. Jqgrid表格插件自己没有 ...
- Jqgrid入门-Jqgrid设置二级表头(六)
上一章已经说明了Jqgrid结合Struts2+json展示数据,这一章主要探讨Jqgrid如何设置二级表头,类似这样的效果.如: 要实现这个功能,其实也不难.通过Jqgrid的s ...
- Jqgrid入门-结合Struts2+json实现数据展示(五)
DEMO用的是ssh框架实现的,具体怎么搭建的就不多做说明了.分页表格的数据操作难点就是数据展现.至于增删改直接用hibernate原生的方法实现即可. 初步分析:表格要实现分页,那么 ...
- Jqgrid入门-别具特色的Pager Bar (四)
Pager Bar位于表格最下边.默认情况下,分为三部分.如图: 第一部分:导航按钮栏(Navigator) 第二部分:页码栏(Pager) 第三部分:记录信息栏(Record) 要实 ...
- Jqgrid入门-使用模态对话框编辑表格数据(三)
Jqgrid是一个强大的表格插件,它提供了多种方式来编辑数据.这三种方式分别是: Cell Editing——只允许修改某一个单元格内容 Inline Editing——允许在jqGr ...
- django入门 -- 简单流程
django入门 -- 简单流程 简介 通过简单示例,使用django完成基本流程的开发,学习django的主要的知识点,在后续课程中会逐个知识点进行深入讲解 以“图书-英雄”管理为示例 主要知识点介 ...
随机推荐
- readAsDataURL
w http://stackoverflow.com/questions/14069421/show-an-image-preview-before-upload <input type=&qu ...
- Yii框架2.0的安装过程
Yii框架是个不错的php开发框架,大型项目上都可以使用.和大多框架一样他也是开源,而且采用了mvc结构的. Yii1.*,直接下载然后用脚步可以创建自己的项目了,最近看了下Yii2.0版本的,他推荐 ...
- rabbitMQ 安装，集群搭建, 编码
RabbitMQ 一.背景 命令行工具: http://www.rabbitmq.com/man/rabbitmqctl.1.man.html 介绍入门文章: http://blog.csdn.net ...
- Flask使用mysql数据池
helper.py import pymysql from settings import Config def connect(): conn = Config.POOL.connection() ...
- 【我的Android进阶之旅】Android 混淆文件资源分类整理
之前将所有的混淆都配置在一个 proguard-rules.pro 这个Android Studio新建项目时自动生成的文件里面,而随着项目功能迭代越来越多,代码量越来越多,引用的第二方库.第三方库都 ...
- centos7配置IP地址
有关于centos7获取IP地址的方法主要有两种,1:动态获取ip:2:设置静态IP地址 在配置网络之前我们先要知道centos的网卡名称是什么,centos7不再使用ifconfig命令,可通过命令 ...
- vultr服务器上搭建PHP运行环境-centos7
安装nginx: yum install nginx 开启Nginx systemctl start nginx 访问你的域名或者ip 例如:quantaedu.com 安装PHP 查看系统版本lsb ...
- mysql 提示符显示用户，数据库等信息
命令: mysql -uroot -p --prompt="\\u@\\h:\\d \\r:\\m:\\s>" 效果: root@localhost:(mysql) 02:2 ...
- win7 64bits下编译libjpeg库
一.下载源代码.下载地址:http://www.ijg.org/.注意:一定要下载win32 版本二.编译源代码. 1.解压源代码,(不需要修改,修改报错)修改源代码中jconfig.vc ...
- Bootstrap 中的插件的学习
一个静态的模态窗口实例,如下面的实例所示: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 模态 ...