🎈个人公众号:🎈 :✨✨ 可为编程 ✨✨ 🍟🍟
🔑个人信条:🔑知足知不足 有为有不为 为与不为皆为可为🌵
🍉本篇简介:🍉 本片详细说明了BootStrap框架下使用JS动态加载table并点击相关列弹出二级页面，并给出具体操作实例，如有出入还望指正。关注公众号【可为编程】回复【面试】领取年度最新面试题大全!!!
BootStrap框架下使用JS动态加载table并点击相关列弹出二级页面
在这里记录一下，也是在公司用到的一个例子，刚刚解决，正好趁热打铁。前端页面是采用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代码在下一篇文章进行介绍，也是在工作中遇到的一种前端布局类型，记录一下，方便以后使用。如有不对的地方，还望多多指正！！！
这里是一个真诚的***青年技术交流QQ群:761374713***，不管你是大学生、社畜、想学习变成的其他人员，欢迎大家加入我们，一起成长，一起进步，真诚的欢迎你，不管是技术，还是人生，还是学习方法。有道无术，术亦可求，有术无道，止于术。
欢迎大家关注【可为编程】，成长，进步，编程，技术、掌握更多知识！
1564
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
