需要引用如下JQ组件

http://www.jq22.com/yanshi13551

JQ组件下载

① 对其做二次封装，支持弹窗显示和选择器注入显示,弹窗需要layer组件支持

② 可以在右上角添加自定义按钮，支持触发按钮回调，返回格式化后的json文本

③ 自定义样式

json-layer{
	display:none;position: relative;
}

.json-layer pre{
	padding: 20px 30px;
	overflow: auto;
	width: 100%;
	box-sizing: border-box;
}

.json-layer a.layui-btn{
	position: absolute;top: 10px;right: 10px;
}

第一步引入样式文件

<link rel="stylesheet" type="text/css" href="/json-viewer/css/jquery.json-viewer.css">

第二步引入JS文件 

addScript('/json-viewer/js/jquery.json-viewer.js');

普通引入

<script src="/jquery/jquery-1.10.2.js"></script>
<script src="js/jquery.json-viewer.js"></script>

第三步引入封装的JS对象

function json_render(config) {

    this.num = Math.ceil(Math.random()*1000000);
    //传入的json文本数据
    this.text = config.text || '';
    this.title = config.title || '';
    // 显示json的方式  0 直接显示 1 弹窗显示(依赖layer弹窗组件)
    this.type = config.type || 0;
    //目标选择器
    this.selector = config.selector || '';
    // 右上角按钮文本
    this.btn_text = config.btn_text||'';
    //点击按钮回调函数
    this.callback = config.callback || null;

    this.initshow = function(data){
        try {
          var input = JSON.parse(data) ;
          //格式化json文本
           this.text = JSON.stringify(input, null, 2);
           // this.text = data;
        } catch (error) {
          return alert("Cannot eval JSON: " + error);
        }

        var options = {
          collapsed: 0,
          withQuotes: 1
        };
        
        try{
            $('.json-layer.'+this.cla+' pre').jsonViewer(input, options);
        } catch(e) {
            alert('请引入json格式化组件');
            return false;
        }
    }

    // 弹窗显示
    this.show = function(data) {
        this.initshow(data);
        var index = layer.open({
            type: 1,
            area:['70%','80%'],
            shadeClose:true,
            title: this.title,
            content: $('.json-layer.'+this.cla)
        });
        // 外层layer禁止滚动  pre设置固定高度  由pre来滚动
        $('#layui-layer'+index +' .layui-layer-content').css('overflow','hidden');
        var height = $('#layui-layer'+index +' .layui-layer-content').height();
        $('.layui-layer .'+this.cla+' pre').height(height);
    }


    if (layer==null && this.type==1) {
        alert('请先引入layer组件,再弹窗显示');
        return false;
    }
    if ($==null) {
        alert('请导入JQuery组件');
        return false;
    }

    var that = this;    
    this.cla = 'json_'+this.num;

    var html = '<div class="json-layer '+this.cla+'"><pre  ></pre>';
    if (this.btn_text!='') {
        html += '<a class="layui-btn layui-btn-xs layui-btn-normal" >{0}</a>'.format(this.btn_text);
    }
    html += '</div>';

    if (this.type==1) {
        //插入
        $('body').append(html);
    } else {
        //设置到指定选择器中
        $(this.selector).empty().append(html);
        $('.json-layer.'+this.cla).show().children('pre').css('max-height','350px');
        this.initshow(this.text);
    }

    $('.'+this.cla).on('click','a',function(e){
        if (that.callback!=undefined) {
            that.callback(that.text);
        }
    });
    
}

普通调用

window.jr = new json_render({
    'selector': '.aaa',
    'text': str,
    'type': 0,
    'btn_text': '复制',
    'title': '详细信息',
    'callback': function(res) {
        console.log(res);
        copythis(res, 1);
    }
});
window.jr = new json_render({
    'selector': '.bbb',
    'text': str,
    'type': 0,
    'btn_text': '复制',
    'title': '详细信息',
    'callback': function(res) {
        console.log(res);
        copythis(res, 1);
    }
});

弹窗调用

window.jr = new json_render({
    'type': 1,
    'btn_text': '复制',
    'title': '详细信息',
    'callback': function(res) {
        console.log(res);
        copythis(res, 1);
    }
});

$ = layui.$;
jQuery  = $;

function showContent(e) {
	window.jr.show($(e).text());
}