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中的代码  <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 ...

随机推荐

浏览器HTML5支持程度测试
/********************************************************************* * 浏览器HTML5支持程度测试 * 说明: * 想知道对 ...
OK335xS dhcpcd porting
/********************************************************************** * OK335xS dhcpcd porting * 说 ...
(转)Linux: su sudo sudoer
http://zebralinux.blog.51cto.com/8627088/1369301 日常操作中为了避免一些误操作,更加安全的管理系统,通常使用的用户身份都为普通用户,而非root.当需要 ...
30种oracle常见的等待事件说明
1Buffer busy waits从本质上讲,这个等待事件的产生仅说明了一个会话在等待一个Buffer(数据块),但是导致这个现象的原因却有很多种.常见的两种是: 当一个会话视图修改一个数据块,但这 ...
JS实现连接方式的菜单
<html> <head><meta http-equiv="Content-Language" content="zh-cn"& ...
git pull冲突解决
场景:用户UserA修改了文件File1,用户UserB也修改了文件File1并成功merge到了服务器上,而UserA和UserB改动了同一个代码块,当UserA拉取代码时git无法merge此改动 ...
[Everyday Mathematics]20150109
设 $A$ 是 $n$ 阶复方阵, 其特征多项式为 $$\bex f(\lm)=(\lm-\lm_1)^{n_1}\cdots(x-\lm_s)^{n_s}, \eex$$ 其中 $\lm_i$ 互不 ...
IOS GCD
UIButton * btn = [[UIButton alloc]initWithFrame:CGRectMake(100, 100, 100, 100)]; [btn setTitle:@&quo ...
ARM指令协处理器处理指令
ARM支持16个协处理器,在程序执行过程中,每个协处理器忽略属于ARM处理器和其他协处理器指令,当一个协处理器硬件不能执行属于她的协处理器指令时,就会产生一个未定义的异常中断,在异常中断处理程序中,可 ...
ORA-15041: diskgroup space exhausted
今天在做一个备份的时候,出现磁盘耗尽的错误,具体如下: RMAN-00571: =========================================================== ...

jqGrid 学习

jqGrid 学习的更多相关文章

随机推荐

热门专题