springmvc+mybatis+mysql8+idea+jqgrid前端

一、背景

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

二、效果图

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

三、代码展示

控制层JqGridController.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;
    }

service层

@Service("jqGridService")
@Transactional(propagation = Propagation.REQUIRED, isolation = Isolation.DEFAULT)
public class JqGridServiceImpl implements IJqGridService {
    @Autowired
    private IJqGridDao jqGridDao;

    @Override
    public Map<String, Object> getRoleListPage(String page, String rows) {
        Map<String, Object> map = new HashMap<>();

        //总记录，已分页
        List<Role> roleListPage = jqGridDao.getRoleListPage((Integer.parseInt(page) - 1)*Integer.parseInt(rows), Integer.parseInt(rows));
        //总记录数count
        String totalRecordCount = jqGridDao.getRoleListCount();
        //总页码
        String totalPage = (Integer.parseInt(totalRecordCount) % Integer.parseInt(rows)==0?(Integer.parseInt(totalRecordCount) / Integer.parseInt(rows)+""):(Integer.parseInt(totalRecordCount) / Integer.parseInt(rows)+1+""));

        map.put("info", roleListPage);
        map.put("totalRecordCount", totalRecordCount);
        map.put("totalPage", totalPage);
        map.put("page", page);
        return map;
    }
}

dao层

public interface IJqGridDao {

    @Select("select * from sys_role order by order_num limit ${page},${rows}")
    List<Role> getRoleListPage(@Param("page") Integer page, @Param("rows") Integer rows);

    @Select("select count(*) from sys_role where 1=1")
    String getRoleListCount();
}

页面

<%@ 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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/212886.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

将多个字节对象组成的列表中的多个字节对象连接成为一个字节对象bytes.join()

将多个字节对象组成的列表中的多个字节对象连接成为一个字节对象bytes.join()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 将多个字节对象组成的列表 中的多个字节对象 连接成为一个字节对象 bytes.join() [太阳]选择题 请以下代码输出的结果是&#xff1f; byte_list [bK,be,by] print("【显示】byte_list&q…
阅读更多...
[力扣题]1.判断一棵树是否是平衡二叉树

[力扣题]1.判断一棵树是否是平衡二叉树

1.判断一棵树是否是平衡二叉树 1.1 题目描述 给你一棵二叉树的根节点 root &#xff0c;请你判断这棵树是否是一棵 完全二叉树 。 在一棵 完全二叉树 中&#xff0c;除了最后一层外&#xff0c;所有层都被完全填满&#xff0c;并且最后一层中的所有节点都尽可能靠左。最后一层…
阅读更多...
法学毕业生个人简历16篇

法学毕业生个人简历16篇

想要从众多法学毕业求职者中脱颖而出&#xff0c;找到心仪的相关工作&#xff1f;可以参考这16篇精选的法学专业应聘简历案例&#xff0c;无论是应届比预算还是有工作经验&#xff0c;都能从中汲取灵感&#xff0c;提升简历质量。希望对大家有所帮助。 法学毕业生简历模板下载…
阅读更多...
【LeetCode:1094. 拼车 | 差分数组】

【LeetCode:1094. 拼车 | 差分数组】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…
阅读更多...
工业机器视觉megauging（向光有光）使用说明书（五，轻量级的visionpro）

工业机器视觉megauging（向光有光）使用说明书（五，轻量级的visionpro）

这个说明主要介绍抓线功能。 第一步&#xff0c;添加线工具&#xff0c;鼠标双击工具箱“抓线”&#xff0c;出现如下界面&#xff1a; 第二步&#xff0c;我们拉一条&#xff0c;“九点标定”到“抓线1”的线&#xff0c;和visionpro操作一样&#xff1a; 第三步&#xff0c;…
阅读更多...
【SQLite】SQLite3约束总结

【SQLite】SQLite3约束总结

前面学习了SQLite数据库的常见使用方法&#xff0c;其中包含许多约束&#xff0c;常见的如NOT NULL、DEFAULT、UNIQUE、PRIMARY KEY&#xff08;主键&#xff09;、CHECK等 本篇文章主要介绍这些约束在SQLite中的使用 目录 什么是约束NOT NULL 约束DEFAULT约束UNIQUE约束PRIMA…
阅读更多...
竞赛选题 题目：基于深度学习的中文汉字识别 - 深度学习 卷积神经网络 机器视觉 OCR

竞赛选题 题目：基于深度学习的中文汉字识别 - 深度学习 卷积神经网络 机器视觉 OCR

文章目录 0 简介1 数据集合2 网络构建3 模型训练4 模型性能评估5 文字预测6 最后 0 简介 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于深度学习的中文汉字识别 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &a…
阅读更多...
【超全】React学习笔记 下：路由与Redux状态管理

【超全】React学习笔记 下：路由与Redux状态管理

React学习笔记 React系列笔记学习 上篇笔记地址&#xff1a;【超全】React学习笔记 上&#xff1a;基础使用与脚手架 中篇笔记地址&#xff1a;【超全】React学习笔记 中&#xff1a;进阶语法与原理机制 React路由概念与理解使用 1. 引入 React路由是构建单页面应用(SPA, Sin…
阅读更多...
CCC联盟数字车钥匙（九）——Passive Entry

CCC联盟数字车钥匙（九）——Passive Entry

