写点什么

RUOYI 框架教程 14| 什么!详情页还有简易写法? 这么多年白学了(附代码)

发布于: 2021 年 07 月 14 日


 若依教程独家分享!点赞+关注,一起从「蒟蒻」变成「大佬」~


小伙伴们,好久不见~ 


众所周知,详情页面其实没有什么技术难度,但是,对于特别多字段的详情页面,写起来费时费力,大量摸鱼的时间都被废掉了!!


最近封装了个 js,直接解决手动处理这些无意义的事情~


环境准备:

  • Ruoyi-fast  4.6.2 

  • 添加 js 库 HRuinger.common.js 

  • 建表 T0711




2,代码实现


1,下面以这个表为例进行讲解,建表 sql 如下:

CREATE TABLE `t0711` (  `id` int(11) NOT NULL AUTO_INCREMENT,  `title` varchar(255) DEFAULT NULL COMMENT '标题',  `status` varchar(10) DEFAULT NULL COMMENT '状态',  `info` mediumtext COMMENT '内容',  PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=utf8;
复制代码

2,调整 Controller,添加详情页面请求

代码与修改页面基本一样,仅修改一下参数就行


@GetMapping("/detail/{id}") public String detail(@PathVariable("id") Long id, ModelMap mmap) { T0711 t0711 = t0711Service.selectT0711ById(id); mmap.put("t0711", t0711); return prefix + "/detail"; }
复制代码

3,主页面调整,主要添加详情页请求

        同样复制修改请求

 detailUrl: prefix + "/detail/{id}",
复制代码

4,添加详情按钮

复制修改按钮,修改如下

actions.push('<a class="btn btn-warning btn-xs ' +         editFlag + '" href="javascript:void(0)"         onclick="$.operate.detail(\'' + row.id + '\')"        ><i class="fa fa-search"></i> 详情 </a>   ');
复制代码

5,详情页面设计

复制一份修改页面修改成 detail.html,与请求一致

引入 js:   

hruinger.common.js
复制代码

添加 JS 代码:

// 文本域自适应高度调整$.HRuinger.changeHeigthOfTextArea();//对可编辑项限制禁止修改var tag=['textarea','input','select'];$.HRuinger.addDisableBGWhile(tag);
复制代码

6,页面效果图

7,项目分享

项目下载地址

https://pan.baidu.com/s/1CiHNyCpzKaiz_KsJXCxAMw

提取码:15rq

JS 位置

static/hruinger/js/hruinger.common.js


如果想了解更多若依教程,你也可能对这些感兴趣:

若依系列文章合集(持续更新中)

有意思的技术知识合集(持续更新中)

发布于: 2021 年 07 月 14 日阅读数: 9
用户头像

爱写作的95后国企产品|程序媛 2020.05.06 加入

爱写作的95后国企产品|程序媛,公众号【若依框架教程】、【V5codings】

评论

发布
暂无评论
RUOYI 框架教程 14| 什么!详情页还有简易写法?这么多年白学了(附代码)