zoukankan      html  css  js  c++  java
  • layUI 实现自定义弹窗

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

    放心,能看到的数据,都不是生产数据,我造的假数据,但是功能效果就是这样,点击列表中的一行,弹出某些要展示的信息。很明白吧!ha٩(๑>◡<๑)۶,下边是代码

    代码:

    //html代码
    <style>
      #impTable{
        display: none;
      }
    </style>

    <td>
      <a href="#" th:text="${lists.batchCount}" th:onclick="|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

  • 相关阅读:
    CocoStudio基础教程(4)骨骼动画的动态换肤
    CocoStudio基础教程(3)在程序中处理cocoStudio导出动画
    CocoStudio基础教程(2)关联程序逻辑与cocoStudio导出文件
    CocoStudio基础教程(1)创建UI并载入到程序中
    LeetCode:盛最多水的容器【11】
    LeetCode:反转字符串中的元音字母【345】
    LeetCode:验证回文串【125】
    LeetCode:颜色分类【75】
    LeetCode:删除排序数组中的重复项||【80】
    LeetCode:移动零【283】
  • 原文地址:https://www.cnblogs.com/xuchao0506/p/10008891.html
Copyright © 2011-2022 走看看