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>

备忘录:项目存放的目录 2、springmvc+mybatis+mysql8+idea+jqgrid前端

相关推荐
PanZonghui3 分钟前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript
言兴6 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte9 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常11 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常12 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
ccc101816 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
Struggler28123 分钟前
Chrome插件开发
前端
前端 贾公子35 分钟前
Monorepo + vite 怎么热更新
前端
爱吃烤鸡翅的酸菜鱼1 小时前
IDEA高效开发:Database Navigator插件安装与核心使用指南
java·开发语言·数据库·编辑器·intellij-idea·database
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js