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',    100, height:50, align: "left", editable: true },
                { name: 'ename', index: 'ename',  100, align: "center" },
                { name: 'esex',  index: 'esex',   100, align: "center" },
                { name: 'eage',  index: 'eage',   100, align: "center", search: false }
                ],
                rowList: [10, 20, 30],
                jsonReader:{repeatitems : false},
                sortname: 'eid',
                viewrecords: true,
                sortorder: "desc",
                pager: "#pager",
                rowNum: 10,
                // 'auto',
                 '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"}]}