Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

权限管理系统之LayUI实现页面增删改查和弹出层交互

社会主义接班人 2019-02-24 21:13:00 阅读数:593 评论数:0 点赞数:0 收藏数:0

由于对LayUI框架不太熟悉,昨天抽空看了下LayUI的文档,今天在网上找了使用LayUI进行增删改查相关内容,自己照葫芦画了个瓢,画瓢部分不是很难,主要是下午遇到了一个弹出层的问题耗时比较久。

同一项目,设计风格都差不多,对于涉及单个数据表的页面,基本都是增删改查,布局都是差不多,实际项目中都是复制、粘贴过来改下数据基本就能完成80%,后续就是修修补补或者是要实现一些特殊需求,记得刚参加工作时,老大直接给了一个已经做好的模板页面让我比对着手动敲一遍,当时觉得重复操作没啥用,现在再看觉得作用很大,受益匪浅,所以弄一个模板页是很有必要的,后续功能页面只要复制粘贴修改数据就好了。

一、用户列表页list.html

列表页面一般上面是查询搜索框和页面交互按钮,下面是表格显示搜索结果。用户列表页面也是这样布局的,上面的搜索框比较少,后续可以进一步优化。列表显示的数据这里暂时在UserController中写成固定的,数据是从https://www.layui.com/demo/table/user/?page=1&limit=30获取的。

View Code

二、用户列表脚本user.js

在user.js中主要是table表格渲染、增删改查按钮的交互。

vartable;varlayer; layui.use(['layer', 'table', 'element' ], function() { table=layui.table; layer=layui.layer;//执行一个 table 实例 table.render({ elem :'/#user', height:350, url :'/user/getUsers', page :true, //开启分页 cols : [ [ //表头 { fixed :'left', type :'checkbox'}, { field :'id', title :'ID', width :80, fixed :'left'}, { field :'username', title :'姓名', width :160}, { field :'sex', title :'性别', width :220, },{ title :'操作', width :200, align :'center', toolbar :'/#tools'} ] ] });//监听工具条 table.on('tool(tools)', function(obj) { //注:tool是工具条事件名,test是table原始容器的属性 var data = obj.data //获得当前行数据 , layEvent = obj.event; //获得 lay-event 对应的值 if ('edit' ==layEvent) { addTea(data.id) }else if ('del' ==layEvent) { del(data.id); } }); });functionqueryUser(){var keyword = $("/#keyword").val(); table.reload('user', { where : { keyword : keyword }, page : { curr :1} }); }varindex;functionaddUser(id) { index=parent.layer.open({ type :2, title :"用户信息", area: ['550px', '400px'], content :'/user/edit?id=' +id }); layer.full(index); }functiondel(id) { parent.layer.open({ type :1, content :'

确定删除记录?
', btn : ['确定', '取消'], yes :function(index, layero) { $.ajax({ url :"/user/delete", data : {"id": id }, dataType :"text", success :function(data) {if(data==0){ layer.msg("删除成功!"); layer.close(index); queryUser(); }else{ layer.msg("删除失败!"); } }, error :function() { } }); } }); }//*/* /* 获取选中数据/*/ functiongetDatas(){var checkStatus = table.checkStatus('user');var data =checkStatus.data;var id = "";for(var i=0;i

三、编辑页面edit.html

点击新增用户、编辑按钮时会弹出遮罩层显示出编辑页面。

姓名

性别
年龄
">保存 关闭 View Code

四、弹出层遮罩与关闭问题

在实现上面功能的过程中遇到两个问题,还都是遮照层的问题,一是点击新增用户弹出的遮罩层不是全屏,只遮了右侧内容部分,二、在弹出编辑页面之后点击取消按钮时遮照层关闭不了。

对于第一个问题可以参考https://blog.csdn.net/yufengaotian/article/details/79231552,在父页面home.html和子页面list.html中都引入引用layui.js和layui.css,在子页面list.html中使用parent.layer.open打开iframe。functionaddUser(id) { index=parent.layer.open({ type :2, title :"用户信息", area: ['550px', '400px'], content :'/user/edit?id=' +id }); layer.full(index); }

对于第二个问题也是耗时最多的,这个也是坑最深的。在下面的代码中的onclick事件方法名写成了close();,开始以为是关闭方法写在edit.html中无法关闭,又把关闭事件放在了user.js中,依然不行,在close()方法中使用alert调试也弹不出信息,很是苦恼,后来尝试改下方法名再试没想到点击事件起作用了。关闭事件参考https://www.layui.com/doc/modules/layer.html。

关闭

五、小结

目前已完成首页、单表页面增删改查布局交互,但现在使用的还是固定数据,后续就是集成Mybatis、实现分页功能,用真实数据返回接口。

 

版权声明
本文为[社会主义接班人]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/5ishare/p/10427953.html

编程之旅,人生之路,不止于编程,还有诗和远方。
阅代码原理,看框架知识,学企业实践;
赏诗词,读日记,踏人生之路,观世界之行;

支付宝红包,每日可领