Question

我想为我的用户提供编辑JSON对象的界面。

例如，我有一个使用以下选项调用Google图表的JavaScript：

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

理想情况下，我的用户应该能够自己修改选项而无需查看代码。它们将显示一个从对象自动构建的UI，其中：

chartType是一个选择（饼图，线条，条形图）
title是文字输入
is3D是一个复选框
等

这有图书馆吗？如果没有，任何建议开始？

我当然可以手动构建表单，但我们的想法是拥有适用于任何对象的通用解决方案。

Answer 1

我发现此链接包含用于描述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

Answer 2

<强>问题

如何提供一种用户友好的方法来构造任意JSON结构，其中包括：

用户界面直观，灵活，无需开发人员级技术熟练即可使用
用户界面可以从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

Answer 3

编写webform以检测服务的参数。获得参数后，根据可用参数生成表单。提交表单并获取JSON结果。

Answer 4

Na，你需要自己构建表单。 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并提供了一个crossbrowser序列化函数，但是当它变得更复杂时（例如预选“Line”，有一个默认的标题等），你将回到html（或者它的js表示）。 / p>

JSON对象GUI

4 个答案: