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

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

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

【方法】使用daviddurman的FlexiJsonEditor工具

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

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

  <link rel="stylesheet" type="text/css" media="screen" href="/static/css/jsoneditor.css" />
<script src="/static/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="/static/js/jquery.jsoneditor.js" type="text/javascript"></script>
<script src="/static/js/json2.js" type="text/javascript"></script>
<div id="SingleJsonEditor" class="json-editor" > </div>
<div style = "text-align: center;"> <textarea id="SingleTxt" style="width: 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脚本中填写以下代码

  var JsonList= { any: { json: { value: 1 } } };
$('#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

[ json editor] 如何在网页中使用Json editor 插件的更多相关文章

  1. 如何正确的使用json?如何在.Net中使用json?

    什么是json json是一种轻量级的数据交换格式,由N组键值对组成的字符串,完全独立于语言的文本格式. 为什么要使用json 在很久很久以前,调用第三方API时,我们通常是采用xml进行数据交互,但 ...

  2. JSON(五)——同步请求中使用JSON格式字符串进行交互(不太常见的用法)

    在同步请求中使用JSON格式进行数据交互的场景并不多,同步请求是浏览器直接与服务器进行数据交互的大多是用jsp的标签jstl和el表达式对请求中的数据进行数据的渲染.我也是在一次开发中要从其它服务器提 ...

  3. json数据处理:读取文件中的json字符串,转为python字典

    方法1: 读取文件中的json字符串, 再用json.loads转为python字典 import json str_file = './960x540/config.json' with open( ...

  4. 在SqlServer 中解析JSON数据 [parseJSON] 函数 数据库中 解析JSON

    使用如下: SELECT * FROM parseJSON('{ "联系人": { "姓名": "huang", "网名" ...

  5. 《JSON笔记之三》---postman中传入json串

    1.关于如何使用postman工具,简单的介绍一下, 用户在开发或者调试网络程序或者是网页B/S模式的程序的时候是需要一些方法来跟踪网页请求的,用户可以使用一些网络的监视工具比如著名的Firebug等 ...

  6. asp.net中json格式化及在js中解析json

    类: public class UploadDocumentItem { public UploadDocumentItem() { } public string DocMuid { get; se ...

  7. MVC中处理Json和JS中处理Json对象

    MVC中处理Json和JS中处理Json对象 ASP.NET MVC 很好的封装了Json,本文介绍MVC中处理Json和JS中处理Json对象,并提供详细的示例代码供参考. MVC中已经很好的封装了 ...

  8. 在JS和.NET中使用JSON (以及使用Linq to JSON定制JSON数据)

    转载原地址: http://www.cnblogs.com/mcgrady/archive/2013/06/08/3127781.html 阅读目录 JSON的两种结构 认识JSON字符串 在JS中如 ...

  9. Python 3 中的json模块使用

    1. 概述 JSON (JavaScript Object Notation)是一种使用广泛的轻量数据格式. Python标准库中的json模块提供了JSON数据的处理功能. Python中一种非常常 ...

随机推荐

  1. Python实例3

    3.一个整数,它加上100后是一个完全平方数,再加上268又是一个完全平方数,请问该数是多少? 正解: 源码: #!/usr/bin/python # -*- coding: UTF-8 -*- im ...

  2. 初涉hash

    今天和朋友讨论一个问题 有两百亿个数,我给出一个数,找到这两百亿个数中两数相加等于它的组合.要求时间复杂度为线性,空间2G 解决思路是开一个hash表比如a[1000]将所有数存入hash表中,a[i ...

  3. 利用html5的localStorage做一个备忘录

    实现一个便签功能,可以记录内容和写的时间,当网页从新载入,可以读取以前的记录. html文档 <!DOCTYPE html> <html> <head lang=&quo ...

  4. LeetCode-Search in Rotated Sorted Array

    Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 migh ...

  5. liunx之:ln命令

    linux  一个很重要的命令 它的功能是为某一个文件在另外一个位置建立一个同步的链接,这个命令最常用的参数是-s,具体用法是: ln -s  源文件 目标文件    -s 是 symbolic的意思 ...

  6. Kylin(三): Saiku

    Saiku是一个轻量级的OLAP分析引擎,可以方便的扩展.嵌入和配置.Saiku通过REST API连接OLAP系统,利用其友好的界面为用户提供直观的分析数据的方式,它是基于jQuery做的前端界面. ...

  7. GitLab常见使用方法

    1.GitLab配置 git config --global user.name "xxx" -- 配置用户名,上传本地 repository 到服务器上的时候,在 Github ...

  8. handshake_failure

    在java 1.6版本中,通过HttpsURLConnection请求class 1(多发生于免费ssl证书,比如沃通或者startssl的)的https网络地址时,可能会报握手异常: Caused ...

  9. 将页面打印成excel

    在servlet中调用 try { File fileWrite = new File("D:/Write.xls"); fileWrite.createNewFile(); Ou ...

  10. angularJs ng-model/ng-bind

    ng-bind 与ng-model区别ng-bind是从$scope -> view的单向绑定,也就是说ng-bind是相当于{{object.xxx}},是用于展示数据的.ng-modle是$ ...