jsonEditor用法

最新推荐文章于 2024-08-08 08:18:43 发布

Haiyoung

最新推荐文章于 2024-08-08 08:18:43 发布

阅读量1.5w

点赞数 2

分类专栏： javaScript 文章标签： jsonEditor javascript

本文链接：https://blog.csdn.net/haiyoung/article/details/79939229

版权

javaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<script type="text/javascript" src="resources/js/jsoneditor/jsoneditor.js?v=<%=WebResourcesVersion.JSONEDITOR%>"></script>
<link rel="stylesheet" type="text/css" href="resources/js/jsoneditor/jsoneditor.css?v=<%=WebResourcesVersion.JSONEDITOR%>"/>
//jsoneditor支持多种模式，modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
//jsoneditor初始化，mode为tree时，显示结构树，为text时，默认显示为纯文本

function jsoneditorInit(){
    var container = document.getElementById('status'); 
    var options = {
            mode: 'tree',
            onError: function (err) {  
            alert(err.toString());
            }
    };
    jsonEditor = new JSONEditor(container, options, null); 
}

function checkStatus(serviceInstanceId) {
    superAjax({
        url : 'api/docker/service/status',
        data : {
            serviceInstanceId : serviceInstanceId
        },
        dataType : 'json',
        mask : true,
        success : function(data) {
            if(isEmpty(data)){
                $("#status").text("there is no status! sorry!");
            }else{
                // $("#status").text(data);
                jsonEditor.setText(data);
            }
        }
    });
}


//jsoneditor初始化,可以两种模式切换
function jsoneditorInit(){
    var container = document.getElementById('status'); 
    var options = {
            modes: ['tree','code'],
            onError: function (err) {  
            alert(err.toString());
            }
    };
    jsonEditor = new JSONEditor(container, options, null); 
}

function checkStatus(serviceInstanceId) {
    superAjax({
        url : 'api/docker/service/status',
        data : {
            serviceInstanceId : serviceInstanceId
        },
        dataType : 'json',
        mask : true,
        success : function(data) {
            if(isEmpty(data)){
                $("#status").text("there is no status! sorry!");
            }else{
                // $("#status").text(data);
                jsonEditor.setText(data);
            }
        }
    });
}

更多使用示例，可以查看官方示例： https://github.com/josdejong/jsoneditor/tree/master/examples