基本信息
源码名称:js 表单生成器 实例源码下载(自定义表单)
源码大小:0.40M
文件格式:.zip
开发语言:js
更新时间:2017-07-13
   友情提示:(无需注册或充值,赞助后即可获取资源下载链接)

     嘿,亲!知识可是无价之宝呢,但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下,绝对物超所值哦!如有下载和支付问题,请联系我们QQ(微信同号):813200300

本次赞助数额为: 2 元 
   源码介绍

表单生成器,拖拽自定义表单,生成表单html以及表单控件json

define([
    "jquery", "underscore", "backbone"
    , "collections/snippets", "collections/my-form-snippets"
    , "views/tab", "views/my-form"
    , "text!data/form.json"
    , "text!templates/app/render.html",
], function ($, _, Backbone
    , SnippetsCollection, MyFormSnippetsCollection
    , TabView, MyFormView
    , formJSON
    , renderTab) {
    return {
        initialize: function () {

            //Bootstrap tabs from json.
            new TabView({
                title: "Input"
                , collection: new SnippetsCollection(JSON.parse(formJSON))
            });
            /*new TabView({
             title: "Rendered"
             , content: renderTab
             });*/

            //Make the first tab active!
            $("#components .tab-pane").first().addClass("active");
            $("#formtabs li").first().addClass("active");
            // Bootstrap "My Form" with 'Form Name' snippet.
            new MyFormView({
                title: "Original"
                , collection: new MyFormSnippetsCollection()
            });

// 【Text Input】text:type,id,label,content,description,required
// 【Text Area】textarea:type,id,labe,content
// 【Multiple Radios】radio:type,id,label,content(array),require[,selectedIndex]
// 【Multiple Checkboxes】checkbox:type,id,label,content(array),require[,selectedArray]
// 【Select Basic】select:type,id,label,content(array)[,selectedIndex]
// 【File Button】file:type,id,label

            var renderFormData = function() {

                window.backboneFormData = [];
                var data = JSON.parse(backboneModels);

                data && data.forEach(function(val, index, arr) {
                    var fields = val.fields;
                    var item = {
                        id: fields.id.value,
                        label: fields.label.value
                    };
                    if (val.title == 'Text Input') {
                        item.type = 'text';
                        item.content = fields.placeholder.value;
                        item.description = fields.helptext.value;
                        item.required = fields.required.value;
                    } else if (val.title == 'Text Area') {
                        item.type = 'textarea';
                        item.content = fields.textarea.value;
                    } else if (val.title == 'Multiple Radios') {
                        item.type = 'radio';
                        item.content = fields.radios.value;
                        item.required = fields.required.value;
                    } else if (val.title == 'Multiple Checkboxes') {
                        item.type = 'checkbox';
                        item.content = fields.checkboxes.value;
                        item.required = fields.required.value;
                    } else if (val.title == 'Select Basic') {
                        item.type = 'select';
                        item.content = fields.options.value;
                    } else if (val.title == 'File Button') {
                        item.type = 'file';
                    }

                    backboneFormData.push(item);
                })

                console.log(JSON.stringify(backboneFormData));
                // console.log($('#target').html())
            };
            $('#btnSeeFormData').on('click', renderFormData)
        }
    }
});