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. php yii .htaccess

    RewriteEngine on # if a directory or a file exists, use it directlyRewriteCond %{REQUEST_FILENAME} ! ...

  2. UVA 408 Uniform Generator 伪随机数（水）

    题意:根据这个式子来递推求得每个随机数x,step和mod给定,seed(0)=0.如果推出来的序列是mod个不重复的数字(0~mod-1)则打印good,否则bad(因为不能产生所有的数). 思路: ...

  3. POJ 3177 Redundant Paths (桥，边双连通分量，有重边)

    题意:给一个无向图,问需要补多少条边才可以让整个图变成[边双连通图],即任意两个点对之间的一条路径全垮掉,这两个点对仍可以通过其他路径而互通. 思路:POJ 3352的升级版,听说这个图会给重边.先看 ...

  4. POJ2402 Palindrome Numbers 回文数

    题目链接: http://poj.org/problem?id=2402 题目大意就是让你找到第n个回文数是什么. 第一个思路当然是一个一个地构造回文数直到找到第n个回文数为止(也许大部分人一开始都是 ...

  5. Linux Shell编程(1): 条件语句

    1.if—then#!/bin/bashif date              如果命令运行成功(退出码为0),则then部分的命令被执行then   echo "good"fi ...

  6. 流媒体相关知识介绍 及其 RTP 应用

    一.流媒体简介 随着Internet的日益普及,在网络上传输的数据已经不再局限于文字和图形,而是逐渐向声音和视频等多媒体格式过渡.目前在网络上传输音频/视频(Audio/Video,简称A/V)等多媒 ...

  7. SVN版本管理提示信息

    1. FAQ 1.路径或权限不足时将出现错误信息提示: http://192.134.4.251/svn/svnproject(路径不对)Error * PROPFIND request failed ...

  8. Hibernate向MySQL插入中文数据--乱码解决

    <property name="hibernate.connection.url">jdbc:mysql://127.0.0.1:3306/exam?useUnicod ...

  9. 链表的倒数第K个节点

    题目:输入一个链表,输出该链表中倒数第K个节点.为了符合大多数人的习惯,本题从1开始计数,即链表的尾节点是倒数第1个结点. package com.edu; class LinkNode{ //定义一 ...

  10. Strom-7 Storm Trident 详细介绍

    一.概要 1.1 Storm(简介)      Storm是一个实时的可靠地分布式流计算框架.      具体就不多说了,举个例子,它的一个典型的大数据实时计算应用场景:从Kafka消息队列读取消息( ...