zoukankan      html  css  js  c++  java
  • [ json editor] 如何在网页中使用Json editor 插件

    【目的】 在自己的网页上交由用户进行json的可视化编辑

    【难点】1、json中含有递归嵌套的数组和对象

               2、json中的基本值类型有数字、字符串和布尔型

    【方法】使用daviddurman的FlexiJsonEditor工具

    【下载】https://github.com/DavidDurman/FlexiJsonEditor

    【使用】一 、 在网页html前端添加以下代码  

    1  <link rel="stylesheet" type="text/css" media="screen" href="/static/css/jsoneditor.css" />
    2  <script src="/static/js/jquery-1.7.2.min.js" type="text/javascript"></script> 
    3  <script src="/static/js/jquery.jsoneditor.js" type="text/javascript"></script> 
    4  <script src="/static/js/json2.js" type="text/javascript"></script> 
    5  <div id="SingleJsonEditor" class="json-editor" > </div>
    6  <div style = "text-align: center;"> <textarea id="SingleTxt"  style=" 90%; height: 100px; color: #90F;"  onchange= "ChangeJsonTree('SingleTxt','SingleJsonEditor')" ></textarea>   </div>

    注:1 第一行是样式文件

          2 第二行引用了本地的jquery

          3 第三行是jsoneditor.js 脚本实现文件

          4 第四行不是必须的,有些浏览器自带了json.js 脚本

      5 第五行在网页中定义一个占位符

          6 第六行定义了一个文本的标签,以文本的形式展示json,响应了onchange方法,方便文本修改之后,去改动jsoneditor

            二、在js脚本中填写以下代码

    1  var JsonList= { any: { json: { value: 1 } } };
    2  $('#SingleJsonEditor').jsonEditor(JsonList, { change: function (rdata) {$('#SingleTxt').val(JSON.stringify(rdata)); }});  

    注 : 1 定义了一个json类型

           2 加载了jsoneditor控件,并且发生改变时,通知singleTxt去变更

    如果有其他不懂,请参考https://github.com/DavidDurman/FlexiJsonEditor

    这是一个官方的例子:http://www.daviddurman.com/flexi-json-editor/jsoneditor.html

  • 相关阅读:
    Apache Pig使用MongoLoader产生大量空文件问题
    执行sparksql出现OOM问题
    [TD笔记]Teradata XML
    Redhat上离线/非root安装python库
    Java 多线程同步关键字synchronized各种用法/特性 总结
    CVE-2019-0708 微软远程桌面服务远程代码执行漏洞分析之补丁分析
    Spring Security 实战(使用Spring Boot项目演示)
    一些渗透中,或者扫描的nmap nse脚本推荐
    kali学习笔记(一):虚拟机安装好kali后应进行的配置
    Spring boot相关问题
  • 原文地址:https://www.cnblogs.com/hans-201506/p/5939514.html
Copyright © 2011-2022 走看看