springmvc+mybatis+mysql8+idea+jqgrid前端

一、背景

主要是为了学习jqgrid前端技术，熟练一下前后端交互数据

二、效果图

访问地址：http://localhost:8080/cr/views/jqGridDemo.jsp

三、代码展示

复制代码

控制层JqGridController.java

java 复制代码

@Controller
@RequestMapping("/jqgrid")
public class JqGridController {

    private String page=""; //当前显示页码
    private String rows=""; //每页显示的多少条数
    private Map<String, Object> map;

    @Autowired
    private IJqGridService jqGridService;

    @RequestMapping(value = "/getRoleList", method = {RequestMethod.GET,RequestMethod.POST})
    @ResponseBody
    public Map<String, Object> getRoleList(String page, String rows){
        //分页查询
        map = jqGridService.getRoleListPage(page, rows);
        return map;
    }

页面

html 复制代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%
    String path = request.getContextPath();
    System.out.println("path="+path);
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    System.out.println("basePath="+basePath);
%>
<html>
<head>
    <meta charset="UTF-8">
    <title>我是demo.html页面</title>

    <link type="text/css" href="../css2/themes/base/jquery.ui.all.css" rel="stylesheet" />
    <!-- jQuery UI样式-->
    <link rel="stylesheet" href="../css2/jquery-ui-1.8.2.custom.css"/>
    <!-- jqGrid CSS-->
    <link rel="stylesheet" type="text/css" media="screen" href="../jqgrid2/css/ui.jqgrid.css" />

    <link rel="stylesheet" type="text/css" href="../css2/themes/base/jquery.ui.datepicker.css"/>

    <link type="text/css" rel="stylesheet" href="../css2/jquery.validator1.css"/>
    <!-- jQuery库-->
    <script type="text/javascript" src="../js2/jquery-1.7.2.min.js"></script>
    <!-- jqGrid语言库-->
    <script type="text/javascript" src="../jqgrid2/js/i18n/grid.locale-cn.js"></script>
    <!--jqGrid库,目前最新版本3.6-->
    <script type="text/javascript" src="../jqgrid2/js/jquery.jqGrid.min.js"></script>

    <script type="text/javascript" src="../js2/jquery.bgiframe.js"></script>
    <script type="text/javascript" src="../js2/jquery.validator.js"></script>
    <script type="text/javascript" src="../js2/local/zh_CN.js"></script>
    <script type="text/javascript" src="../ui2/jquery.ui.core.js"></script>
    <script type="text/javascript" src="../ui2/jquery.ui.datepicker.js"></script>
    <script type="text/javascript" src="../ui2/i18n/jquery.ui.datepicker-zh-CN.js"></script>

    <script type="text/javascript" src="../ui2/jquery-ui.custom.js"></script>
    <script src="../ui2/jquery.ui.button.js"></script>
</head>
<style>
    .ui-jqgrid .ui-jqgrid-htable th div {
        overflow: hidden;
        position: relative;
        height: 22px;
    }
</style>
<body>
<!--显示jqGrid内容-->
<table id="list1"></table>

<!--显示jqGrid分页-->
<div id="pager1"></div>

</body>
</html>

<script>
    jQuery().ready(function(){
        $("#list1").jqGrid({
            url:'<%=basePath%>jqgrid/getRoleList',
            datatype:"json",
            mtype: 'GET',
            colNames:['序号','角色名称','角色权限字符串','显示顺序','角色类型','备注'],
            colModel:[
                {name:'id',index:'id', width:75,align:"center"},
                {name:'roleName',index:'roleName',width:90},
                {name:'roleKey',index:'roleKey',width:100},
                {name:'orderNum',index:'orderNum',width:90},
                {name:'roleType',index:'roleType',width:90},
                {name:'remark',index:'remark',width:150,sortable:false}
            ],
            jsonReader : {   			//jsonReader用于设置如何解析从Server端发回来的json数据。
                total:"totalPage",  	// json中代表页码总数的数据
                page:"page",		// json中代表当前页码的数据
                records:"totalRecordCount",	// json中代表数据行总数的数据
                root:"info",		// json中代表实际模型数据的入口
                repeatitems: false, // 如果设为false，则jqGrid在解析json时，会根据name来搜索对应的数据元素（即可以json中元素可以不按顺序）；而所使用的name是来自于colModel中的name设定。
                id:"0"
            },
            rowNum:5,   			//用来指定每页显示记录数 默认是:20 后台可以使用:rows变量进行参数接收
            autowidth: true,		//用来自适应父容器
            rowList:[5,10,15],   	//用来指定下拉列表中每页显示条数  注意:是一个数组
            pager: jQuery('#pager1'),  //用来指定分页工具栏标签的id  注意:分页工具栏可以放在任意位置   使用方式: <div id="pager1"></div>    grid中设置:pager:"#pager1"
            sortname: 'id',				//用来指定使用哪个列作为排序列  注意:后台使用sidx接收排序列结果
            viewrecords: true,			//用来显示总记录数
            sortorder: "desc",			//排序
            caption:"jqgrid表格"     //表格标题
        }).navGrid('#pager1',{edit:false,add:false,del:false})
    })
</script>