在这里记录一下，也是在公司用到的一个例子，刚刚解决，正好趁热打铁。前端页面是采用BootStrap框架搭建的，主要的样式涉及到项目，在这里就不截图了，直接上代码：
一级table动态加载
jsp/html中的table代码：
<table id="data-table" class="table table-striped table-condensed" border="0" style="width: 100%; margin-top:21px; background:#163F77"> </table>
根据后台返回的json数据来动态加载出来
//页面dataTables 表格加载 xxx.tableControl({ //日期控件选择器 dateRange: ".data-range-picker", startDay: 15, //导出按钮选择器 exportBtnSelector: ".export-btn", tableSelector: "#data-table", // 子表点击开关 childTableClick: true, // 启用外部设置时间 controlDate: true, //table opitons tableOpitons: { childTableRowClick: function (store, fieldName) { console.log("111111"); console.log(fieldName); if (fieldName === "") { $(".nav-link.active").removeClass("active show"); $("a[href^='#id值']").addClass("active"); $("#要显示的二级界面id").modal("show"); shinow.jaDataTable("1", "需要打开的二级页面"); } }, //主键 parentIdField: '后台传过来的数据ID', //名称 nameField: '后台传过来的NAME', ajaxSuccess: function (data, $table, sum) { // debugger; if (sum[0] != 0) { sum[2] = xxx.numberUtil.formatLength(sum[2] = sum[1] / parseInt(sum[0]) * 100, 2); } else { sum[2] = 0 } return sum; }, columns: [ [{ //接口中的key field: '后台传过来的ID', //显示名称 title: '编号', align: 'left', //是否显示 visible: false }, { field: '后台传过来的名字', //宽度 width: 65, //计算合计 // sumable: true, align: "center", highlight: "#ffd800", title: '单位', rowspan: 2 }, { field: '后台传的其它值', //宽度 width: 65, //计算合计 sumable: true, align: "center", highlight: "#ffd800", title: 'XXX', rowspan: 2 }, { //宽度 width: 65, //计算合计 // sumable: true, align: "center", // highlight: "#ffd800", title: '督促', colspan: 5 } ], [{ field: '后台传的其它值', //宽度 width: 80, //允许弹出明细 childClick: true, //计算合计 sumable: true, align: "center", highlight: "#ffd800", title: 'XXX'//, // rowspan: 2 }, { field: '后台传的其它值', //宽度 width: 80, align: "center", highlight: "#ffd800", title: 'XXX' }, { field: '后台传的其它值', //宽度 width: 80, align: "center", highlight: "#ffd800", title: 'XXX' }, { field: '后台传的其它值', //宽度 width: 65, align: "center", highlight: "#ffd800", title: 'XXX' }, { field: '后台传的其它值', //宽度 width: 65, align: "center", highlight: "#ffd800", title: '同比' }] ], fnRowCallback: function (nRow, aData, iDisplayIndex) { $('td:eq(2)', nRow).removeClass("text-center"); $('td:eq(2)', nRow).attr('style', 'text-align: left;'); }, fnFooterCallback: function (nFoot, aData, iStart, iEnd, aiDisplay) { var total = $("#data-table tbody").data("other"); $(nFoot).find('th').eq(3).html("<span style=\"color:#ffd800; font-weight: bold;\">" + total.JQSLtotal + "</span>"); $(nFoot).find('th').eq(4).html("<span style=\"color:#ffd800; font-weight: bold;\">" + total.YJSLtotal + "%</span>"); $(nFoot).find('th').eq(5).html("<span style=\"color:#ffd800; font-weight: bold;\">" + total.ZGSLtotal + "%</span>"); $(nFoot).find('th').eq(6).html("<span style=\"color:#ffd800; font-weight: bold;\">" + total.ZGBLtotal + "</span>"); $(nFoot).find('th').eq(7).html("<span style=\"color:#ffd800; font-weight: bold;\">" + total.YJHBtotal + "%</span>"); $(nFoot).find('th').eq(8).html("<span style=\"color:#ffd800; font-weight: bold;\">" + total.YJTBtotal + "%</span>"); $(nFoot).find('th').eq(9).html("<span style=\"color:#ffd800; font-weight: bold;\">" + total.DCSLtotal + "%</span>"); $(nFoot).find('th').eq(10).html("<span style=\"color:#ffd800; font-weight: bold;\">" + total.DCZGSLtotal + "%</span>"); $(nFoot).find('th').eq(11).html("<span style=\"color:#ffd800; font-weight: bold;\">" + total.DCZGBLtotal + "%</span>"); $(nFoot).find('th').eq(12).html("<span style=\"color:#ffd800; font-weight: bold;\">" + total.DCHBtotal + "%</span>"); $(nFoot).find('th').eq(13).html("<span style=\"color:#ffd800; font-weight: bold;\">" + total.DCTBtotal + "%</span>"); console.log(total); } }, //table url地址 tableParentUrl: $("#path").val() + "访问后台接口路径" });
在主table页面中点击数据后展开，当点击展开后的某一列的话，会弹出二级table页面，相当于table主页的二级弹框，js代码如下：
二级table动态产生
//二级table内容 jaDataTable: function (caseType, tableName) { var that = this; var orgId = $('#button_org_id').val(); var startTime = $('#startTime').val();//参数 var endTime = $('#endTime').val();//参数 //$("#" + tableName + "_table").dataTable().fnClearTable();//还原初始化了datatable //alert(typeof($("#" + tableName + "_table").DataTable())); //$("#" + tableName + "_table").DataTable().destroy();//还原初始化了datatable var table4 = $('#' + tableName + '_table').DataTable({ "ordering": false,//去掉排序小图标 // "processing": true, // "serverSide": true, "destroy": true, searching: false, 'paging': false, // "bLengthChange": true, //开关，是否显示每页显示多少条数据的下拉框 // data: data, "ajax": function (data, callback, settings) {//ajax配置为function,手动调用异步查询 $.ajax({ type: "get", url: $("#path").val() + "/xx/xx/xx/xx?startDate=" + startTime.replace(/-/g, "") + "&endDate=" + endTime.replace(/-/g, "") + "&orgId=" + orgId + "&caseType=" + caseType, cache: false, //禁用缓存 // data: param, //传入已封装的参数 dataType: "json", success: function (result) { //setTimeout仅为测试延迟效果 setTimeout(function () { //异常判断与处理 if (result.errorCode) { swal("", "查询失败", "warning"); //$.dialog.alert("查询失败。错误码：" + result.errorCode); return; } //封装返回数据，这里仅演示了修改属性名 var returnData = {}; returnData.data = result.data; //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染 //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕 callback(returnData); }, 200); }, error: function (XMLHttpRequest, textStatus, errorThrown) { swal("", "查询失败", "warning"); //$.dialog.alert("查询失败"); } }); }, "columns": [ { "data": '后台调用接口返回的json相关字段', title: '对应名称', "width": "20%", searchable: 'false' }, { "data": '后台调用接口返回的json相关字段', title: '对应名称', "width": "20%", searchable: 'false' }, {"data": '后台调用接口返回的json相关字段', title: '对应名称', searchable: 'false', "width": "180px"}, {"data": '后台调用接口返回的json相关字段', title: '对应名称', searchable: 'false', "width": "180px"}, {"data": '后台调用接口返回的json相关字段', title: '对应名称', searchable: 'false', "width": "180px"}, {"data": '后台调用接口返回的json相关字段', title: '对应名称', searchable: 'false', "width": "180px"}, {"data": '后台调用接口返回的json相关字段', title: '对应名称', searchable: 'false', "width": "180px"} ] }); }
因为二级弹出页面是分为多个类别的，每个类别都对应着相关的table页，所以在这里需要定义不同的caseType来进行传参，以及对应的table的id值。具体的js代码如下：
$(".nav-link").on("click", function () { var href = $(this).attr("href"); switch (href) { case "#yjjqInfo": shinow.jaDataTable("自定义编号，用于传到后台", "table1的id名"); break; case "#jsspjqInfo": shinow.jaDataTable("自定义编号，用于传到后台", "table2的id名"); break; case "#scjcjspInfo": shinow.jaDataTable("自定义编号，用于传到后台", "table3的id名"); break; case "#sahzyclInfo": shinow.jaDataTable("自定义编号，用于传到后台", "table4的id名"); break; default: break; } });
最后就是在jsp/html中的二级table的定义，代码如下：
<!--二级页面--> <div class="modal fade" id="ajja_details_modal"> <div class="modal-dialog modal-dialog-centered" style="min-width:1490px;color: #fff"> <div class="modal-content"> <div class="modal-header"> 问题分类 <button type="button" class="close" data-dismiss="modal" style="margin-top:-10px;">×</button> </div> <div class="modal-body"> <div class="panel blank-panel"> <div class="panel-heading m-t-md"> <div class="panel-options"> <div class="tabbable"> <ul class="nav nav-tabs" role="tablist"> <li><a class="nav-link active" href="#yjjqInfo" data-toggle="tab">分类1</a></li> <li><a class="nav-link" href="#jsspjqInfo" data-toggle="tab" id="nav-link">分类2</a> </li> <li><a class="nav-link" href="#scjcjspInfo" data-toggle="tab" id="nav-link">分类3</a> </li> <li><a class="nav-link" href="#sahzyclInfo" data-toggle="tab" id="nav-link">分类4</a> </li> </ul> </div> </div> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane active" id="yjjqInfo"> <div class="p-sm border no-top-border"> <button type="submit" class="btn btn-warning start export-btn_yjjq lbox-btn"> <i class="glyphicon glyphicon-export" aria-hidden="true"></i> <span>导出Excel</span> </button> <div class="row"> <div class="col-md-12"> <table class="table table-bordered text-center table_ellipsis" id="yjjqInfo_table" style="width: 100%"> </table> </div> </div> </div> </div> <div class="tab-pane" id="jsspjqInfo"> <div class="p-sm border no-top-border"> <button type="submit" class="btn btn-warning start export-btn_jsspjq lbox-btn"> <i class="glyphicon glyphicon-export" aria-hidden="true"></i> <span>导出Excel</span> </button> <div class="row"> <div class="col-md-12"> <table class="table table-bordered text-center table_ellipsis table_jsspjq" id="jsspjqInfo_table" style="width: 100%"> </table> </div> </div> </div> </div> <div class="tab-pane" id="scjcjspInfo"> <div class="p-sm border no-top-border"> <button type="submit" class="btn btn-warning start export-btn_scjcjsp lbox-btn"> <i class="glyphicon glyphicon-export" aria-hidden="true"></i> <span>导出Excel</span> </button> <div class="row"> <div class="col-md-12"> <table class="table table-bordered text-center table_ellipsis table_scjcjsp" id="scjcjspInfo_table" style="width: 100%"> </table> </div> </div> </div> </div> <div class="tab-pane" id="sahzyclInfo"> <div class="p-sm border no-top-border"> <button type="submit" class="btn btn-warning start export-btn_sahzycl lbox-btn"> <i class="glyphicon glyphicon-export" aria-hidden="true"></i> <span>导出Excel</span> </button> <div class="row"> <div class="col-md-12"> <table class="table table-bordered text-center table_ellipsis table_sahzycl" id="sahzyclInfo_table" style="width: 100%"> </table> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
导出的功能是采用js来进行的，具体的js代码在下一篇文章进行介绍，也是在工作中遇到的一种前端布局类型，记录一下，方便以后使用。如有不对的地方，还望多多指正！！！