2.3 Passive Entry : BLE设置 一旦完成了BLE配对和加密设置&#xff0c;随后与车辆的连接将使用Passive Entry流程。 对于被动进入&#xff0c;能力交换&#xff08;Capability Exchange&#xff09;是以车辆或设备自上次能力交换之后&#xff0c;是否更新DK协议版本、UWB配置…
阅读更多...
GEE：使用拉普拉斯（Laplacian）算子对遥感图像进行卷积操作

GEE：使用拉普拉斯（Laplacian）算子对遥感图像进行卷积操作

作者：CSDN @ _养乐多_ 本文记录了使用拉普拉斯（Laplacian）算子对遥感图像进行卷积操作的代码。并以试验区NDVI图像为例。 研究区真彩色影像、NDVI图像以及Sobel卷积结果如下所示， 文章目录 一、拉普拉斯算子二、完整代码三、代码链接一、拉普拉斯算子 详细介绍参考《遥感…
阅读更多...
Elasticsearch高级

Elasticsearch高级

文章目录 一.数据聚合二.RestAPI实现聚合三.ES自动补全(联想)四.数据同步五.elasticsearch集群 一.数据聚合 在ES中的数据聚合&#xff08;aggregations&#xff09;可以近似看做成mysql中的groupby分组,聚合可以实现对文档数据的统计、分析、运算,常见的聚合的分类有以下几种…
阅读更多...
【JavaScript手撕代码】call、apply、bind

【JavaScript手撕代码】call、apply、bind

修改this指向 方法参数返回值作用callthisArg, arg1, arg2, ...&#xff0c;注意&#xff0c;call接收的参数是一个参数列表函数返回值调用一个函数&#xff0c;将其 this 值设置为提供的值&#xff0c;并为其提供指定的参数。applythisArg, [arg1, arg2, ...]&#xff0c;请注…
阅读更多...
Chat-GPT原理

Chat-GPT原理

GPT原理 核心是基于Transformer 架构 英文原文&#xff1a; ​ Transformers are based on the “attention mechanism,” which allows the model to pay more attention to some inputs than others, regardless of where they show up in the input sequence. For exampl…
阅读更多...
数据结构中的二分查找(折半查找）

数据结构中的二分查找(折半查找）

二分法&#xff1a;顾名思义&#xff0c;把问题一分为2的处理&#xff0c;是一种常见的搜索算法&#xff0c;用于在有序数组或这有序列表中查找指定元素的位置&#xff0c;它的思想是将待搜索的区间不断二分&#xff0c;然后比较目标值与中间元素的大小关系&#xff0c;然后确定…
阅读更多...
基于51单片机的十字路口交通灯_5s黄灯倒计时闪烁

基于51单片机的十字路口交通灯_5s黄灯倒计时闪烁

基于51单片机十字路口交通灯_5s黄灯闪烁 &#xff08;程序仿真仿真视频&#xff09; 仿真&#xff1a;proteus 7.8 程序编译器&#xff1a;keil 4/keil 5 编程语言&#xff1a;C语言 设计编号&#xff1a;J006 功能要求 交通灯运行状态&#xff1a; &#xff08;1&…
阅读更多...
[c++]——string类____详细初步了解string类的运用

[c++]——string类____详细初步了解string类的运用

在成为大人的路上喘口气. 目录 &#x1f393;标准库类型string &#x1f393;定义和初始化string对象 &#x1f4bb;string类对象的常见构造 &#x1f4bb;string类对象的不常见构造 &#x1f4bb;读写string对象 &#x1f393; string类对象的修改操作 &#x1f4…
阅读更多...
题目：DNA序列修正（蓝桥OJ 3904）

题目：DNA序列修正（蓝桥OJ 3904）

题目描述&#xff1a; 解题思路&#xff1a; 从左到右扫描第一条 DNA 序列和第二条 DNA 序列的每一个位置&#xff0c;检查它们是否互补。 如果某个位置不互补&#xff0c;我们需要寻找第二条 DNA 序列中后续位置的碱基&#xff0c;看是否可以通过交换使这两个位置都互补。如果…
阅读更多...
博途PLC数组指针应用(SCL)

博途PLC数组指针应用(SCL)

CODESYS数组类型变量使用介绍 https://rxxw-control.blog.csdn.net/article/details/131375218https://rxxw-control.blog.csdn.net/article/details/131375218 博途PLC数组类型变量使用介绍还可以查看下面文章博客： https://rxxw-control.blog.csdn.net/article/details/1…
阅读更多...
模板可变参数/包装器

模板可变参数/包装器

一、什么是模板可变参数 1、对比函数可变参数 可变参数即参数的数量是不确定的&#xff0c;底层根据用户传入的数量&#xff0c;开一个数组存储对应的参数。 2、基本形式 args -- argument 参数 [0,n]个参数 // Args是一个模板参数包&#xff0c;args是一个函数形参参数包…
阅读更多...
Kubernetes基础(十)-自动伸缩

Kubernetes基础(十)-自动伸缩

1 介绍 Kubernetes提供了多种自动伸缩机制&#xff0c;主要常见的有&#xff1a; HPA&#xff08;Horizontal Pod Autoscaling&#xff09;VPA&#xff08;Vertical Pod Autoscaler&#xff09;CA&#xff08;Cluster Autoscaler&#xff09;CPA&#xff08;Custom Pod Autos…
阅读更多...
最新文章

Copyright @ 2022~2023