html 表单设计器,form-designer.html

layui表单设计器

安宇士表单设计器

常用控件

单行文本框

下拉框

复选框

分割线

容器控件

栅格布局

预览

代码

var provider = {};

layui.use(["form", "layer", "jquery", "anyushi"], function() {

var $ = layui.jquery;

var form = layui.form;

var layer = layui.layer;

var anyushi = layui.anyushi;

var ctl = document.getElementById("ctlMenus");

var sortable = new Sortable(ctl, {

group: {

name: 'shared',

pull: 'clone',

put: false

},

sort: false,

draggable: ".ays-ctrl-menu",

// 结束拖拽

onEnd: function( /**Event*/ evt) {

evt.item.style.width = "138px";

},

// 拖拽移动的时候

onMove: function( /**Event*/ evt, /**Event*/ originalEvent) {

evt.dragged.style.width = "100%";

}

});

var mainContainer = document.getElementById("mainContainer");

new Sortable(mainContainer, {

group: {

name: 'shared',

pull: true

},

//draggable: '.ays-ctrl,.ays-ctrl-container',

handle: '.widget-view-drag',

animation: 150,

onAdd: function(evt /**Event*/ ) {

addCtrl(evt);

}

});

var loadSortable = function(element) {

new Sortable(element, {

group: {

name: 'shared',

pull: true

},

//draggable: '.ays-ctrl,.ays-ctrl-container',

handle: '.widget-view-drag',

animation: 150,

onAdd: function(evt /**Event*/ ) {

addCtrl(evt);

}

});

}

provider.loadSortable = loadSortable;

var addCtrl = function(evt) {

var item = evt.item;

var mode = item.getAttribute("mode");

if (mode) {

var newElem = anyushi.factory.instance(item.getAttribute("mode"));

item.parentNode.replaceChild(newElem, item);

var containers = newElem.getElementsByClassName("ays-ctrl-container")

for (i=0;i

loadSortable(containers[i]);

}

form.render();

}

}

$("#btnPrev").click(function() {

var index = layer.open({

type: 1,

title: "表单预览",

content: buidHtml(),

maxmin: true,

area: ['700px', '500px'],

success: function(){

form.render();

}

});

layer.full(index);

})

$("#btnCodePrev").click(function() {

var index = layer.open({

type: 2,

title: "代码预览",

content: "code-prev.html",

//area: ['100%', '100%'],

success: function(layero, index) {

layer.full(index);

var iframeWin = window[layero.find('iframe')[0]['name']];

//layer.iframeAuto(index);

iframeWin.setCode(buidHtml());

},

});

})

var buidHtml = function() {

var mainContainer = $('#mainContainer').clone();

mainContainer.find('.ays-ctrl').removeClass('ays-ctrl');

mainContainer.find('.ays-ctrl-container').removeClass('ays-ctrl-container');

mainContainer.find('.widget-view-drag').remove();

mainContainer.find('.widget-view-action').remove();

mainContainer.find('.widget-view-ctrl-action').removeClass('widget-view-ctrl-action');

mainContainer.find('input').removeAttr("readonly");

mainContainer.find('select').removeAttr("disabled");

mainContainer.find('.layui-form-select').remove();

mainContainer.find('checkbox').removeAttr("disabled");

mainContainer.find('.layui-form-checkbox').remove();

mainContainer.removeAttr('id');

mainContainer.addClass('ays-form-prev');

var formDiv = $('

formDiv.append(mainContainer);

return formDiv.html();

}

form.render();

});

一键复制

编辑

Web IDE

原始数据

按行查看

历史