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

Java_若依框架教程

关注

发布于: 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

原文链接:【http://xie.infoq.cn/article/6efae69d83b789e9001e937ac】。文章转载请联系作者。

Java_若依框架教程

关注

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

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

发布

暂无评论

创作场景

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

Java_若依框架教程

评论