<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Layui</title>
<link rel="stylesheet" href="./layui/css/layui.css" />
<link rel="stylesheet" href="./ayq/modules/formDesigner.css" />
<link rel="stylesheet" href="./ayq/modules/cron.css" />
<link rel="stylesheet" href="./ayq/modules/labelGeneration.css" />
<style>
</style>
</head>
<body >
<div >
<div>
<button type="button" class="layui-btn" id="importJsonData">导入数据</button>
<button type="button" class="layui-btn layui-btn-danger" id="globalDisable">禁用表单</button>
<button type="button" class="layui-btn layui-btn-normal" id="globalNoDisable">启用表单</button>
<button type="button" class="layui-btn layui-btn-warm" id="getFormData" >获取表单数据</button>
</div>
<div id="testdemo" style="margin: 20px 20px;padding: 20px 20px;border: 1px solid #009688;">
</div>
</div>
<div class="importjsoncodedataview" style="display: none;">
<textarea class="site-demo-text" id="import-json-code-view"></textarea>
<a href="javascript:;" class="layui-btn layui-btn-normal" style="margin-right:20px;" id="import-json-code-data">导入数据</a>
</div>
<div class="getFormData" style="display: none;">
<textarea class="site-demo-text" id="get-form-data"></textarea>
</div>
<script type="text/javascript" src="./layui/layui.js"></script>
<script type="text/javascript" src="./ayq/modules/Sortable/Sortable.js"> </script>
<script type="text/javascript" src="./ayq/modules/iceEditor/iceEditor.js"></script>
<script>
var demojs = [];
//JavaScript代码区域
layui.config(
{base: './ayq/modules/'}).use(['formDesigner', 'form','layer','upload'], function () {
var layer = layui.layer;
var $ = layui.jquery;
var upload = layui.upload;
var index = layui.index;
var formDesigner = layui.formDesigner;
var form = layui.form;
var render;
if (window.localStorage.getItem('layui_form_json') !== undefined) {
demojs = JSON.parse(window.localStorage.getItem('layui_form_json'));
render = formDesigner.render({
elem: '#testdemo',
data: demojs,
viewOrDesign:true
//formData: {"textarea_1":"123","input_2":"123","password_3":"123"}
});
var images = render.getImages();
for (var i = 0; i < images.length; i++) {
upload.render({
elem: '#' + images[i].select
, url: '' + images[i].uploadUrl + ''
, multiple: true
, before: function (obj) {
layer.msg('图片上传中...', {
icon: 16,
shade: 0.01,
time: 0
})
}
, done: function (res) {
layer.close(layer.msg());//关闭上传提示窗口
//上传完毕
$('#uploader-list-' + item.id).append(
'<div id="" class="file-iteme">' +
'<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>' +
'<img style="width: 100px;height: 100px;" src=' + res.data.src + '>' +
'<div class="info">' + res.data.title + '</div>' +
'</div>'
);
}
});
}
var filesData = render.getFiles();
for (var i = 0; i < filesData.length; i++) {
upload.render({
elem: '#' + filesData[i].select
, elemList: $('#list-' + filesData[i].select) //列表元素对象
, url: '' + filesData[i].uploadUrl + ''
, accept: 'file'
, multiple: true
, number: 3
, auto: false
, bindAction: '#listAction-' + filesData[i].select
, choose: function (obj) {
var that = this;
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function (index, file, result) {
var tr = $(['<tr id="upload-' + index + '">'
, '<td>' + file.name + '</td>'
, '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
, '<td><div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
, '<td>'
, '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
, '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
, '</td>'
, '</tr>'].join(''));
//单个重传
tr.find('.demo-reload').on('click', function () {
obj.upload(index, file);
});
//删除
tr.find('.demo-delete').on('click', function () {
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
});
that.elemList.append(tr);
element.render('progress'); //渲染新加的进度条组件
});
}
, done: function (res, index, upload) { //成功的回调
var that = this;
//if(res.code == 0){ //上传成功
var tr = that.elemList.find('tr#upload-' + index)
, tds = tr.children();
tds.eq(3).html(''); //清空操作
delete this.files[index]; //删除文件队列已经上传成功的文件
return;
//}
this.error(index, upload);
}
, allDone: function (obj) { //多文件上传完毕后的状态回调
console.log(obj)
}
, error: function (index, upload) { //错误回调
var that = this;
var tr = that.elemList.find('tr#upload-' + index)
, tds = tr.children();
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
, progress: function (n, elem, e, index) {
element.progress('progress-demo-' + index, n + '%'); //执行进度条。n 即为返回的进度百分比
}
});
}
}
//监听提交
form.on('submit(demo1)', function(data){
var json = render.getFormData();
console.log(json);
layer.msg( JSON.stringify(json), {icon: 6});
/*$.ajax({
url:"/activiti-manager/addActivitiManagera",
type:"POST",
data:temp,
contentType:"application/json",
dataType: "json",
success:function(res){
alert(res.message);
}
});*/
return false;
});
//导入数据
$('#importJsonData').on('click', function () {
layer.open({
type: 1
, title: 'JSON模板数据导入'
, id: 'Lay_layer_importjsoncodeview'
, content: $('.importjsoncodedataview')
, area: ['800px', '640px']
, shade: false
, resize: false
, success: function (layero, index) {
}
, end: function () {
$('.importjsoncodeview').css("display","none")
}
});
});
//导入数据
$('#getFormData').on('click', function () {
var _value = render.getFormData();
$('#get-form-data').val(JSON.stringify(_value,null,4));
layer.open({
type: 1
, title: 'JSON模板数据导入'
, id: 'Lay_layer_importjsoncodeview'
, content: $('.getFormData')
, area: ['800px', '640px']
, shade: false
, resize: false
, success: function (layero, index) {
}
, end: function () {
$('.getFormData').css("display","none")
}
});
});
$('#import-json-code-data').on('click', function () {
var _value = document.getElementById("import-json-code-
基于layui的表单设计器 （105个子文件） 
layui.css 80KB layer.css 14KB formDesigner.css 14KB laydate.css 8KB cron.css 4KB code.css 2KB HandwrittenSignature.css 1KB labelGeneration.css 72B iconfont.eot 46KB
wq_thumb.gif 10KB k_thumb.gif 8KB heia_thumb.gif 7KB mb_thumb.gif 7KB gza_thumb.gif 6KB loading-0.gif 6KB kl_thumb.gif 6KB tootha_thumb.gif 5KB crazya_thumb.gif 5KB cry.gif 5KB x_thumb.gif 5KB 88_thumb.gif 5KB kbsa_thumb.gif 4KB ldln_thumb.gif 4KB yw_thumb.gif 4KB bz_thumb.gif 4KB yx_thumb.gif 4KB lovea_thumb.gif 4KB zy_thumb.gif 4KB tza_thumb.gif 4KB t_thumb.gif 4KB money_thumb.gif 4KB bs_thumb.gif 4KB hatea_thumb.gif 4KB sleepya_thumb.gif 3KB lazu_thumb.gif 3KB shamea_thumb.gif 3KB sada_thumb.gif 3KB angrya_thumb.gif 3KB laugh.gif 3KB dizzya_thumb.gif 3KB bba_thumb.gif 3KB zhh_thumb.gif 3KB yhh_thumb.gif 3KB bs2_thumb.gif 3KB cza_thumb.gif 3KB cake.gif 3KB come_thumb.gif 3KB unheart.gif 3KB h_thumb.gif 3KB sk_thumb.gif 2KB sleepa_thumb.gif 2KB qq_thumb.gif 2KB hearta_thumb.gif 2KB cool_thumb.gif 2KB sad_thumb.gif 2KB cj_thumb.gif 2KB good_thumb.gif 2KB ye_thumb.gif 2KB z2_thumb.gif 2KB sweata_thumb.gif 2KB no_thumb.gif 2KB sw_thumb.gif 2KB sb_thumb.gif 2KB loading-2.gif 2KB hsa_thumb.gif 1KB nm_thumb.gif 1KB ok_thumb.gif 777B loading-1.gif 701B
preview.html 8KB editorMenu.html 2KB index.html 2KB handwrittenSignature.html 1KB layui.js 284KB formDesigner.js 283KB Sortable.js 118KB iceEditor.js 98KB xmSelect.js 81KB HandwrittenSignature.js 43KB Sortable.min.js 42KB cron.js 29KB iconPicker.js 22KB formField.js 20KB staticField.js 18KB jsformat.js 17KB htmlformat.js 16KB labelGeneration.js 10KB numberInput.js 8KB config.js 698B LICENSE 9KB
3.PNG 132KB 2.PNG 89KB 1.PNG 88KB 4.PNG 74KB banner2.PNG 28KB banner1.PNG 24KB banner3.PNG 24KB icon.png 11KB icon-ext.png 6KB
iconfont.svg 299KB iconfont.ttf 45KB共 105 条
- 1
- 2
资源评论
Java程序员-张凯
- 粉丝: 1w+
- 资源: 7361
最新资源
- (源码)基于Django和OpenCV的智能车视频处理系统.zip
- (源码)基于ESP8266的WebDAV服务器与3D打印机管理系统.zip
- (源码)基于Nio实现的Mycat 2.0数据库代理系统.zip
- (源码)基于Java的高校学生就业管理系统.zip
- (源码)基于Spring Boot框架的博客系统.zip
- (源码)基于Spring Boot框架的博客管理系统.zip
- (源码)基于ESP8266和Blynk的IR设备控制系统.zip
- (源码)基于Java和JSP的校园论坛系统.zip
- (源码)基于ROS Kinetic框架的AGV激光雷达导航与SLAM系统.zip
- (源码)基于PythonDjango框架的资产管理系统.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
