如何在弹出的层中自动加载对应目录中的.json文件？

Question

使用 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>

Answer 1

其实使用一个层就行，也不用创建那么多，用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>