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的主要的知识点,在后续课程中会逐个知识点进行深入讲解 以“图书-英雄”管理为示例 主要知识点介 ...
随机推荐
- 多线程入门-第五章-线程的调度与控制之yield
yield与sleep类似,只是不能指定暂停多长时间,并且只能让同优先级的线程有执行的机会,让位时间不固定. /* yield使用 */ public class ThreadTest04 { pub ...
- python [:-1] 与 [::-1]
line = "abcde"line[:-1]结果为:'abcd' line = "abcde"line[::-1]结果为:'edcba' [:-1] b = ...
- 【我的Android进阶之旅】Android 如何防止 so库文件被未知应用盗用？
首先,关于Android 如何防止 so库文件被未知应用盗用这个话题并不是我擅长的,只是在开发中遇到了这个问题,因此在这里总结一下. 故事回到几个月之前,当时公司和第三方音乐平台合作了一款内置于手表系 ...
- MySQL 一些让人容易忽视的知识点
一下都是MySQL在实际开发中,经常容易让人忽视的点,希望对您有帮助,帮您越过这些坑. 一:MySQL AND优先级大于OR 今天上班时在写一个业务的时候又发现了一个MySQL的问题: 我们的业务是这 ...
- 如何制作一款HTML5 RPG游戏引擎——第三篇，利用幕布切换场景
开言: 在RPG游戏中,如果有地图切换的地方,通常就会使用幕布效果.所谓的幕布其实就是将两个矩形合拢,直到把屏幕遮住,然后再展开直到两个矩形全部移出屏幕. 为了大家做游戏方便,于是我给这个引擎加了这么 ...
- wordpress 主题开发
https://yusi123.com/3205.html https://themeshaper.com/2012/10/22/the-themeshaper-wordpress-theme-tut ...
- 修改SQL Service数据库排序规则
修改数据库 alter database KidsPang COLLATE Chinese_PRC_CI_AS 修改表中字段ALTER TABLE [Member] ALTER COL ...
- NAND flash阵营ToggleDDR和ONFI
NAND 闪存:目前闪存制造厂主要分为三星与东芝.海力士联合的ToggleDDR阵营和英特尔与美光为首的ONFI阵营 IM Flash Technologies(IMFT):由Intel和Micron ...
- 子集和问题（应用--换零钱）POJ2229：Sumsets
我一直在纠结换零钱这一类型的题目,今天好好絮叨一下,可以说他是背包的应用,也可以说他是单纯的dp.暂且称他为dp吧. 先上一道模板题目. sdut2777: 小P的故事——神奇的换零钱 题目描述 已知 ...
- Linux下多个.c文件的编译和Makefile文件
在编程的时候,我们可以把一个完整程序的每个函数分离出来,写成.c文件,最后再一起编译和链接.这样有利于程序功能模块化,也方便检查代码错误. .h文件:里面编辑该程序需要引用的头文件. #ifndef ...