2012-04-18 39 views
4

我想爲我的用戶提供一個編輯JSON對象的界面。JSON對象GUI

比如我有一個用下面的選項調用谷歌圖表一個JavaScript:

var options={ 
    chartType: "Pie", 
    title:"Chart title", 
    is3D:false, 
    width:500, 
    height:300, 
}; 

我的理想用戶應該能夠修改選項本身,而不必尋找到的代碼。他們將與來自對象,其中自動建立一個UI呈現:

  • 圖圖表是一個選擇(餅圖,折線圖,條形圖)
  • 標題文本輸入
  • is3D是一個複選框
  • 等等

是否有這樣的庫?如果不是,有什麼建議可以開始?

我當然可以手動構建表單,但想法是有一個適用於任何對象的通用解決方案。

+1

參見:http://stackoverflow.com/questions/998832/gui-based-or -web-based-json-editor-that-works-like-property-explorer – dreftymac 2012-10-04 21:55:58

回答

2

我發現與約定此鏈接描述JSON:http://www.json-schema.org/

搜索「JSON模式」帶我到了一些解決方案,特別是這篇文章:

GUI-based or Web-based JSON editor that works like property explorer

這是兩年前開始,但顯然有良好的記錄和保持最新。

此外,從2012年4月在IBM網站上的一個帖子:

http://www.ibm.com/developerworks/library/wa-jsonschema/index.html?cmp=dw&cpb=dwwdv&ct=dwnew&cr=dwnen&ccy=zz&csr=040512

0

編寫一個webform來檢測服務的參數。 獲得參數後,根據可用參數生成表單。 提交表單並獲取JSON結果。

+0

它是有道理的,但我正在尋找更通用的解決方案。我的一些對象甚至沒有鏈接到服務,它們只是由我的腳本直接使用。 – Christophe 2012-04-18 22:51:36

+0

查看Fiddler如何攔截JSON – Har 2012-04-19 14:16:20

0

娜,你需要自己構建表單。 HTML表單只是一種描述屬性(請求的)要求的方式,而且它們的序列化只會返回所需的對象。在您的例子這將是

<select name="chartType"><option value="Pie"/><option value="Line" />...</select> 
<input type="text" name="title" /> 
<input type="checkbox" name="is3D" /> 
<input type="number" name="width" /> 

等形式也讓你描述的模式,最小/最大值,默認值和一切這樣的庫會處理。你可能會發現,原來簡單的

{ 
    chartType: ["Pie", "Line", "Bar"], 
    title:"string", 
    is3D:"boolean", 
    width:"number" 
} 

到上面的HTML,並提供一個跨瀏覽器的序列化功能,但是當它變得更爲複雜庫(如預選「線」,有一個默認的標題等),你會回來的到html(或它的js表示)。

+0

thx,您的對象描述就是我所尋找的。我希望爲此找到一個圖書館,或者至少了解一些慣例(例如如何描述下拉與單選按鈕)。 – Christophe 2012-04-18 21:02:24

+0

不,那是html。選擇列表,下拉選擇列表,單選按鈕?你只是說你想在選項之間做出選擇。 – Bergi 2012-04-18 22:06:56

+0

我確實發現了一些東西,我需要看看它:http://www.json-schema.org/。 – Christophe 2012-04-18 22:41:52

1

問題

如何提供構建任意JSON結構的一個用戶友好的方式,其中:

  • 用戶界面直觀,靈活,並且無需開發人員級技術人員即可使用iency
  • 用戶界面可以從JSON
  • 修改用戶界面需要很少或不需要顯影劑介入
  • 修改底層JSON結構可自動地觸發修改相應的用戶界面的結構來推斷

解決方案

如果這是問題的基本前提,這種方法確實出現使用任何的不同是可能的在「MVVM」命名法下(這顯然是「MVC」模式的變體)。

實例

http://knockoutjs.com/examples/cartEditor.html http://en.wikipedia.org/wiki/Model_View_ViewModel#Open_source_MVVM_frameworks

參見

GUI-based or Web-based JSON editor that works like property explorer