Layui：前后端分离之Form表单
页面效果图：
<div style="display: none;" id="formContainer">
<form class="layui-form mySearchForm" lay-filter="editForm">
<div class="layui-form-item">
<label class="layui-form-label">录入类型:</label>
<div class="layui-input-inline">
<select name="seletLx" lay-verify="required">
<option value="PT">录入普通人员</option>
<option value="YD">录入异动人员</option>
<option value="LZ">录入离职人员</option>
</select>
</div>
<label class="layui-form-label">职级:</label>
<div class="layui-input-inline">
<select name="seletZj" lay-verify="required">
<option value="1">普通员工</option>
<option value="2">处经理（含专家兼任）</option>
<option value="3">一般负责人</option>
<option value="4">主要负责人</option>
<option value="5">分管领导</option>
<option value="6">总裁</option>
<option value="7">董事长</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">编号</label>
<div class="layui-input-inline">
<input type="text" name="EmpNo" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
<label class="layui-form-label">姓名</label>
<div class="layui-input-inline">
<input type="text" name="Name" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">公司编号</label>
<div class="layui-input-inline">
<input type="text" name="CompanyNo" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
<label class="layui-form-label">公司名称</label>
<div class="layui-input-inline">
<input type="text" name="Company" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">部门编号</label>
<div class="layui-input-inline">
<input type="text" name="DepartmentNo" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
<label class="layui-form-label">部门名称</label>
<div class="layui-input-inline">
<input type="text" name="Department" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">处室编号</label>
<div class="layui-input-inline">
<input type="text" name="OfficeNo" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
<label class="layui-form-label">处室名称</label>
<div class="layui-input-inline">
<input type="text" name="Office" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">岗位编号</label>
<div class="layui-input-inline">
<input type="text" name="PrinNO" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
<label class="layui-form-label">岗位名称</label>
<div class="layui-input-inline">
<input type="text" name="Prin" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">处经理</label>
<div class="layui-input-inline">
<input type="text" name="OfficeManager" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">
<button type="button" class="layui-btn layui-btn-sm layui-btn-blue">选择</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-danger">移除</button>
</div>
<label class="layui-form-label">一般负责人</label>
<div class="layui-input-inline">
<input type="text" name="GeneralManager" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">
<button type="button" class="layui-btn layui-btn-sm layui-btn-blue">选择</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-danger">移除</button>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">主要负责人</label>
<div class="layui-input-inline">
<input type="text" name="MainManager" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">
<button type="button" class="layui-btn layui-btn-sm layui-btn-blue">选择</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-danger">移除</button>
</div>
<label class="layui-form-label">分管领导</label>
<div class="layui-input-inline">
<input type="text" name="FenManager" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">
<button type="button" class="layui-btn layui-btn-sm layui-btn-blue">选择</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-danger">移除</button>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">总裁</label>
<div class="layui-input-inline">
<input type="text" name="ZongManager" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">
<button type="button" class="layui-btn layui-btn-sm layui-btn-blue">选择</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-danger">移除</button>
</div>
<label class="layui-form-label">董事长</label>
<div class="layui-input-inline">
<input type="text" name="BossManager" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">
<button type="button" class="layui-btn layui-btn-sm layui-btn-blue">选择</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-danger">移除</button>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">入司时间</label>
<div class="layui-input-inline">
<input type="text" id="joinTime" name="JoinTime" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
<label class="layui-form-label">调动时间</label>
<div class="layui-input-inline">
<input type="text" id="transferTime" name="TransferTime" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">岗位序列</label>
<div class="layui-input-inline">
<input type="text" name="ClassID" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
<label class="layui-form-label">序列名称</label>
<div class="layui-input-inline">
<input type="text" name="ClassName" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">岗位族号</label>
<div class="layui-input-inline">
<input type="text" name="ClassPrinNO" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
<label class="layui-form-label">族名称</label>
<div class="layui-input-inline">
<input type="text" name="ClassPrinName" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">
<button type="button" class="layui-btn layui-btn-sm layui-btn-blue">选择</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-danger">移除</button>
</div>
</div>
<div>
<button id="submitEdit" lay-submit lay-filter="submitEdit">立即提交</button>
</div>
</form>
</div>
Html表单
var EditForm = function () {
var self = this;
self.initialJoinTime = function () {
layui.use('laydate', function () {
var laydate = layui.laydate;
laydate.render({
elem: '#joinTime'
});
});
}
self.initialTransferTime = function () {
layui.use('laydate', function () {
var laydate = layui.laydate;
laydate.render({
elem: '#transferTime'
});
});
}
self.initialFormSubmit = function (param, callBack) {
layui.use(["form"], function () {
layui.form.on("submit(submitEdit)", function (data) {
$.ajax({
"contentType": "application/json",
"dataType": "json",
"type": "post",
"url": urlConfig().submitPeopleData,
"data": JSON.stringify(param),
"success": function (response) {
if (response.ResponseCode === "200") {
layer.msg(response.Message);
callBack();
} else {
layer.alert(response.Message);
}
}
});
return false;
});
});
}
}
表单相关的JavaScript
//监听头工具栏事件
tableObj.initialToolBar = function () {
layui.use(['table', 'form'], function () {
var editForm = layui.form;
layui.table.on('toolbar(peopleArray)',
function (obj) {
var checkStatus = layui.table.checkStatus(obj.config.id);
var data = checkStatus.data; //获取选中的数据
switch (obj.event) {
case 'add':
new PeopleOperation().AddPeople();
break;
case 'update':
if (data.length === 0) {
layer.msg('请选择一行');
} else if (data.length > 1) {
layer.msg('只能同时编辑一个');
} else {
console.log('编辑 [id]：' + checkStatus.data[0].Id);
new PeopleOperation().UpdatePeople(editForm, { "AssessId": $("#AssessId").val(), "PeopleId": checkStatus.data[0].Id });
}
break;
case 'delete':
if (data.length === 0) {
layer.msg('请选择一行');
} else {
console.log('编辑 [id]：' + checkStatus.data[0].Id);
new PeopleOperation().DeletePeople(urlConfig().deletePeople, tableObj, { "AssessId": $("#AssessId").val(), "PeopleId": checkStatus.data[0].Id });
}
break;
};
});
}); }
监听表格工具栏菜单事件
此外，下面是序列化表单的JS代码，我也在看Layui的源码中找到的。非常好用，而且支持无限子集元素。JQuery.serializeArray()和JQuery.serialize()只能找到向下一级元素。
$.fn.extend({
_serializeObject: function () {
var field = {};
var fieldElem = $(this).find('input,select,textarea'); //获取所有表单域
var nameIndex = {}; //数组 name 索引
$.each(fieldElem, function (_, item) {
item.name = (item.name || '').replace(/^\s*|\s*&/, '');
if (!item.name) return;
//用于支持数组 name
if (/^.*\[\]$/.test(item.name)) {
var key = item.name.match(/^(.*)\[\]$/g)[0];
nameIndex[key] = nameIndex[key] | 0;
item.name = item.name.replace(/^(.*)\[\]$/, '$1[' + (nameIndex[key]++) + ']');
}
if (/^checkbox|radio$/.test(item.type) && !item.checked) return;
field[item.name] = item.value;
});
return field;
}
});
form表单序列化
Layui：前后端分离之Form表单的更多相关文章
- 【开源】【前后端分离】【优雅编码】分享我工作中的一款MVC+EF+IoC+Layui前后端分离的框架——【NO.1】框架概述
写博客之前总想说点什么,但写的时候又忘了想说点什么,算了,不说了,还是来送福利吧. 今天是来分享我在平时工作中搭建的一套前后端分离的框架. 平时工作大多时候都是在做管理类型的软件开发,无非就是增.删. ...
- 用layui前端框架弹出form表单以及提交
第一步:引用两个文件 第二步:点击删除按钮弹出提示框 /*删除开始*/ $(".del").click(function () { var id = $(this).attr(&q ...
- 关于layui富文本编辑器和form表单提交的问题
今天下午因为要做一个富文本编辑器上传文件给后台,所以看了一下layui的富文本编辑器,折腾了半天,终于把这玩意搞定了. 首先需要先创建layui的富文本编辑器 <textarea id=&quo ...
- python中前后端通信方法Ajax和ORM映射（form表单提交）
后端从数据库获取数据给到前端: 第一种方式: admin.py文件代码: @admin.route('/showList') def show(): # 获取数据库所有文章数据,得到一个个对象 res ...
- javascprit form表单提交前验证以及ajax返回json
1.今天要做一个手机验证码验证的功能.需求是前端页面点击发送 短信验证码,后台接收后通过ajax返回到前端,之后前端在提交时候进行验证.思路很简单,不过做的过程还是学到不少的东西. 1.ajax请求后 ...
- SpringBoot20 集成SpringSecurity02 -> 利用SpringSecurity进行前后端分离的登录验证
1 SpirngBoot环境搭建 创建一个SpringBoot项目即可,详情参见三少的相关博文 参考博文 -> 点击前往 SpirngBoot项目脚手架 -> 点击前往 2 引入Spirn ...
- 前后端交互技术之servlet与form表单提交请求及ajax提交请求
1.先来个简单的form表单 login.jsp,建在webcontent目录下(url写相对路径就可以了) <!DOCTYPE html><html><head> ...
- 微信小程序 PHP后端form表单提交实例详解
微信小程序php后端form表单 https://www.cnblogs.com/tdalcn/p/7092716.html 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了 ...
- 20181019 记录 window.setTimeout('dofunction()',2000); - layui form 表单提交 事件 - F11全屏 事件 window.onresize
1 延时事件 window.setTimeout('dofunction()',2000); 函数外面要有引号 如果没有引号 就不能延时执行 应该是内容进行eval,所以外层不是传递字符串的话,外层函 ...
随机推荐
- 数字与字符串之间的转换以及%f与%lf的输入输出用法区别
1.C++字符串与C字符串的转换: (1)string --> char * string str("OK"); strcpy(p,str.c_str());//p是char ...
- np.random.randn()、np.random.rand()、np.random.randint()
(1)np.random.randn()函数 语法: np.random.randn(d0,d1,d2……dn) 1)当函数括号内没有参数时,则返回一个浮点数: 2)当函数括号内有一个参数时,则返回秩 ...
- C++中纯虚函数
1.纯虚函数 virtual ReturnType Function()= 0; 纯虚函数可以让类先具有一个操作名称,而没有操作内容,让派生类在继承时再去具体地给出定义.凡是含有纯虚函数的类叫做抽象类 ...
- nginx反向代理架构与安装配置(一)
这里我们准备四台虚拟机,二台负载均衡(LB01,LB02),二台web服务器(WEB01,WEB02). 这里默认所有软件都安装在/data目录下. 四台虚拟机的初始安装是centos7的最小 ...
- HHVM中文网
HHVM中文网 百科资料 下载安装 HHVM文档 HHVM&Hack博客 <Hack与HHVM权威指南> 更多Facebook技术站 HHVM中文网 Facebook出品高性能服 ...
- POSIX systemV共享内存的区别
POISX共享内存分为两种方式: 1.内存映射文件 特点:共享内存的改变能在文件中体现: 2.共享内存区对象 特点:共享内存的改变在文件上看不出来(实际上根本打不开该文件): 以上两者都是基于mmap ...
- 01 Maven 安装与配置
Maven 安装与配置 1. Maven 介绍 Maven 翻译为 "专家","内行".Maven 是 Apache 下的一个纯 Java 开发的开源项目,它是 ...
- Python鸭子类型思想
动态语言中经常提到鸭子类型,所谓鸭子类型就是:如果走起路来像鸭子,叫起来也像鸭子,那么它就是鸭子(If it walks like a duck and quacks like a duck, it ...
- 【Web】Nginx下载与安装
Nginx介绍 Nginx ("engine x") 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.Nginx是由Igor Sysoev为俄罗 ...
- 20155210 2016-2017-2 《Java程序设计》第7周学习总结
20155210 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 时间的度量: GMT(Greenwich Mean Time)时间:现在不是标准时间 世界时 ...