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的主要的知识点,在后续课程中会逐个知识点进行深入讲解 以“图书-英雄”管理为示例 主要知识点介 ...
随机推荐
- Windows系统优化
1.关闭家庭组,因为这功能会导致硬盘和CPU处于高负荷状态: 关闭方法:windows + R 打开运行,输入services.msc回车,右侧窗格找到“HomeGroup Listener”和“Ho ...
- python学习笔记（二）— 列表（list）
列表也叫数组,列表定义,使用[]即可:列表里面可以再套列表,一个里面套一个列表,叫二维数组:一个里面套一个列表,里面的列表再套一个列表,这个叫三维数组,套几层就是几维,定义格式如下: list1 = ...
- JS获取浏览器信息及屏幕分辨率
因为vue有自己的生命周期,初始化数据的时候,可以在钩子函数created()函数里初始化数据,也可以在mounted()函数里获取,但是两者是不同的,获取浏览器和屏幕分辨率的时候,不能在create ...
- embedded-redis在单元测试中的使用
1 背景 参考链接:https://github.com/kstyrc/embedded-redis 2 使用 2.1 引入依赖 <dependency> <groupId>c ...
- Intellij IDEA如何使用Maven Tomcat Plugin运行web项目
首先,Run ——> Edit Configurations,这时候如下图: 然后点击左上角的加号,可以添加一个新的配置,如下图: 选择Maven,如下图: 下面填上自己的配置信息,点击appl ...
- 在MFC中使用一个单独的类实现数据在各个类之间的传递
第一步:使用VS2010创建一个基于MFC的单文档程序,然后 编译 运行 确定没有问题. 第二步:添加一个名叫CGszCommonData 类. 第三步:在应用程序类的头文件里 添加#includ ...
- css选择器中间的空格
div p div标签下 的p标签 (后代) div .a div 的后代类属性有a的 div.a 类属性有a的div标签 div.a1.a2 多类选择器 类包含a1,a2的div标签 div.a1 ...
- Mac OS X 10.10 Yosemite下配置 apache＋php
自从系统从OS X Mavericks 10.9升级到OS X Yosemite 10.10 后之前配置apache和php均不能正常使用了, 重新设置配置如下: 首先,查看当前系统的apache版本 ...
- 金融 贷款类 App 审核被拒 4.3 1.2 2.1 4.2.2 问题总结
辛辛苦苦搞了一两个月,开发测试修bug,一路艰辛,到了审核这最后一关,各位同仁,咬紧牙关!接下来是鄙人遇到过的被拒问题,望能帮到诸君! ******************************** ...
- SparkStreaming程序设计
一个简单的 Streamin wordCount object StreamingWordCount { def main(args: Array[String]): Unit = { val spa ...