Question

这里我附加了演示文件，我面临的问题是呈现JSON字符串以在HTML表单中呈现该响应以及该日期类型和复选框。我的json回复是

{"data":
[
{"scope":"global","name":"isMarried","value":true,"type":"boolean"},
{"scope":"global","name":"birthdate","value":"2014-06-24T07:00:00Z","type":"date"},
{"scope":"global","name":"lastname","value":"Test","type":"string"},
{"scope":"global","name":"firstname","value":"Test","type":"string"},
{"scope":"global","name":"education","value":"mba","type":"string"}
]
}

因为我还提出了类型：你可以在附加文件中看到的字符串和标题。

但我面临类型问题：日期和复选框..我们可以在html表单中呈现

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="ISO-8859-1">
    <meta charset="utf-8" />
    <title></title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0" />
    <!-- !CSS -->
    <link href="css/html5reset.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.dform-1.1.0.js" type="text/javascript"></script>

    <title>Insert title here</title>

    < script type="text/javascript">
    $(function() {

    $.dform.addType("string", function(options) {
        // Return a new button element that has all options that
        // don't have a registered subscriber as attributes
        return $("<input>").dform('attr', options);
    });

    $.dform.addType("boolean", function(options) {
        // Return a new button element that has all options that
        // don't have a registered subscriber as attributes
        return $("<checkbox>").dform('value', options);
    });

    $.dform.subscribe("name", function(options, type) {
        // Just run if the type is a hellobutton
        if(type === "string") {

                var ops = {};
                if (typeof (options) === "string") {
                    ops["html"] = options;
                } else {
                    $.extend(ops, options);
                }
                ops.type = "label";
                if (this.attr("id")) {
                    ops["for"] = this.attr("id");
                }
                var label = $($.dform.createElement(ops));
                if (type === "checkbox" || type === "radio") {
                    this.parent().append($(label));
                } else {
                    label.insertBefore(this);
                }
                label.dform('run', ops);
            }
            });
        // Generate a form
        $("#myform").dform({
        "action" : "index.html",
        "method" : "get",
        "html" :
        [

            {
                "scope":"global",
                "name":"details",
                "value":"Looks very interesting!",
                "type":"string"
            },
            {
                "scope":"global",
                "name":"notEnoughInformation",
                "value":false,
                "type":"boolean"
            },
            {
                "scope":"global",
                "name":"initiator",
                "value":"kermit",
                "type":"string"
            },
            {
                "name": "birthdate"
                "type": "date"
                'value": "2014-06-24T07:00:00Z"
                "scope": "global"
            },
            {
                "type" : "submit",
                 "value" : "Login"
               }
                ]
        });
    });


</script>
<form id="myform"></form>
</head>
<body>

</body>
</html>

jQuery.dForm自定义数据类型的日期和复选框

0 个答案: