Question

我正在建立一个网站，以帮助我的团队的运营商生成数据源配置。

由于需要处理许多选项。我设计了一个渲染页面的通用解决方案：使用一些规则将配置文件（可能是xml或json格式）解析为html。也许就像下面这样：

{
    "data_type": {
        "title": "Data type",
        "description": "Select what type do you want.",
         "fields": [{
             "title": "promotion",
             "description": "data from promotion center"
             "type": "redio",
             "default": true,
             "value": "p",
             "name": "dtype"
         }, {
             "title": "brands",
             "description": "data from brands center"
             "type": "redio",
             "default": false,
             "value": "b",
             "name": "dtype"
         }]
    }
}

然后它可以解析为：

<div class="form-control-group">
    <h3>Data type</h3>
    <p>Select what type do you want.</p>
    <div class="form-control-filed">
        <input type="redio" name="dtype" value="p" show="dtype" checked />
        <p>data from promotion center</p>
    </div>
    <div class="form-control-filed">
        <input type="redio" name="dtype" value="b" />
        <p>data from brands center</p>
    </div>
</div>

这一步很容易实现。但是因为有些情况喜欢。当我点击redio A时，我想隐藏复选框B.在取消选中Checkbox C后，我想显示输入D.我不知道如何设计配置文件来描述不同字段的逻辑。

所以，关键是，我想用json片段解析html。然后可能有一些符号来标记每个表单字段的行为，我可以使用我的常用js绑定事件来处理显示/隐藏，焦点/模糊或其他逻辑。与属性show一样，我可以使用我的常用js函数来检测它并将click事件绑定到该单选按钮，并在单击此单选按钮后显示带有name="dtype"的元素。

我不确定这是否是一个很好的解决方案以及如何设计合理的json结构。

希望任何人都可以提供一些建议。提前谢谢。

Answer 1

我已经放弃了这个案子。根据我的要求，我使用json文件来配置表单字段的信息，并使用行为定义来描述显示/隐藏功能。

{
    "xxx": {
        "title": "Price mode",
        "description": "group_description",
        "fields": [{
            "title": "",
            "type": "select",
            "name": "price_mode",
            "value": [{
                "text": "Store with product",
                "value": 1,
                "default": true,
                "behaviors": {
                    "show": "name1|name2|name3",
                    "hide": ""
                }
            }, {
                "text": "Product",
                "value": 2,
                "default": false,
                "behaviors": {
                    "show": "",
                    "hide": "name1|name2|name3"
                }
            }],
            "require": true,
            "rule": ""
        }]
    }
}

服务器端的代码将解析此配置并呈现为具有特殊属性存储行为定义的html代码段，然后使用javascript函数处理这些属性并在执行诸如单击单选按钮或更改选择列表的值之后关心行为。

使用配置文件自动生成表单

1 个答案: