代码拉取完成,页面将自动刷新
同步操作将从 谁家没一个小强/ayq-layui-form-designer 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
中文 | English
Classic modular front-end UI framework
1. 替换了以前的以文字来展示组件
2. 合并了主要的js,以前需要维护2份js(设计和视图的js)
3. 把组件数据单独提出到formField.js,方便组件的维护
4. 优化了主要js的核心方法,用户只需要关注编写组件的渲染(具体查看下面优化的设计代码),方便用户进行2次开发
5. 添加了组件模板功能
6. 添加了可编辑一些全局表单属性的功能(更新后会有)
1. 支持layui的扩展组件
2. 开发表格布局组件,发现这个没有现成的,需要用layui来扩展开发
3. 方便用户进行二次开发,主要是我参考了其他的表单设计,发现二次开发效果很差,源码改不动。
4. 支持通过formDesigner对象的方法满足用户使用需求
5. 支持通过url获取远程数据动态显示组件(如下拉框、编辑器、图片等)
6. 支持定制布局和背景
http://www.anyongqiang.com/HandwrittenSignature/index.html
基于layui的表单设计器
var render = formDesigner.render({
data:[],//表单设计数据
elem:'#formdesigner'
formData: {"textarea_1":"123",
"input_2":"123",
"password_3":"123"}//要回显的表单数据
, globalDisable:false //全局禁用属性
, viewOrDesign:false//是渲染设计页面还是视图页面
, formDefaultButton:true//是否添加默认按钮
});
//重新渲染数据
render.reload(options)
//获取相关配置信息
render.getOptions()
//获取表单设计数据
render.getData()
//获取外部编辑器对象
render.geticeEditorObjects()
//重新渲染数据
render.reload(options)
//获取相关配置信息
render.getOptions()
//获取表单设计数据
render.getData()
//获取外部编辑器对象
render.geticeEditorObjects()
//获取上传图片的id与上传路径
render.getImages()
//数据案例 select 对应文件对象的id uploadUrl对应文件的上传路径
[{select: "imageimage_2",uploadUrl: ""}]
//获取上传文件的id与上传路径
render.getFiles()
//数据案例 select 对应文件对象的id uploadUrl对应文件的上传路径
[{select: ""filefile_1"",uploadUrl: ""}]
//获取表单数据
**
注意: 当前方法会避开校验规则,最好放在表单提交里面
form.on('submit(demo1)', function(data){});
**
render.getFormData()
//回显表单数据
render.setFormData(json)
//全局禁用表单
render.globalDisable()
//全局启用表单
render.globalNoDisable()
**
说明: 这些方法有2个组件不受控制(文件组件和图片组件),
我把这两个组件通过方法单独提出来,因为文件上传的方式比较多,
提出来让使用者自己去定义和实现自己的文件上传方式,
具体的案例在preview.html里面已经写好,你们自己参考
**
Class.prototype.components = {
date: {
/**
* 根据json对象生成html对象
* @param {object} json 当前组件的json属性
* @param {boolean} selected 是否被选中
* @param {object} elem 表单面板jquery对象
* @param {object} that 实例对象
* */
render: function (json, selected,elem,that) {
if (selected === undefined) {
selected = false;
}
var _disabledClass = json.disabled ? ' layui-disabled' : '';
var _disabledStyle = json.disabled ? ' pointer-events: none;' : '';
var _required = json.required ? 'required' : '';
var _html = '<div id="{0}" class="layui-form-item {2}" data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
_html += '<label class="layui-form-label {0}" style="width: {3}px;"><span style="color:red;">{2}</span>{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label,json.required ? '*' : '',json.labelWidth);
_html += '<div class="layui-input-block" style="width:calc({0} - {1}px);margin-left: {1}px;">'.format(json.width,json.labelWidth);
_html += '<input id="{0}" name="{0}" lay-verify="{3}" class="layui-input icon-date widget-date {1}" style="line-height: 40px;{2}"></input>'.format(json.tag + json.id,_disabledClass,_disabledStyle,_required);
_html += '</div>';
_html += '</div>';
elem.append(_html);
laydate.render({
elem: '#' + json.tag + json.id,
btns: ['confirm'],
type: json.dateType,
format: json.dateFormat,
value: json.dateDefaultValue,
min: json.dataMinValue,
max: json.dataMaxValue,
});
},
/**
* 根据json对象更新html对象
* @param {object} json 变更后的json属性
* @param {object} that 实例对象
* */
update: function (json,that) {
var _disabledClass = json.disabled ? ' layui-disabled' : '';
var _disabledStyle = json.disabled ? ' pointer-events: none;' : '';
var _required = json.required ? 'required' : '';
var $block = $('#' + json.id + ' .layui-input-block');
var $label = $('#' + json.id + ' .layui-form-label');
$block.empty();
$label.empty();
$block.css("margin-left",json.labelWidth);
$label.css("width",json.labelWidth);
if (json.required) {
$label.append('<span style="color:red;">*</span>');
}
$label.append(json.label + ":");
$block.css({width: 'calc({0} - {1}px)'.format(json.width,json.labelWidth)});
var _html = '<input id="{0}" name="{0}" lay-verify="{3}" class="layui-input icon-date widget-date {1}" style="line-height: 40px;{2}"></input>'.format(json.tag + json.id,_disabledClass,_disabledStyle,_required);
$block.append(_html);
laydate.render({
elem: '#' + json.tag + json.id,
btns: ['confirm'],
type: json.dateType,
format: json.dateFormat,
value: json.dateDefaultValue,
min: json.dataMinValue,
max: json.dataMaxValue,
});
},
/**
* 根据components组件对象获取组件属性
* @param {object} id 所属组件id
* @param {object} index 所属对象组件索引
* @param {object} that 实例对象
* */
jsonData: function (id, index, that) {
//分配一个新的ID
var _json = JSON.parse(JSON.stringify(formField.components.date));
_json.id = id;
_json.index = index;
return _json;
},
/**
* 根据 json 对象显示对应的属性
* @param {object} json 当前组件的json属性
* @param {object} that 实例对象
* */
property: function (json,that) {
that.renderCommonProperty(json); //根据 json 对象获取对应的属性的html
that.initCommonProperty(json); //初始化 json 对象获取对应的属性
},
/**
* 根据json对象生成html文本
* @param {object} json 当前组件的json属性
* @param {boolean} selected 是否被选中
* @param {object} that 实例对象
* */
generateHtml: function (json,selected,that) {
if (selected === undefined) {
selected = false;
}
var _disabledClass = json.disabled ? ' layui-disabled' : '';
var _disabledStyle = json.disabled ? ' pointer-events: none;' : '';
var _required = json.required ? 'required' : '';
var _html = '<div id="{0}" class="layui-form-item {2}" data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
_html += '<label class="layui-form-label {0}" style="width: {3}px;"><span style="color:red;">{2}</span>{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label,json.required ? '*' : '',json.labelWidth);
_html += '<div class="layui-input-block" style="width:calc({0} - {1}px);margin-left: {1}px;">'.format(json.width,json.labelWidth);
_html += '<input id="{0}" name="{0}" lay-verify="{3}" class="layui-input icon-date widget-date {1}" style="line-height: 40px;{2}"></input>'.format(json.tag + json.id,_disabledClass,_disabledStyle,_required);
_html += '</div>';
_html += '</div>';
return _html;
},
/**
* 根据json对象生成js文本
* @param {object} json 变更后的json属性
* @param {object} that 实例对象
* */
generateScript:function (json,that) {
var scriptHtmlCode = '';
scriptHtmlCode += ['laydate.render({'
, 'elem: "#' + json.tag + json.id + '" ,'
, 'type:"' + json.datetype + '",'
, 'format:"' + json.dateformat + '",'
, 'value:"' + json.dateDefaultValue + '",'
, 'min:"' + json.dataMinValue + '",'
, 'max:"' + json.dataMaxValue + '"});'].join('');
return scriptHtmlCode;
}
},
}
formField.js
var formField = {
components : {
date: {
id:'-1',
index:'-1',
label: "日期",
tag: "date",
tagIcon: 'date',
labelWidth: 110,
width:"100%",
clearable: true,
maxlength: null,
dateDefaultValue: '2021-05-25',
dateType: "date",//year month date time datetime
range: false,
dateFormat: "yyyy-MM-dd",
isInitValue: false,
dataMaxValue: "2088-12-31",
dataMinValue: "1900-01-01",
trigger: null,//自定义弹出控件的事件
position: "absolute",//fixed,static,abolute
theme: "default",
mark: null,//每年的日期 {'0-9-18': '国耻'} 0 即代表每一年
showBottom: true,
disabled: false,
required: true,
document: '',
},
}
}
参数 | 类型 | 说明 | 示例值 |
---|---|---|---|
elem | String | 指定原始 table 容器的选择器,方法渲染方式必填 | "#elem" |
data | Array | 直接赋值数据 | [{},{},...] |
formData | Array | 回显的表单数据 | [{},{},...] |
参数 | 类型 | 说明 | 示例值 |
---|---|---|---|
id | String | 指定组件标识(唯一),表单提交字段name值 | "field" |
label | String | 文本框标题 | "姓名" |
tag | String | 表单类型 | "input" |
placeholder | String | placeholder | "请输入" |
defaultValue | object | 组件默认值 | "姓名" |
width | String | 组件宽度 | "100%" |
labelWidth | String | 文本框宽度 | "250px" |
readonly | Boolean | 只读 | true,false |
disabled | Boolean | 禁用 | true,false |
required | Boolean | 必填 | true,false |
columns | number | 栅格布局列数 | true,false |
maxValue | object | 最大值 | "" |
minValue | object | 最小值 | "" |
expression | String | 验证 | "email" |
stepValue | number | 滑块步长 | 2 |
isInput | Boolean | 滑块显示输入框 | true,false |
datetype | String | 日期类型 | "时间选择器" |
dateformat | String | 日期格式 | "yyyy-MM-dd" |
rateLength | number | 星星个数 | 5 |
interval | number | 轮播间隔毫秒 | 3000 |
autoplay | Boolean | 轮播自动切换 | true,false |
anim | object | 切换方式 | {text: '左右切换', value: 'default'} |
arrow | object | 切换箭头 | {text: '悬停显示', value: 'hover'} |
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。