crenn 2021-02-25 08:01 采纳率: 100%
浏览 198
已采纳

如何在弹出的层中自动加载对应目录中的.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>
  • 写回答

5条回答 默认 最新

  • Go 旅城通票 2021-02-26 14:03
    关注

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

     

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题?

悬赏问题

  • ¥15 操作系统相关算法中while();的含义
  • ¥15 CNVcaller安装后无法找到文件
  • ¥15 visual studio2022中文乱码无法解决
  • ¥15 关于华为5g模块mh5000-31接线问题
  • ¥15 keil L6007U报错
  • ¥15 webapi 发布到iis后无法访问
  • ¥15 初学者如何快速上手学习stm32?
  • ¥15 如何自动更换布娃娃图片上的衣服
  • ¥15 心理学eprime编程
  • ¥15 arduino esp8266开发