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. 【策略】HDOJ-1205-吃糖果

    [题目链接:HDOJ-1205] 思路:直接看题毫无思路... 看了别人的思路,到现在还懵懵懂懂.   只要除了数目最多的糖果以外的其他所有糖果的数目之和加1(小心这里要用int64),大于等于数目最 ...

  2. 【转】declare-styleable的使用(自定义控件) 以及declare-styleable中format详解

    原文网址:http://www.cnblogs.com/622698abc/p/3348692.html declare-styleable是给自定义控件添加自定义属性用的 1.首先,先写attrs. ...

  3. HTTP请求中浏览器的缓存机制

    摘要:在Web开发过程中,我们可能会经常遇到浏览器缓存的问题.本文作者详细解释了浏览器缓存的机制,帮助读者更深层次的认识浏览器的缓存. 流程 当资源第一次被访问的时候,HTTP头部如下 (Reques ...

  4. MySQL 5.6 复制：GTID 的优点和限制（第一部分）

    全局事务标示符(Global Transactions Identifier)是MySQL 5.6复制的一个新特性.它为维护特定的复制拓扑结构下服务器的DBA们大幅度改善他们的工作状况提供了多种可能性 ...

  5. tcprstat的使用方式

    两种使用方式:1)本机直接在线采集:2)分析tcpdump采集到的离线pcap文件   1. 本机直接在线采集 参数:   -p :指定只采集此TCP port的请求   -t  : 采集输出的时间间 ...

  6. Linux--使用expect进行自动交互

    在linux下进行一些操作时,有时需要与机器进行一些交互操作,比如切换账号时输入账号密码,传输文件时输入账号密码登陆远程机器等,但有时候这些动作需要在shell脚本中进行,这个时候就可以使用expec ...

  7. <转>数据库设计的三大范式

    为了建立冗余较小.结构合理的数据库,设计数据库时必须遵循一定的规则.在关系型数据库中这种规则就称为范式.范式是符合某一种设计要求的总结.要想设计一个结构合理的关系型数据库,必须满足一定的范式. 在实际 ...

  8. 【数据结构和算法】 O(1)时间取得栈中的最大 / 最小元素值

    常数时间取得栈中的元素最大值和最小值,我们可以想到当push的时候比较一下,如果待push元素值小于栈顶元素,则更新min值,最大值亦然. 这样有个问题就是当pop的时候,就没了最大最小值. 于是上网 ...

  9. 【转载】【内存对齐（二）】__declspec( align(#) )的用法和大小计算

    转自:http://www.cppblog.com/deercoder/archive/2011/03/13/141747.html 感谢作者! 在上面讲到了关于pack的内存对齐和计算方法,这里继续 ...

  10. Socket异步发送的同步控制

    在网络通信中,我们使用Socket异步发送数据,但在客户端,往往是需要等待服务器的返回结果后(握手过程)再往下执行,这就涉及到同步控制了,在多次的实现中,使用AutoResetEvent,实现不,即有 ...