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,所以外层不是传递字符串的话,外层函 ...
随机推荐
- hover
hover - Bing dictionary US[ˈhɒvə(r)] v.盘旋:徘徊:犹豫:巡弋 网络翱翔:悬停:盘旋于
- Linux统计某文件夹下文件的个数
ls -l |grep "^-"|wc -l 统计某文件夹下目录的个数 ls -l |grep "^d"|wc -l 统计文件夹下文件的个数,包括子文件夹里的 ...
- 转载 springboot 配置读取
前言:了解过spring-Boot这个技术的,应该知道Spring-Boot的核心配置文件application.properties,当然也可以通过注解自定义配置文件**.properties的信息 ...
- pip常用操作指令
1.安装模块 pip install vitualenv pip install -r requirement.txt 2.查询模块信息 pip show pip 3.显示已经安装的模块 pip li ...
- laravel-excel文档翻译笔记
1.安装 1>composer 安装 "maatwebsite/excel": "~2.1.0" 2>app/config/ap ...
- 7.20 文本框内容 超出 显示 。。 和 split
word-wrap:break-word; word-break:break-all; overflow:auto; split 去 :等 ,只要有: 就会在:两边 各生产一个值 ,所有 应习惯把最 ...
- 检查Makefile中的tab
转:http://stackoverflow.com/questions/16931770/makefile4-missing-separator-stop makefile has a very s ...
- 打开jsp页面时，显示空白页。
打开jsp页面时,显示空白页. #foreach($e in $listPlanItem) #set($listPlanDetail=$!e.get(2)) < ...
- 2018.07.18 洛谷P1171 售货员的难题（状压dp）
传送门 感觉是一道经典的状压dp,随便写了一发卡了卡常数开了个O（2）" role="presentation" style="position: relati ...
- jquery ajax 为什么会 多次请求
因你绑定的时间会随着你调用的地方增加而增加的,jquery 就是有这样的现象,举个例子让你解决吧,如果有个地方$('#Id').click(function(){ $.ajax({})})这样用对吧, ...