layui 两级表头 代码观赏
layui两级表头
效果:
代码:
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html lang="en"> 5 <head> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 9 <title>NobleUI Responsive Bootstrap 4 Dashboard Template</title> 10 <link rel="stylesheet" href="../assets/vendors/core/core.css"> 11 <link rel="stylesheet" href="../assets/fonts/feather-font/css/iconfont.css"> 12 <script src="../js/jquery-3.3.1.min.js"></script> 13 <link rel="stylesheet" href="../assets/layui/css/layui.css" media="all"> 14 <script src="../assets/layui/layui.js" charset="utf-8"></script> 15 <link rel="stylesheet" href="../assets/css/demo_1/style.css"> 16 <link rel="shortcut icon" href="../assets/images/favicon.png" /> 17 <script type="text/javascript" > 18 </script> 19 </head> 20 <body> 21 <div class="page-wrapper"> 22 <div class="page-content"> 23 <div class="row"> 24 <div class="col-md-12 grid-margin stretch-card"> 25 <div class="card"> 26 <div class="card-body"> 27 <h6 class="card-title">提取文书信息</h6> 28 <form action="${pageContext.request.contextPath}/Util_servlet?method=file_upload" method="post" enctype="multipart/form-data"> 29 30 <div class="form-group"> 31 <label>输入word文档</label> 32 <input type="file" name="img[]" class="file-upload-default"> 33 <div class="input-group col-xs-12"> 34 <input name="file_path" type="text" class="form-control file-upload-info" disabled="" placeholder="上传word文书"> 35 <span class="input-group-append"> 36 <button class="file-upload-browse btn btn-primary" type="button">浏览</button> 37 </span> 38 </div> 39 </div> 40 <button class="btn btn-primary" type="submit">提交</button> 41 </form> 42 </div> 43 </div> 44 </div> 45 </div> 46 </div> 47 48 <div class="page-content"> 49 <div class="row"> 50 <div class="col-md-12 grid-margin stretch-card"> 51 <div class="card"> 52 <div class="card-body"> 53 <h6 class="card-title">详细信息</h6> 54 <p class="card-description">算法流程可看 <a href="https://www.cnblogs.com/smartisn/" target="_blank"> 博二爷的博客 </a>,若有疑问,可联系。</p> 55 <div class="table-responsive"> 56 <table class="layui-hide" id="test" lay-filter="test"> </table> 57 58 </div> 59 </div> 60 </div> 61 </div> 62 </div> 63 64 </div> 65 66 67 68 </div> 69 70 71 <!-- core:js --> 72 73 <script> 74 layui.use('table', function(){ 75 var table = layui.table; 76 77 table.render({ 78 elem: '#test' 79 ,url:'../upload/file_data.json' 80 ,cols: [[ 81 {field:'file_name', title:'文件名', width:250, rowspan: 2,align: 'center'} 82 ,{align: 'center', title: '基本信息', colspan: 6} 83 ,{align: 'center', title: '诉讼者', colspan: 3} 84 ,{align: 'center', title: '被诉讼者', colspan: 2} 85 ,{field:'guanxi', title:'实体关系', sort: true, rowspan: 2,align: 'center'} 86 ], 87 [ 88 {field:'file_class', title:'类型', width:80, sort: true} 89 ,{field:'file_field', title:'领域', width:80, sort: true} 90 ,{field:'real_date', title:'日期', width:80, sort: true} 91 ,{field:'court', title:'法院', width:80, sort: true} 92 ,{field:'area', title:'地区', width:80, sort: true} 93 ,{field:'law', title:'法律', width:80, sort: true} 94 ,{field:'people_apply', title:'诉讼者名称', width:100, sort: true} 95 ,{field:'people_apply_represent', title:'诉讼者代表', width:100, sort: true} 96 ,{field:'people_apply_yield', title:'诉讼者领域', width:80, sort: true} 97 ,{field:'people_applied', title:'被诉讼者名称', width:100, sort: true} 98 ,{field:'pelple_applied_yield', title:'被诉讼者领域', width:80, sort: true} 99 ] 100 ] 101 , limits: [5, 10, 20] //一页选择显示3,5或10条数据 102 , limit: 20 //一页显示10条数据 103 , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据,res为从url中get到的数据 104 var result; 105 console.log(this); 106 console.log(JSON.stringify(res)); 107 if (this.page.curr) { 108 result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr); 109 } 110 else { 111 result = res.data.slice(0, this.limit); 112 } 113 return { 114 "code": res.code, //解析接口状态 115 "msg": res.msg, //解析提示文本 116 "count": res.count, //解析数据长度 117 "data": result //解析数据列表 118 }; 119 } 120 ,page: true 121 }); 122 123 //监听行单击事件(双击事件为:rowDouble) 124 table.on('row(test)', function(obj){ 125 var data = obj.data; 126 var value=JSON.stringify(data.文件名).replace(/\"/g, ""); 127 layer.open({ 128 type: 1 129 ,title: false //不显示标题栏 130 ,closeBtn: false 131 ,area: ['900px', '518px'] 132 ,shade: 0.8 133 ,id: 'LAY_layuipro' //设定一个id,防止重复弹出 134 ,offset:'auto' 135 ,btn: '关闭' 136 ,btnAlign: 'c' 137 ,moveType: 1 //拖拽模式,0或者1 138 ,content: '<div class="page" style="height: 100%"><iframe name="myFrameName" id="iframeId" width="100%" height="100%" frameborder=0 scrolling=yes src="./个体关联图.jsp?Str_value='+value+'"></iframe></div>' 139 ,yes: function(){ 140 layer.closeAll(); 141 } 142 }); 143 144 //标注选中样式 145 obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click'); 146 }); 147 148 }); 149 </script> 150 <script src="../assets/vendors/core/core.js"></script> 151 <!-- endinject --> 152 <!-- plugin js for this page --> 153 <!-- end plugin js for this page --> 154 <!-- inject:js --> 155 <script src="../assets/vendors/feather-icons/feather.min.js"></script> 156 <script src="../assets/js/template.js"></script> 157 <!-- endinject --> 158 <!-- custom js for this page --> 159 <script src="../assets/js/file-upload.js"></script> 160 <script src="../assets/vendors/datatables.net/jquery.dataTables.js"></script> 161 <script src="../assets/js/data-table.js"></script> 162 <script src="../assets/vendors/datatables.net-bs4/dataTables.bootstrap4.js"></script> 163 </body> 164 </html>