[ 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="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脚本中填写以下代码
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
