jqGrid 学习
jqGrid 学习:
一、下载需要的jqGrid包:http://www.trirand.com/blog/?page_id=6
二、下载JQuery UI:http://jqueryui.com/download 选择对应风格的UI下载
三、在步骤一、二中下载的压缩包中挑选出需要用到的文件:
注意:grid.locale-cn.js一定要在jquery.jqGrid.js的前面引入。否则会出错(都这么说:但是我试了一下似乎没问题,不过还是按这种写法写吧)。
四、写demo
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="../../css/jqGrid/ui.jqgrid.css" />
<link type="text/css" rel="stylesheet" href="../../css/jqGrid/jquery-ui-1.11.4.css" />
<script type="text/javascript" src="../../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../../js/jqGrid/jquery-ui-1.11.4.js"></script>
<script type="text/javascript" src="../../js/jqGrid/grid.locale-cn.js"></script>
<script type="text/javascript" src="../../js/jqGrid/jquery.jqGrid.js"></script>
<script type="text/javascript" src="../../js/Tool.js"></script>
<title>平台</title>
<style> </style>
</head>
<body style="position:fixed;left:10%;"> <table id="list"></table>
<div id="pager"></div>
</body>
</html> <script type="text/javascript">
$(document).ready(function () {
jQuery("#list").jqGrid({
url: 'http://localhost:8080/newBeginning/employeeAction/employeeList.do',
datatype: "json",
mtype: 'POST',
colNames: ['编号', '用户名', '性别', '年龄'],
colModel: [
{ name: 'eid', index: 'eid', width: , height:, align: "left", editable: true },
{ name: 'ename', index: 'ename', width: , align: "center" },
{ name: 'esex', index: 'esex', width: , align: "center" },
{ name: 'eage', index: 'eage', width: , align: "center", search: false }
],
rowList: [, , ],
jsonReader:{repeatitems : false},
sortname: 'eid',
viewrecords: true,
sortorder: "desc",
pager: "#pager",
rowNum: ,
//width: 'auto',
width: '',
height: 'auto',
caption: "DemoGrid"
}).navGrid('#pager', { add: false, edit: true, del: true,search:false,refresh:false }); })</script>
效果图:
注意:接口返回的数据格式有要求:
{"page":1,"total":1,"records":345,"rows":[{"eid":"1","ename":"gaoyp","esex":"男","eage":"24"},{"eid":"2","ename":"张三","esex":"男","eage":"55"}]}
jqGrid 学习的更多相关文章
- Jqgrid学习API
JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做什么事情. 下面是转自其他人b ...
- Jqgrid学习(转载)
jqGrid API 全 JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做 ...
- jQgrid学习笔记
jQgrid学习笔记
- JQGrid 学习1
这几天一直在学习基于MVC的JQGrid. 记得刚毕业时候做web最头疼的就是GridView,各种分页查询删除,后来学习了Ajax,使用的jqury UI框架ligerui给公司做ERP系统,再后来 ...
- jqgrid学习笔记(转载)
jqgrid中文帮助文档网址:http://blog.mn886.net/jqGrid/ jqgrid:用来做什么? jqgrid是web端前台表格控件,用它可以轻松将数据格式化显示,前后台用过aja ...
- jqGrid 学习笔记--数据异步加载方法(转)
var commonQuery = '../importantInfoReport/pageQueryImportantInfoReport.action?type=0'; jQuery(" ...
- jqGrid学习笔记(二)
本节介绍jqGrid其他的使用方法,主要是一些基本操作,特殊的数据显示等. 1 刷新jqGrid数据. 常用到刷新jqGrid数据的情况是,在用到查询的时候,根据查询条件,请求数据,并刷新jqGrid ...
- jqGrid学习笔记(一)
3.2.body中的代码 <!-- jqGrid table list4 --> <table id="list4"></table> < ...
- ASP.NET MVC and jqGrid 学习笔记 6-增删改操作
程序结构: Member.cs CRUD.cshtml CRUD.js HomeController 一.Model public class Member { [Key] public int No ...
随机推荐
- 面向函数范式编程(Functional programming)
函数编程(简称FP)不只代指Haskell Scala等之类的语言,还表示一种编程思维,软件思考方式,也称面向函数编程. 编程的本质是组合,组合的本质是范畴Category,而范畴是函数的组合. 首先 ...
- java中的final、finally和finalize
最近在读Thinking In Java,秉着有些地方还能知道自己不会的精神,都去好好查阅了一些资料,在内存分配这一章,看到finalize()这个方法,刚开始很不理解,查阅了一些资料,顺带看了一下f ...
- RTP协议学习大总结从原理到代码
from:http://wenku.baidu.com/view/aaad3d136edb6f1aff001fa5.html 一.流媒体概念 流媒体包含广义和狭义两种内涵:广义上的流媒体指的是使音频和 ...
- zoj 2770 Burn the Linked Camp (差分约束系统)
// 差分约束系统// 火烧连营 // n个点 m条边 每天边约束i到j这些军营的人数 n个兵营都有容量// Si表示前i个军营的总数 那么 1.Si-S(i-1)<=C[i] 这里 建边(i- ...
- liunx下mysql数据库使用之三范式,关系模型设计注意项,安装目录结构
数据库的三范式第一范式===>每行记录的属性,是原子的,拆到不可拆为止.===>例如:一个人的籍贯,可以拆分为,省,市,县,乡,村 第二范式===>每行记录的非主属性(非主键属性), ...
- TCP/IP详解学习笔记(5)-IP选路,动态选路,和一些细节
1.静态IP选路 1.1.一个简单的路由表 选路是IP层最重要的一个功能之一.前面的部分已经简单的讲过路由器是通过何种规则来根据IP数据包的IP地址来选择路由.这里就不重复了.首先来看看一个简单的系统 ...
- <转>数据库设计的三大范式
为了建立冗余较小.结构合理的数据库,设计数据库时必须遵循一定的规则.在关系型数据库中这种规则就称为范式.范式是符合某一种设计要求的总结.要想设计一个结构合理的关系型数据库,必须满足一定的范式. 在实际 ...
- 完全参照系统自带的DatePickerDialog、TimePickerDialog的源代码仿写的DateTimePickerDialog
完全参照系统自带的DatePickerDialog.TimePickerDialog的源代码仿写的DateTimePickerDialog.具有同时选择日期.时间的功能.在2.2.2.3平台,显示的效 ...
- 【九度OJ】题目1009-二叉搜索树
题目 思路 构建二叉搜索树,并保存先序遍历和中序遍历的序列在samplePreOrder,sampleInOrder 每遇到一个新的序列,构建一棵二叉搜索树,保存先序遍历和中序遍历的序列testPre ...
- kobo boot scripts
#!/bin/sh pkill nickel eink_enable_autoupdate rm -rf /debian/tmp/* /debian/tmp/.* 2>/dev/null mou ...