页面效果图：
1 <div style="display: none;" id="formContainer"> 2 <form class="layui-form mySearchForm" lay-filter="editForm"> 3 <div class="layui-form-item"> 4 <label class="layui-form-label">录入类型:</label> 5 <div class="layui-input-inline"> 6 <select name="seletLx" lay-verify="required"> 7 <option value="PT">录入普通人员</option> 8 <option value="YD">录入异动人员</option> 9 <option value="LZ">录入离职人员</option> 10 </select> 11 </div> 12 <label class="layui-form-label">职级:</label> 13 <div class="layui-input-inline"> 14 <select name="seletZj" lay-verify="required"> 15 <option value="1">普通员工</option> 16 <option value="2">处经理（含专家兼任）</option> 17 <option value="3">一般负责人</option> 18 <option value="4">主要负责人</option> 19 <option value="5">分管领导</option> 20 <option value="6">总裁</option> 21 <option value="7">董事长</option> 22 </select> 23 </div> 24 </div> 25 <div class="layui-form-item"> 26 <label class="layui-form-label">编号</label> 27 <div class="layui-input-inline"> 28 <input type="text" name="EmpNo" required lay-verify="required" autocomplete="off" class="layui-input"> 29 </div> 30 <label class="layui-form-label">姓名</label> 31 <div class="layui-input-inline"> 32 <input type="text" name="Name" required lay-verify="required" autocomplete="off" class="layui-input"> 33 </div> 34 </div> 35 <div class="layui-form-item"> 36 <label class="layui-form-label">公司编号</label> 37 <div class="layui-input-inline"> 38 <input type="text" name="CompanyNo" required lay-verify="required" autocomplete="off" class="layui-input"> 39 </div> 40 <label class="layui-form-label">公司名称</label> 41 <div class="layui-input-inline"> 42 <input type="text" name="Company" required lay-verify="required" autocomplete="off" class="layui-input"> 43 </div> 44 </div> 45 <div class="layui-form-item"> 46 <label class="layui-form-label">部门编号</label> 47 <div class="layui-input-inline"> 48 <input type="text" name="DepartmentNo" required lay-verify="required" autocomplete="off" class="layui-input"> 49 </div> 50 <label class="layui-form-label">部门名称</label> 51 <div class="layui-input-inline"> 52 <input type="text" name="Department" required lay-verify="required" autocomplete="off" class="layui-input"> 53 </div> 54 </div> 55 <div class="layui-form-item"> 56 <label class="layui-form-label">处室编号</label> 57 <div class="layui-input-inline"> 58 <input type="text" name="OfficeNo" required lay-verify="required" autocomplete="off" class="layui-input"> 59 </div> 60 <label class="layui-form-label">处室名称</label> 61 <div class="layui-input-inline"> 62 <input type="text" name="Office" required lay-verify="required" autocomplete="off" class="layui-input"> 63 </div> 64 </div> 65 <div class="layui-form-item"> 66 <label class="layui-form-label">岗位编号</label> 67 <div class="layui-input-inline"> 68 <input type="text" name="PrinNO" required lay-verify="required" autocomplete="off" class="layui-input"> 69 </div> 70 <label class="layui-form-label">岗位名称</label> 71 <div class="layui-input-inline"> 72 <input type="text" name="Prin" required lay-verify="required" autocomplete="off" class="layui-input"> 73 </div> 74 </div> 75 <div class="layui-form-item"> 76 <label class="layui-form-label">处经理</label> 77 <div class="layui-input-inline"> 78 <input type="text" name="OfficeManager" required lay-verify="required" autocomplete="off" class="layui-input"> 79 </div> 80 <div class="layui-form-mid layui-word-aux"> 81 <button type="button" class="layui-btn layui-btn-sm layui-btn-blue">选择</button> 82 <button type="button" class="layui-btn layui-btn-sm layui-btn-danger">移除</button> 83 </div> 84 <label class="layui-form-label">一般负责人</label> 85 <div class="layui-input-inline"> 86 <input type="text" name="GeneralManager" required lay-verify="required" autocomplete="off" class="layui-input"> 87 </div> 88 <div class="layui-form-mid layui-word-aux"> 89 <button type="button" class="layui-btn layui-btn-sm layui-btn-blue">选择</button> 90 <button type="button" class="layui-btn layui-btn-sm layui-btn-danger">移除</button> 91 </div> 92 </div> 93 <div class="layui-form-item"> 94 <label class="layui-form-label">主要负责人</label> 95 <div class="layui-input-inline"> 96 <input type="text" name="MainManager" required lay-verify="required" autocomplete="off" class="layui-input"> 97 </div> 98 <div class="layui-form-mid layui-word-aux"> 99 <button type="button" class="layui-btn layui-btn-sm layui-btn-blue">选择</button> 100 <button type="button" class="layui-btn layui-btn-sm layui-btn-danger">移除</button> 101 </div> 102 <label class="layui-form-label">分管领导</label> 103 <div class="layui-input-inline"> 104 <input type="text" name="FenManager" required lay-verify="required" autocomplete="off" class="layui-input"> 105 </div> 106 <div class="layui-form-mid layui-word-aux"> 107 <button type="button" class="layui-btn layui-btn-sm layui-btn-blue">选择</button> 108 <button type="button" class="layui-btn layui-btn-sm layui-btn-danger">移除</button> 109 </div> 110 </div> 111 <div class="layui-form-item"> 112 <label class="layui-form-label">总裁</label> 113 <div class="layui-input-inline"> 114 <input type="text" name="ZongManager" required lay-verify="required" autocomplete="off" class="layui-input"> 115 </div> 116 <div class="layui-form-mid layui-word-aux"> 117 <button type="button" class="layui-btn layui-btn-sm layui-btn-blue">选择</button> 118 <button type="button" class="layui-btn layui-btn-sm layui-btn-danger">移除</button> 119 </div> 120 <label class="layui-form-label">董事长</label> 121 <div class="layui-input-inline"> 122 <input type="text" name="BossManager" required lay-verify="required" autocomplete="off" class="layui-input"> 123 </div> 124 <div class="layui-form-mid layui-word-aux"> 125 <button type="button" class="layui-btn layui-btn-sm layui-btn-blue">选择</button> 126 <button type="button" class="layui-btn layui-btn-sm layui-btn-danger">移除</button> 127 </div> 128 </div> 129 <div class="layui-form-item"> 130 <label class="layui-form-label">入司时间</label> 131 <div class="layui-input-inline"> 132 <input type="text" id="joinTime" name="JoinTime" required lay-verify="required" autocomplete="off" class="layui-input"> 133 </div> 134 <label class="layui-form-label">调动时间</label> 135 <div class="layui-input-inline"> 136 <input type="text" id="transferTime" name="TransferTime" required lay-verify="required" autocomplete="off" class="layui-input"> 137 </div> 138 </div> 139 <div class="layui-form-item"> 140 <label class="layui-form-label">岗位序列</label> 141 <div class="layui-input-inline"> 142 <input type="text" name="ClassID" required lay-verify="required" autocomplete="off" class="layui-input"> 143 </div> 144 <label class="layui-form-label">序列名称</label> 145 <div class="layui-input-inline"> 146 <input type="text" name="ClassName" required lay-verify="required" autocomplete="off" class="layui-input"> 147 </div> 148 </div> 149 <div class="layui-form-item"> 150 <label class="layui-form-label">岗位族号</label> 151 <div class="layui-input-inline"> 152 <input type="text" name="ClassPrinNO" required lay-verify="required" autocomplete="off" class="layui-input"> 153 </div> 154 <label class="layui-form-label">族名称</label> 155 <div class="layui-input-inline"> 156 <input type="text" name="ClassPrinName" required lay-verify="required" autocomplete="off" class="layui-input"> 157 </div> 158 <div class="layui-form-mid layui-word-aux"> 159 <button type="button" class="layui-btn layui-btn-sm layui-btn-blue">选择</button> 160 <button type="button" class="layui-btn layui-btn-sm layui-btn-danger">移除</button> 161 </div> 162 </div> 163 <div> 164 <button id="submitEdit" lay-submit lay-filter="submitEdit">立即提交</button> 165 </div> 166 </form> 167 </div>
Html表单
1 var EditForm = function () {
2 var self = this;
3 self.initialJoinTime = function () {
4 layui.use(‘laydate‘, function () {
5 var laydate = layui.laydate;
6 laydate.render({
7 elem: ‘#joinTime‘
8 });
9 });
10 }
11
12 self.initialTransferTime = function () {
13 layui.use(‘laydate‘, function () {
14 var laydate = layui.laydate;
15 laydate.render({
16 elem: ‘#transferTime‘
17 });
18 });
19 }
20
21 self.initialFormSubmit = function (param, callBack) {
22 layui.use(["form"], function () {
23 layui.form.on("submit(submitEdit)", function (data) {
24 $.ajax({
25 "contentType": "application/json",
26 "dataType": "json",
27 "type": "post",
28 "url": urlConfig().submitPeopleData,
29 "data": JSON.stringify(param),
30 "success": function (response) {
31 if (response.ResponseCode === "200") {
32 layer.msg(response.Message);
33 callBack();
34 } else {
35 layer.alert(response.Message);
36 }
37 }
38 });
39 return false;
40 });
41 });
42 }
43 }
表单相关的JavaScript
1 //监听头工具栏事件
2 tableObj.initialToolBar = function () {
3 layui.use([‘table‘, ‘form‘], function () {
4 var editForm = layui.form;
5 layui.table.on(‘toolbar(peopleArray)‘,
6 function (obj) {
7 var checkStatus = layui.table.checkStatus(obj.config.id);
8 var data = checkStatus.data; //获取选中的数据
9 switch (obj.event) {
10 case ‘add‘:
11 new PeopleOperation().AddPeople();
12 break;
13 case ‘update‘:
14 if (data.length === 0) {
15 layer.msg(‘请选择一行‘);
16 } else if (data.length > 1) {
17 layer.msg(‘只能同时编辑一个‘);
18 } else {
19 console.log(‘编辑 [id]：‘ + checkStatus.data[0].Id);
20 new PeopleOperation().UpdatePeople(editForm, { "AssessId": $("#AssessId").val(), "PeopleId": checkStatus.data[0].Id });
21 }
22 break;
23 case ‘delete‘:
24 if (data.length === 0) {
25 layer.msg(‘请选择一行‘);
26 } else {
27 console.log(‘编辑 [id]：‘ + checkStatus.data[0].Id);
28 new PeopleOperation().DeletePeople(urlConfig().deletePeople, tableObj, { "AssessId": $("#AssessId").val(), "PeopleId": checkStatus.data[0].Id });
29 }
30 break;
31 };
32 });
33 });
34
35 }
监听表格工具栏菜单事件
此外，下面是序列化表单的JS代码，我也在看Layui的源码中找到的。非常好用，而且支持无限子集元素。JQuery.serializeArray()和JQuery.serialize()只能找到向下一级元素。
1 $.fn.extend({
2 _serializeObject: function () {
3 var field = {};
4 var fieldElem = $(this).find(‘input,select,textarea‘); //获取所有表单域
5 var nameIndex = {}; //数组 name 索引
6 $.each(fieldElem, function (_, item) {
7 item.name = (item.name || ‘‘).replace(/^\s*|\s*&/, ‘‘);
8
9 if (!item.name) return;
10
11 //用于支持数组 name
12 if (/^.*\[\]$/.test(item.name)) {
13 var key = item.name.match(/^(.*)\[\]$/g)[0];
14 nameIndex[key] = nameIndex[key] | 0;
15 item.name = item.name.replace(/^(.*)\[\]$/, ‘$1[‘ + (nameIndex[key]++) + ‘]‘);
16 }
17
18 if (/^checkbox|radio$/.test(item.type) && !item.checked) return;
19 field[item.name] = item.value;
20 });
21 return field;
22 }
23 });
form表单序列化
原文地址：https://www.cnblogs.com/lv-jinliang/p/9928582.html
时间： 2024-10-09 01:54:37