crenn
crenn
采纳率100%
2021-02-25 08:01

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

50

使用 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条回答

  • showbo GoCityPass新加坡曼谷通票 2月前

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

     

    点赞 评论 复制链接分享
  • showbo GoCityPass新加坡曼谷通票 2月前

    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>
    点赞 评论 复制链接分享
  • wanmeikakaxi wanmeikakaxi 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号"}]
    点赞 评论 复制链接分享
  • qq_37026254 白日有梦 2月前

    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. 利用模板渲染
        })
    })
    点赞 评论 复制链接分享
  • ProfSnail ProfSnail 2月前
    点赞 评论 复制链接分享