json对象可视化编辑工具jsonmate

有时候我们需要可视化编辑json对象,就像用ckeditor来编辑html一样,这里推荐一个Jquery的插件 jsonmate,


官网地址:http://jsonmate.com/


实例代码:

<link rel="stylesheet" type="text/css" href="jsoneditor.css"/>

<div id="editor" class="json-editor"></div>
<pre id="json"></pre>
<script src="jquery.min.js"></script>
<script src="jquery.jsoneditor.js"></script>
<script>
    var json = {
       "string": "foo",
       "number": 5,
       "array": [1, 2, 3],
       "object": {
         "property": "value",
         "subobj": {
         "arr": ["foo", "ha"],
         "numero": 1
       }
    };
    $('#editor').jsonEditor(json, { change: function() {
        $('#json').html(JSON.stringify(json));
    } });
</script>

效果如图


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值