自动根据配置生成表单


使用方法

//表单渲染
generateForm([
    { label: 'CatalogName', name: 'CatalogName', defaultValue: '', type: 'text' },
    { label: 'CatalogDescription', name: 'CatalogDescription', defaultValue: '', type: 'text' },
    { label: 'CatalogTarget', name: 'CatalogTarget', defaultValue: '', type: 'text' },
    { label: 'CatalogStatus', name: 'CatalogStatus', defaultValue: '1', type: 'radio', radios: [{ value: '1', label: '启用' }, { value: '0', label: '禁用' }] },
    { label: 'CatalogPId', name: 'CatalogPId', defaultValue: '0', type: 'select', options: [], mode: 'local' }],
    $('#CatalogForm').get(0));

效果图

完整代码

/// <reference path="jquery-2.1.4.min.js" />



function getToday() {
    var today = new Date();
    return today.getFullYear() + '年' + today.getMonth() + '月' + today.getDate() + '日';
}



function genText(field) {
    var tpl =
        '<div class="form-group has-feedback">' +
            '<label class="control-label" for="' + field['name'] + '">' + field['label'] + '</label>' +
            '<div class="input-group">' +
                '<span class="input-group-addon">@@</span>' +
                '<input value="' + field['defaultValue'] + '" type="text" class="form-control" name="' + field['name'] + '" id="' + field['name'] + '" aria-describedby="' + field['label'] + '">' +
            '</div>' +
            '<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>' +
            '<span id="' + field['name'] + 'Status" class="sr-only">(success)</span>' +
        '</div>';

    return tpl;
}

function genPassword(field) {
    var tpl =
        '<div class="form-group has-feedback">' +
            '<label class="control-label" for="' + field['name'] + '">' + field['label'] + '</label>' +
            '<div class="input-group">' +
                '<span class="input-group-addon">@@</span>' +
                '<input value="' + field['defaultValue'] + '" type="password" class="form-control" name="' + field['name'] + '" id="' + field['name'] + '" aria-describedby="' + field['label'] + '">' +
            '</div>' +
            '<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>' +
            '<span id="' + field['name'] + 'Status" class="sr-only">(success)</span>' +
        '</div>';

    return tpl;
}

function genSelect(field) {
    var tpl =
        '<div class="form-group has-feedback">' +
            '<label class="control-label" for="' + field['name'] + '">' + field['label'] + '</label>' +
            '<div class="input-group">' +
                '<span class="input-group-addon">@@</span>' +
                '<select class="form-control" name="' + field['name'] + '" id="' + field['name'] + '" aria-describedby="' + field['label'] + '">';

    if (field['mode'] === 'local') {
        $(field['options']).each(function (index, option) {
            tpl +=
                '<option value="' + option['value'] + '"' + (option['selected'] || '') + '>' + option['text'] + '</option>';
        });

        tpl +=
        '</select>' +
            '</div>' +
            '<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>' +
            '<span id="' + field['name'] + 'Status" class="sr-only">(success)</span>' +
        '</div>';

        return tpl;
    }
    else {

        $.getJSON(field['url']).then(function (data) {
            console.log(data);
            tpl +=
            '</select>' +
                '</div>' +
                '<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>' +
                '<span id="' + field['name'] + 'Status" class="sr-only">(success)</span>' +
            '</div>';

            return tpl;
        });

    }
}

function genCheckBox(field) {
    var tpl =
        '<div class="form-group has-feedback">' +
            '<label class="control-label" for="' + field['name'] + '">' + field['label'] + '</label>' +
            '<div class="input-group">';

    $(field['checkboxs']).each(function (index, checkbox) {
        tpl +=
            '<label class="checkbox-inline"><input type="checkbox" id="' + field['name'] + index + '" name="' + field['name'] + '" value="' + checkbox['value'] + '" />' + checkbox['label'] + '</label>';
    });

    tpl +=
            '</div>' +
            '<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>' +
            '<span id="' + field['name'] + 'Status" class="sr-only">(success)</span>' +
        '</div>';

    return tpl;
}

function genRadio(field) {
    var tpl =
        '<div class="form-group has-feedback">' +
            '<label class="control-label" for="' + field['name'] + '">' + field['label'] + '</label>' +
            '<div class="input-group">';

    $(field['radios']).each(function (index, radio) {
        tpl +=
            '<label class="radio-inline"><input type="radio" id="' + field['name'] + index + '" name="' + field['name'] + '" value="' + radio['value'] + '" />' + radio['label'] + '</label>';
    });

    tpl +=
            '</div>' +
            '<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>' +
            '<span id="' + field['name'] + 'Status" class="sr-only">(success)</span>' +
        '</div>';

    return tpl;
}

