jqGrid 学习

Posted Garnett_Boy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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: 100, height:50, align: "left", editable: true }, { name: \'ename\', index: \'ename\', width: 100, align: "center" }, { name: \'esex\', index: \'esex\', width: 100, align: "center" }, { name: \'eage\', index: \'eage\', width: 100, align: "center", search: false } ], rowList: [10, 20, 30], jsonReader:{repeatitems : false}, sortname: \'eid\', viewrecords: true, sortorder: "desc", pager: "#pager", rowNum: 10, //width: \'auto\', width: \'1000\', 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学习

jqGrid学习笔记

jqgrid学习

JqGrid学习笔记

jqGrid使用手册

jqgrid学习