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>

 

posted @ 2021-02-24 17:07  博二爷  阅读(492)  评论(0编辑  收藏  举报