如何在弹出的层中自动加载对应目录中的.json文件？
使用 bootstrap4.6 ，点击以下代码：
<li data-toggle="modal" data-target="#n001">001</li>
弹出以下层，自动加载对应的 n001.json 文件，并以表格形式显示？
<div class="modal fixed-left fade" id="n001" tabindex="-1" aria-hidden="true" role="dialog">
// 这里加载对应的 json 文件内容
// 需要格式化为表格 <table> 形式
</div>
其实使用一个层就行，也不用创建那么多，用js变量缓存对应的数据起来更新层就行，看http://www.w3dev.cn/demo/bootstrap-modal/ 这个在线示例
<link href="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<!--新增data-json存储json名称-->
<li data-toggle="modal" data-target="#n001" data-json="n001">001</li>
<li data-toggle="modal" data-target="#n001" data-json="n002">002</li>
<li data-toggle="modal" data-target="#n001" data-json="n003">003</li>
<div class="modal fade" id="n001" tabindex="-1" role="dialog"><div class="modal-dialog"></div></div>
<script>
var cache = {};
$('[data-toggle="modal"]').click(function () {
var el = $(this), target = el.attr('data-target'), elTarget = $(target).find('.modal-dialog'), json = el.attr('data-json');
if (!cache[json]) {//未加载json数据用ajax加载
$.getJSON(json+ '.json',//注意json路径
function (d) {
var s = '<div style="background:#fff"><table class="table table-bordered table-striped"><tr><th>NO</th><th>Text</th></tr>';
s += $(d).map(function () { return '<tr><td>' + this.no + '</td><td>' + this.text + '</td></tr>' }).get().join('')
s += '</table></div>'
cache[json] = s;//缓存数据
elTarget.html(s);
});
}
else elTarget.html(cache[json] );//加载缓存
});
</script>
使用BootStrap Table实现。
https://www.cnblogs.com/landeanfen/p/4976838.html
1. 弹窗出现关闭通过js控制，而不用target, 这样可以很好的监听弹窗的打开。
$('#identifier').modal(options)
2. 弹窗触发时请求json，
$('#identifier').on('show.bs.modal', function () {
// 请求json
$.get('test.json',function(){
})
})
3. 利用请求返回的json内容渲染表格，渲染可以通过js便利，或者利用arttemplate.js 这样的模板插件
$('#identifier').on('show.bs.modal', function () {
// 请求json
$.get('test.json',function(data){ //data就是json的内容
1. 利用for循环便利生成dom插入节点
2. 利用模板渲染
})
})
动态演示图
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>弹出层加载json数据</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
</head>
<body>
<li data-toggle="modal" data-target="#n001" id="Modal">001</li>
<div class="modal fixed-left fade" id="n001" tabindex="-1" aria-hidden="true" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<table class="table">
<thead>
<tr>
<th>数据名称</th>
<th>数据ID</th>
</tr>
</thead>
<tbody>
<tr>
<td class="NameId"></td>
<td class="NumberId"></td>
</tr>
</tbody>
</table>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
</body>
<script>
$(function(){
$("#Modal").click(function(){
$.getJSON("json/datas.json", function(data) {
var html = '';
//console.log(data);
$.each(data,function(i,item){
var NameId = item['NameId'];
var NumberId = item['NumberId'];
$('.NameId').html(NameId);
$('.NumberId').html(NumberId);
});
});
});
});
</script>
</html>
datas.json文件
[{"NameId":"测试数据"},{"NumberId":"数据1号"}]
json格式，json格式需要你自己根据实际的格式来解析
[
{
"no": 1,
"text": "n001-1-text"
},
{
"no": 2,
"text": "n001-2-text"
}
]
<link href="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<li data-toggle="modal" data-target="#n001">001</li>
<li data-toggle="modal" data-target="#n002">002</li>
<div class="modal fade" id="n001" tabindex="-1" role="dialog"><div class="modal-dialog"></div></div>
<div class="modal fade" id="n002" tabindex="-1" role="dialog"><div class="modal-dialog"></div></div>
<script>
$('[data-toggle="modal"]').click(function () {
var el = $(this), target = el.attr('data-target'), elTarget = $(target).find('.modal-dialog');
if (elTarget.text() == '') {//未加载动态ajax加载json文件，注意json路径
$.getJSON(target.substring(1) + '.json',
function (d) {
var s = '<div style="background:#fff"><table class="table table-bordered table-striped"><tr><th>NO</th><th>Text</th></tr>';
s += $(d).map(function () { return '<tr><td>' + this.no + '</td><td>' + this.text + '</td></tr>' }).get().join('')
s += '</table></div>'
elTarget.html(s);
});
}
});
</script>