公告 / Notice

  • 界面已全面升级(11/06)

    CSS & JS分别用SASS和Webpack编译,对资源进行了模块化处理;缓存规则使页面运行更快!

  • 移动端完成(07/22)

    做得比较随意,UI非常简便

  • 正式上线啦!(07/19)

    星博客V2.0已经正式上线,欢迎大家登录浏览!

  • 星博客V2.0启动(07/15)

    由于不满意1.0版本的UI风格,星博客V2.0今日进入开发阶段

Json Editor - 可视化编辑JS对象

概述

一款用于在线可视化编辑JS对象的工具库,增删改均具备。你可以扩展为在线编辑json文件等。

源码及使用说明:https://github.com/zxh19890103/jsoneditor

 

使用

需要放入一下HTML内容:

<!-- Required!!! Area for displaying json -->
<div id="jsonViewWrap" class="json-view-wrap">
    <div id="jsonView" class="json-view"></div>
</div>
<!-- Required!!! Edit Input: for adding node or editing node. -->
<div id="jsonViewInput" class="json-view-mask json-view-input">
    <form>
        <input type="text" name="dataKey" placeholder="Enter Key" style="width: 61.8%;">
        <br>
        <input type="text" name="dataValue" placeholder="Enter Value">
        <br>
        <div>
            <input type="radio" name="dataType" id="dataType_0" value="string"><label for="dataType_0">string</label>
            <input type="radio" name="dataType" id="dataType_1" value="boolean"><label for="dataType_1">boolean</label>
            <input type="radio" name="dataType" id="dataType_2" value="number"><label for="dataType_2">number</label>
            <input type="radio" name="dataType" id="dataType_3" value="array"><label for="dataType_3">array</label>
        </div>
        <br>
        <button type="submit" class="btn green">OK</button>
    </form>
</div>

接口很简单:

var data = { 
    name: "Singhi John",
    age: 29,
    male: true,
    skills: ["Angular", "Vue", ".NET", "PHP"],
    address: {
        country: "China",
        state: "LiaoNing"
    }
};
var jv = new JsonViewer('jsonViewWrap', 'jsonViewInput', data);

JsonViewer接收3个参数,第一个是显示JSON内容的元素ID,第二个是对JSON进行编辑时的表单元素的ID,最后是一个object。

效果

jsoneditor

发布于 2018年03月04日 19:11
阅读 95 可以 3