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

最新推荐文章于 2024-05-15 11:50:30 发布

Aimyone

最新推荐文章于 2024-05-15 11:50:30 发布

阅读量1.8k

点赞数

分类专栏： layui Java

本文链接：https://blog.csdn.net/qq_36636312/article/details/116757871

版权

Java 同时被 2 个专栏收录

82 篇文章 5 订阅

订阅专栏

layui

46 篇文章 5 订阅

订阅专栏

1，效果图：

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

json格式内容展示：

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

在这里插入图片描述

2，前端代码：

2.1 父页面前端代码


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

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>

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 "";
        }

Aimyone

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
layui 将数据以json格式显示标记json与非json内容

1，效果图：2，前端代码：2.1 父页面前端代码 function unitdataCheck() { dLong.layeropen(800,600, "核算单元完整性校验", "${ctx}/BillItemController/dataJson?mark=unit") }2.2 子编辑页面（CheckJson.jsp）代码 <script type="text/javascript"> layui.config({ b
复制链接

扫一扫