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,所以外层不是传递字符串的话,外层函 ...
随机推荐
- 第八章 高级搜索树 (xa3)红黑树：插入
- Python print() 函数
Python print() 函数 Python 内置函数 描述 print() 方法用于打印输出,最常见的一个函数. print 在 Python3.x 是一个函数,但在 Python2.x 版本 ...
- C & C++ 宏与const
1.宏定义函数: 例:#define do{exp} while(0)与#define exp有什么不同,好处在哪里? 定义复杂代码,防止分号,或是括号不匹配等错误.比如: 定义: #define s ...
- CentOS 安装 Docker CE
准备工作 系统要求 Docker CE 支持 64 位版本 CentOS 7,并且要求内核版本不低于 3.10. CentOS 7 满足最低内核的要求,但由于内核版本比较低,部分功能(如 overla ...
- LSTM Accuracy
Training iter #1: Batch Loss = 1.234543, Accuracy = 0.29866665601730347PERFORMANCE ON TEST SET: Batc ...
- spring配置数据库连接池druid
连接池原理 连接池基本的思想是在系统初始化的时候,将数据库连接作为对象存储在内存中,当用户需要访问数据库时,并非建立一个新的连接,而是从连接池中取出一个已建立的空闲连接对象.使用完毕后,用户也并非将连 ...
- Castle ActiveRecord学习（一）简介
简介 来源:http://www.cnblogs.com/zxj159/p/4082987.html 一.Active Record(活动记录)模式 Active Record是业务逻辑层中(< ...
- Qt中使用python--Hello Python！
step1:install Python (version 2.7 or higher): step2:The configuration is as follows: 1.create qt con ...
- MySql 几个小技巧
分页查看: 在 mysql 环境下,执行命令: pager more,之后的结果分屏了. 简明扼要地查看表结构: describe table_name
- CSV 文件
CSV 文件 CSV(Comma Separated Values 逗号分隔值) 是一种文件格式(如.txt..doc等),也可理解 .csv 文件就是一种特殊格式的纯文本文件.即是一组字符序列,字符 ...