需求描述:点击表格中的数据,弹出一张具体信息表。描述的不是很清楚,放效果图,就明白了,上图

放心,能看到的数据,都不是生产数据,我造的假数据,但是功能效果就是这样,点击列表中的一行,弹出某些要展示的信息。很明白吧!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 实现自定义弹窗相关推荐

  1. 使用layer.open打开自定义弹窗,获取表单内容发送到后端

    layui.layer弹层组件官方文档 layer.open的type参数有5个不同的值,如果要自定义弹窗内容,可以使用 type: 1(页面层). 使用页面层,则参数content可填写html或使 ...

  2. flutter自定义弹窗

    今天接到这样一个需求,需要自定义弹窗,所以就有了如下的代码: 通过分析,一切皆widget 所以可以这样实现: import 'package:flutter/cupertino.dart'; imp ...

  3. qtabwidget放大_Qt自定义弹窗屏蔽父窗口(QWidget设置setWindowModality(Qt::ApplicationModal);以后再show)...

    写Qt程序时遇到一个问题: Qt自带的弹窗功能单一,所以须要自己用ui设计弹窗的内容,这样弹窗就和普通窗口一样了,但问题是这个弹窗显示后父窗口还是活动的.网上找了很久找到了解决办法: Qt::Wind ...

  4. html如何写微信弹窗,微信小程序 自定义弹窗实现过程(附代码)_而已_前端开发者...

    这篇文章主要介绍了微信小程序 自定义弹窗实现过程(附代码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 小程序官网里弹出框一般都是类似下面形式: ...

  5. layui admin 当前子页面 刷新 其他页面 layui 关闭 子弹窗

    layui admin 当前子页面 刷新 其他页面 var parent =parent.layui.jquery; var indexWindow = parent('iframe[lay-id=& ...

  6. vue自定义弹窗dialog,vue 点击遮罩层功能区以外的地方关闭遮罩层

    vue自定义弹窗dialog,vue 点击遮罩层功能区以外的地方关闭遮罩层 1.示例展示 2.代码 <template><div class="content"& ...

  7. 【微信小程序】自定义弹窗蒙版输入框效果图完整代码

    [微信小程序]自定义弹窗文本输入框效果图&完整代码 效果图 在输入框中进行内容的输入 点击确认后在姓名一栏进行更新修改 点击返回后姓名一栏不做任何修改 在这个的基础上你可以自定义任何弹窗 wx ...

  8. 微信小程序点击按钮弹出弹窗_微信小程序自定义弹窗(可通用)

    本文为自定义弹窗,该内容可满足如下需求: 自定义各种布局弹窗. 点击弹窗布局外消失弹窗 弹出弹窗时背景阴影半透明 各方向弹出效果(本文为自下而上弹出). (后续可能会补充新需求,或可以留言讨论你的需求 ...

  9. 微信H5、移动端自定义弹窗事件穿透、底层页面滑动解决方案

    前言 之前有个项目是运行在移动端Web,和微信H5中,由于默认的弹窗UI不太好看,而且还不统一,所以页面需要自定义弹窗,添加icon.提示信息.操作按扭等样式. 问题描述: 如果在页面内容的高度超过了 ...

最新文章

  1. 【高并发】一个工作了7年的朋友去面试竟然被Thread类虐的体无完肤
  2. 历届冬奥会中国金牌得主一览
  3. 基于深度学习的目标检测方法综述
  4. JVM监控工具有哪些
  5. C语言 共用体/联合体 union
  6. java 皮鞋_java反射
  7. 对Html里的title属性的换行
  8. 云终端要如何和服务器配置起来使用的
  9. Spring mvc 返回json格式 - 龙企阁 - 博客频道 - CSDN.NET
  10. Android 获取imageview的图,在另一个imageview里显示,还能得到图片
  11. 奥城大学计算机专业,美国研究生双录取的大学及可提供学位详情
  12. iOS创建自定义相册
  13. 数学期望一-指数分布的数学期望
  14. 51单片机延时函数不起作用
  15. matlab画全球参数分布图 绘制世界地图
  16. 搭建个人网站需要的三个步骤
  17. 物流快递信息查询管理系统网站(JSP+HTML+MySQL)
  18. python的allure使用
  19. 例子解释,pandas的pd.read_csv函数,quoting = 3是什么意思
  20. 准确率-召回率 - Precision-Recall

热门文章

  1. 咖啡文化:各种咖啡名称与选择
  2. tensorflow.reshap(tensor,shape,name)的使用说明
  3. hdu-1029 Ignatius and the Princess IV
  4. 分布式缓存DistributedCache的使用
  5. Mybatis用法小结
  6. Jenkins TFS配置
  7. [Java] HashMap遍历的两种方式
  8. visual c++ for .net(新语法)
  9. java学习笔记(四)----对象、数组作为参数传递,静态变量、静态方法的使用,内部类,使用文档注释
  10. 【错误记录】IntelliJ IDEA 中 Java 代码中的中文注释报错 ( Menu / File / Settings / Editor / File Encodings 中修改工程编码 )