function genDateBox(field) {
    var tpl =
        '<div class="form-group has-feedback">' +
            '<label class="control-label" for="' + field['name'] + '">' + field['label'] + '</label>' +
            '<div class="input-group ">' +
            '<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span><input type="text" class="form-control" value="' + (field['defaultValue'] || getToday()) + '" data-provide="datepicker">' +
            '</div>' +
            '<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>' +
            '<span id="' + field['name'] + 'Status" class="sr-only">(success)</span>' +
        '</div>';

    //$('.date').datepicker({ showOnFocus: true });

    return tpl;
}

function genSlider(field) {
    var tpl =
        '<div class="form-group has-feedback">' +
            '<label class="control-label" for="' + field['name'] + '">' + field['label'] + '</label>' +
            '<div class="input-group ">' +
            '<input type="text" class="form-control sliderss" data-slider-ticks="[0, 100, 200, 300, 400]" data-slider-ticks-snap-bounds="30" data-slider-ticks-labels="[\'$0\', \'$100\', \'$200\', \'$300\', \'$400\']">' +
            '</div>' +
            '<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>' +
            '<span id="' + field['name'] + 'Status" class="sr-only">(success)</span>' +
        '</div>';
    //console.log($(tpl).find('.sliderss').length)
    //$(tpl).find('.sliderss').slider({});

    return tpl;
}

function genEditor(field) {

    var tpl =
        '<div class="form-group has-feedback">' +
            '<label class="control-label" for="' + field['name'] + '">' + field['label'] + '</label>' +
            '<div class="input-group" style="width:100%;">' +
            '<input  id="' + field['name'] + '" name="' + field['name'] + '" type="hidden" />' +
            '<script type="text/plain" id="UMEditor" style="height:240px;">' +
            '</script>' +
            '</div>' +
            '<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>' +
            '<span id="' + field['name'] + 'Status" class="sr-only">(success)</span>' +
        '</div>';
    //console.log($(tpl).find('.sliderss').length)
    //$(tpl).find('.sliderss').slider({});

    return tpl;
}

function genMaskEditor(field) {

    /*
    <input data-inputmask="'alias': 'date'" />
    <input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
    <input data-inputmask="'mask': '99-9999999'" />
    <input id="example1" data-inputmask-clearmaskonlostfocus="false" />
    <input id="example2" data-inputmask-regex="[a-za-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?" />
    */
    var tpl =
        '<div class="form-group has-feedback">' +
            '<label class="control-label" for="' + field['name'] + '">' + field['label'] + '</label>' +
            '<div class="input-group">' +
                '<span class="input-group-addon">@@</span>' +
                '<input data-inputmask="'+field['mask']+'" value="' + field['defaultValue'] + '" type="text" class="form-control" name="' + field['name'] + '" id="' + field['name'] + '" aria-describedby="' + field['label'] + '">' +
            '</div>' +
            '<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>' +
            '<span id="' + field['name'] + 'Status" class="sr-only">(success)</span>' +
        '</div>';

    return tpl;
}

//type support text,date,select,radio,checkbox,password
//fields like [{label:'',name:'',default:'value', type:'text'}]
function generateForm(fields, form, callback) {
    //var $obj = $(obj);
    fields = fields || [];

    $(fields).each(function (index, field) {
        var row = '';
        switch ($(this).attr('type')) {
            case 'select':
                row = genSelect(field);
                break;
            case 'slider':
                row = genSlider(field);
                break;
            case 'date':
                row = genDateBox(field);
                break;
            case 'checkbox':
                row = genCheckBox(field);
                break;
            case 'radio':
                row = genRadio(field);
                break;
            case 'editor':
                row = genEditor(field);
                break;
            case 'password':
                row = genPassword(field);
                break;
            case 'mask':
                row = genMaskEditor(field);
                break;
            case 'text':
            default:
                row = genText(field);
                break;
        }
        $(form).append(row);
    });

    if (callback) {
        callback();

    }

}

function resetForm(form, flag) {
    if (flag || true) {
        form.trigger('reset');
    }
    form.find('.form-group').removeClass('has-error').removeClass('has-success');
    form.find('.form-control-feedback').removeClass('glyphicon-remove').removeClass('glyphicon-ok');
}

知识共享许可协议
《自动根据配置生成表单》 常伟华 创作。
本作品采用知识共享署名-相同方式共享 4.0 国际许可协议 | 3.0 中国大陆许可协议进行许可。

站内公告

A PHP Error was encountered

Severity: Core Warning

Message: PHP Startup: zip: Unable to initialize module Module compiled with module API=20060613 PHP compiled with module API=20090626 These options need to match

Filename: Unknown

Line Number: 0

Backtrace: