layui 将数据以json格式显示标记json与非json内容_lauiy textjson格式

作者：小蓝xlanll | 2024-02-28 06:23:38

踩

lauiy textjson格式

1，效果图：

通过一个代码实现两种不同格式内容的展示

json格式内容展示：

在这里插入图片描述
非json格式内容展示：

在这里插入图片描述

2，前端代码：

2.1 父页面前端代码


 function unitdataCheck() {
    dLong.layeropen(800,600, "核算单元完整性校验", "${ctx}/***/dataJson?mark=unit")
 }

1
2
3
4
5

2.2 子编辑页面（CheckJson.jsp）代码


 <script type="text/javascript">

        layui.config({
            base: '/static/layui-v2.5.6/ext/',// 第三方模块所在目录
            version: 'v1.5.10' // 插件版本号
        }).extend({
            soulTable: 'soulTable/soulTable',
            tableChild: 'soulTable/tableChild',
            tableMerge: 'soulTable/tableMerge',
            tableFilter: 'soulTable/tableFilter',
            excel: 'soulTable/excel',
            treeGrid:'treegrid/treeGrid',
            xmSelect:'xmSelect/xm-select',
            tableSelect:'tableSelect/tableSelect',
            multiSelect:'multiSelect/multiSelect'

        });
        
        layui.use(['form','table','soulTable','laypage','layer','xmSelect', 'util','laydate','multiSelect','tableSelect'],function(){
            var form = layui.form;
            var $ = layui.jquery;
            formattdata();
        })
        
        
//格式化解析
//【两种格式代码展示】
       function formattdata() {
	        var contentJSON='${entity.authcontent}';
	        var authcontentjson=${authcontentjson};
	        if(authcontentjson!=''&&authcontentjson!=null&&authcontentjson!=undefined){
	            var jdata=JSON.stringify(authcontentjson, null, 4);
	            $("#execprssion").html("<textarea id=\"execprssiontext\" style=\"color:darkred;word-wrap:break-word;height:400px;width:600px;margin-left: 5px;\">"+jdata+"</textarea>" );
	        }else {
	            $("#execprssion").html("<textarea id=\"execprssiontext\" style=\"color:darkred;word-wrap:break-word;height:400px;width:600px;margin-left: 5px;\">"+contentJSON+"</textarea>" );
	        }        
        }


//格式化解析
//【json格式代码展示】
	    function formattdata() {
            var contentJSON=${execprssion2};
            var jdata=JSON.stringify(contentJSON, null, 4);
            $("#execprssion").html("<textarea id=\"execprssiontext\" style=\"color:darkred;word-wrap:break-word;height:550px;width:780px;margin-left: 5px;\">"+jdata+"</textarea>" );
        }


//判断是否能解析成json，暂时没使用
        function isJSON(str) {
            if (typeof str == 'string') {
                try {
                    var obj=JSON.parse(str);
                    if(typeof obj == 'object' && obj ){
                        return true;
                    }else{
                        return false;
                    }

                } catch(e) {
                    console.log('error：'+str+'!!!'+e);
                    return false;
                }
            }
            console.log('It is not a string!')
        }

  </script>


//展示代码
<body style="overflow-y: auto">

<div class="layui-form" lay-filter="form">
    <div class="ro" id="execprssion" style="overflow-x: hidden">
    </div>
</div>

</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

3，后端代码：


//【两种格式代码展示】
	@RequestMapping("reviewFailed")
    public String getEditPage(@RequestParam HashMap<String,String> paraMap,Model model){
        if (!StringUtil.isNullOrSpace(paraMap.get("id"))) {
            Tbz4Entity entity=tbz4EntityDao.findById(paraMap.get("id")).get();
                model.addAttribute("entity",entity);
                if(entity.getContext().startsWith("{")){
                    model.addAttribute("authcontentjson",entity.getContext());
                }else {
                    model.addAttribute("authcontentjson","null");
                }
            }
        }
        return "**/CheckJson";
    }

//【json格式代码展示】
	@RequestMapping("/dataJson")
    public String dataJson(@RequestParam HashMap<String,String> paraMap,Model model) {
        try {
            HashMap<String,Object> map=new HashMap<>();
            if(paraMap.get("mark").equals("ks")){
                String sql="select* from A";
                List<Map<String, Object>> listks=jdbcTemplate.queryForList(sql);
                map.put("sql",sql);
                map.put("result",listks);
                if(listks.size()>0){
                    map.put("msg","【对应不完整】");
                }else {
                    map.put("msg","【对应完整】");
                }
            }
            if(paraMap.get("mark").equals("unit")){
                  String sql="select* from B";
                List<Map<String, Object>> listunit=jdbcTemplate.queryForList(sql);
                map.put("sql",sql);
                map.put("result",listunit);
                if(listunit.size()>0){
                    map.put("msg","【对应不完整】");
                }else {
                    map.put("msg","【对应完整】");
                }
            }
            model.addAttribute("execprssion2", JSON.toJSONString(map,true));
            return "aaa/CheckJson";
        } catch (Exception e) {
            log.error(e.getMessage(), e);
            return "";
        }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/158015

layui 将数据以json格式显示 标记json与非json内容_lauiy textjson格式

1，效果图：

2，前端代码：

3，后端代码：

layui 将数据以json格式显示标记json与非json内容_lauiy textjson格式