layUI 实现自定义弹窗

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

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

代码：

//html代码



　　
 


　　           id="tableImp">












        
        
            
序号
            
文件名
            
状态
            
导入数据条数
            
导入时间
            
操作账号
        
        
        
        
    

 

//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 = "" +
               '            '+i+1+'' +
               '            ' + data[i].fileName + '' +
               '            ' + data[i].tempStatus + '' +
               '             ' + data[i].num + ' ' +
               '            ' + data[i].createDate + '' +
               '            ' + data[i].createName + '' +
               '            '
$('#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