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表单序列化