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 学习的更多相关文章

  1. Jqgrid学习API

    JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做什么事情. 下面是转自其他人b ...

  2. Jqgrid学习(转载)

    jqGrid API 全   JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做 ...

  3. jQgrid学习笔记

    jQgrid学习笔记

  4. JQGrid 学习1

    这几天一直在学习基于MVC的JQGrid. 记得刚毕业时候做web最头疼的就是GridView,各种分页查询删除,后来学习了Ajax,使用的jqury UI框架ligerui给公司做ERP系统,再后来 ...

  5. jqgrid学习笔记(转载)

    jqgrid中文帮助文档网址:http://blog.mn886.net/jqGrid/ jqgrid:用来做什么? jqgrid是web端前台表格控件,用它可以轻松将数据格式化显示,前后台用过aja ...

  6. jqGrid 学习笔记--数据异步加载方法（转）

    var commonQuery = '../importantInfoReport/pageQueryImportantInfoReport.action?type=0'; jQuery(" ...

  7. jqGrid学习笔记（二）

    本节介绍jqGrid其他的使用方法,主要是一些基本操作,特殊的数据显示等. 1 刷新jqGrid数据. 常用到刷新jqGrid数据的情况是,在用到查询的时候,根据查询条件,请求数据,并刷新jqGrid ...

  8. jqGrid学习笔记（一）

    3.2.body中的代码 <!-- jqGrid table list4 --> <table id="list4"></table> < ...

  9. ASP.NET MVC and jqGrid 学习笔记 6-增删改操作

    程序结构: Member.cs CRUD.cshtml CRUD.js HomeController 一.Model public class Member { [Key] public int No ...

随机推荐

  1. hdu 4604 Deque（最长不下降子序列）

    从后向前对已搜点做两遍LIS(最长不下降子序列),分别求出已搜点的最长递增.递减子序列长度.这样一直搜到第一个点,就得到了整个序列的最长递增.递减子序列的长度,即最长递减子序列在前,最长递增子序列在后 ...

  2. LeetCode Find Minimum in Rotated Sorted Array 旋转序列找最小值（二分查找）

    题意:有一个有序序列A,其内部可能有部分被旋转了,比如A[1...n]被转成A[mid...n]+A[1...mid-1],如果被旋转,只有这种形式.问最小元素是?(假设没有重复元素) 思路:如果是序 ...

  3. linux 定时任务调度Cron的用法详解

    在linux中,推荐使用crontab -e命令添加自定义的任务,退出后重启crond进程. 重新启动cron服务或重新加载cron配置,命令: 复制代码代码示例: /etc/rc.d/init.d/ ...

  4. poj 3469 Dual Core CPU

    题目描述:由于越来越多的计算机配置了双核CPU,TinySoft公司的首席技术官员,SetagLilb,决定升级他们的产品-SWODNIW.SWODNIW包含了N个模块,每个模块必须运行在某个CPU中 ...

  5. VS2010开发2dx无法解析的外部符号解决记录

    首先新建HelloWorld项目... 想使用Cocos2d扩展包需要引入相关头文件,如:#include “cocos-ext.h”...接下来我们右键工程属性->配置属性->c/c++ ...

  6. 【CSS】css各种居中方法

    水平居中的text-align:center 和 margin:0 auto   这两种方法都是用来水平居中的,前者是针对父元素进行设置而后者则是对子元素.他们起作用的首要条件是子元素必须没有被flo ...

  7. 【DFS】NYOJ-325-zb的生日

    [题目链接:NYOJ-325] 一道以我名字命名的题目,难道要我生日的时候再A? 思路:依旧深搜,但这个问题应该有一个专有名词吧,看别的博客说是 “容量为 sum/2 的背包问题”,不懂... // ...

  8. Android启动activity的4种模式(standard、singleTop、singleTask、singleINstance)

    在AndroidManifest.xml中配置activity时,android:launchMode属性会指定启动activity的模式,有四种: standard singleTop single ...

  9. MySQL基础之第13章 MySQL函数

    13.1.数学函数 随机数可能会用到,其他基本无视. 13.2.字符串函数 重点CONCAT(S1,S2….) 13.3.日期和时间函数 一.MySQL 获得当前日期时间 函数 1.1 获得当前日期+ ...

  10. webpack入门级教程

    Webpack是什么 首先可以看下官方文档,文档是最好的老师. 这里也有国外的一个朋友写的入门介绍. Webpack是由Tobias Koppers开发的一个开源前端模块构建工具.它的基本功能是将以模 ...