layUI 实现自定义弹窗
需求描述:点击表格中的数据,弹出一张具体信息表。描述的不是很清楚,放效果图,就明白了,上图
放心,能看到的数据,都不是生产数据,我造的假数据,但是功能效果就是这样,点击列表中的一行,弹出某些要展示的信息。很明白吧!ha٩(๑>◡<๑)۶,下边是代码
代码:
//html代码<style> #impTable{ display: none; }</style> <td> <a href="#" th:text="${lists.batchCount}" th:οnclick="|impNum('${lists.examId}')|"></a></td> <div id="impTable"> <table class="table table-striped table-bordered table-hover table-checkable" id="tableImp"> <thead> <tr > <th>序号</th> <th>文件名</th> <th>状态</th> <th>导入数据条数</th> <th>导入时间</th> <th>操作账号</th> </tr> </thead> <tbody> </tbody> </table></div>
//js代码function impNum(examId) { var impTable = $('#impTable') var url = rootPath + '/vraxx/batch/findDetail'; var data = CommnUtil.ajax(url, { examId: examId }, "json"); if (data!=''&& data!=null ){ for (var i = 0; i < data.length; i++) { var tv = "<tr>" + ' <td>'+i+1+'</td>' + ' <td >' + data[i].fileName + '</td>' + ' <td >' + data[i].tempStatus + '</td>' + ' <td > ' + data[i].num + ' </td>' + ' <td>' + data[i].createDate + '</td>' + ' <td>' + data[i].createName + '</td>' + ' </tr>'$('#tableImp tbody').append(tv); } var index= layer.open({ type:1, title:'XX详情', btn: ['返回'], area: ['50%', '50%'], content: impTable, end:function () { layer.close(index); var prevDataPath = $("#topli li:last-child").prev(); var prevDataPathVal = $(prevDataPath).attr("data-path"); loadListView("AAAA", "BBBB", "0", "", prevDataPathVal); } }); } else{ layer.msg("未导入"); } }
总结:要注意的两点在html中编辑好弹出层的展示内容impTable ajax数据返回回来的时候拼接到table的body
转载于:https://www.cnblogs.com/xuchao0506/p/10008891.html
layUI 实现自定义弹窗相关推荐
- 使用layer.open打开自定义弹窗,获取表单内容发送到后端
layui.layer弹层组件官方文档 layer.open的type参数有5个不同的值,如果要自定义弹窗内容,可以使用 type: 1(页面层). 使用页面层,则参数content可填写html或使 ...
- flutter自定义弹窗
今天接到这样一个需求,需要自定义弹窗,所以就有了如下的代码: 通过分析,一切皆widget 所以可以这样实现: import 'package:flutter/cupertino.dart'; imp ...
- qtabwidget放大_Qt自定义弹窗屏蔽父窗口(QWidget设置setWindowModality(Qt::ApplicationModal);以后再show)...
写Qt程序时遇到一个问题: Qt自带的弹窗功能单一,所以须要自己用ui设计弹窗的内容,这样弹窗就和普通窗口一样了,但问题是这个弹窗显示后父窗口还是活动的.网上找了很久找到了解决办法: Qt::Wind ...
- html如何写微信弹窗,微信小程序 自定义弹窗实现过程(附代码)_而已_前端开发者...
这篇文章主要介绍了微信小程序 自定义弹窗实现过程(附代码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 小程序官网里弹出框一般都是类似下面形式: ...
- layui admin 当前子页面 刷新 其他页面 layui 关闭 子弹窗
layui admin 当前子页面 刷新 其他页面 var parent =parent.layui.jquery; var indexWindow = parent('iframe[lay-id=& ...
- vue自定义弹窗dialog,vue 点击遮罩层功能区以外的地方关闭遮罩层
vue自定义弹窗dialog,vue 点击遮罩层功能区以外的地方关闭遮罩层 1.示例展示 2.代码 <template><div class="content"& ...
- 【微信小程序】自定义弹窗蒙版输入框效果图完整代码
[微信小程序]自定义弹窗文本输入框效果图&完整代码 效果图 在输入框中进行内容的输入 点击确认后在姓名一栏进行更新修改 点击返回后姓名一栏不做任何修改 在这个的基础上你可以自定义任何弹窗 wx ...
- 微信小程序点击按钮弹出弹窗_微信小程序自定义弹窗(可通用)
本文为自定义弹窗,该内容可满足如下需求: 自定义各种布局弹窗. 点击弹窗布局外消失弹窗 弹出弹窗时背景阴影半透明 各方向弹出效果(本文为自下而上弹出). (后续可能会补充新需求,或可以留言讨论你的需求 ...
- 微信H5、移动端自定义弹窗事件穿透、底层页面滑动解决方案
前言 之前有个项目是运行在移动端Web,和微信H5中,由于默认的弹窗UI不太好看,而且还不统一,所以页面需要自定义弹窗,添加icon.提示信息.操作按扭等样式. 问题描述: 如果在页面内容的高度超过了 ...
最新文章
- 【高并发】一个工作了7年的朋友去面试竟然被Thread类虐的体无完肤
- 历届冬奥会中国金牌得主一览
- 基于深度学习的目标检测方法综述
- JVM监控工具有哪些
- C语言 共用体/联合体 union
- java 皮鞋_java反射
- 对Html里的title属性的换行
- 云终端要如何和服务器配置起来使用的
- Spring mvc 返回json格式 - 龙企阁 - 博客频道 - CSDN.NET
- Android 获取imageview的图,在另一个imageview里显示,还能得到图片
- 奥城大学计算机专业,美国研究生双录取的大学及可提供学位详情
- iOS创建自定义相册
- 数学期望一-指数分布的数学期望
- 51单片机延时函数不起作用
- matlab画全球参数分布图 绘制世界地图
- 搭建个人网站需要的三个步骤
- 物流快递信息查询管理系统网站(JSP+HTML+MySQL)
- python的allure使用
- 例子解释,pandas的pd.read_csv函数,quoting = 3是什么意思
- 准确率-召回率 - Precision-Recall
热门文章
- 咖啡文化:各种咖啡名称与选择
- tensorflow.reshap(tensor,shape,name)的使用说明
- hdu-1029 Ignatius and the Princess IV
- 分布式缓存DistributedCache的使用
- Mybatis用法小结
- Jenkins TFS配置
- [Java] HashMap遍历的两种方式
- visual c++ for .net(新语法)
- java学习笔记(四)----对象、数组作为参数传递,静态变量、静态方法的使用,内部类,使用文档注释
- 【错误记录】IntelliJ IDEA 中 Java 代码中的中文注释报错 ( Menu / File / Settings / Editor / File Encodings 中修改工程编码 )