[ json editor] 如何在網頁中使用Json editor 插件

【目的】 在本身的網頁上交由用戶進行json的可視化編輯

【難點】一、json中含有遞歸嵌套的數組和對象

           二、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

        2、在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