页面效果图：

 

 

 

1 
      
         2             
       
          3                 
        
           4                     
         录入类型:  5                     
         
            6                         
            7                             录入普通人员  8                             录入异动人员  9                             录入离职人员 10                          11                     
         
 12                     
         职级: 13                     
         
           14                         
           15                             普通员工 16                             处经理（含专家兼任） 17                             一般负责人 18                             主要负责人 19                             分管领导 20                             总裁 21                             董事长 22                          23                     
         
 24                 
        
 25                 
        
          26                     
         编号 27                     
         
           28                         
           29                     
         
 30                     
         姓名 31                     
         
           32                         
           33                     
         
 34                 
        
 35                 
        
          36                     
         公司编号 37                     
         
           38                         
           39                     
         
 40                     
         公司名称 41                     
         
           42                         
           43                     
         
 44                 
        
 45                 
        
          46                     
         部门编号 47                     
         
           48                         
           49                     
         
 50                     
         部门名称 51                     
         
           52                         
           53                     
         
 54                 
        
 55                 
        
          56                     
         处室编号 57                     
         
           58                         
           59                     
         
 60                     
         处室名称 61                     
         
           62                         
           63                     
         
 64                 
        
 65                 
        
          66                     
         岗位编号 67                     
         
           68                         
           69                     
         
 70                     
         岗位名称 71                     
         
           72                         
           73                     
         
 74                 
        
 75                 
        
          76                     
         处经理 77                     
         
           78                         
           79                     
         
 80                     
         
           81                         
          选择 82                         
          移除 83                     
         
 84                     
         一般负责人 85                     
         
           86                         
           87                     
         
 88                     
         
           89                         
          选择 90                         
          移除 91                     
         
 92                 
        
 93                 
        
          94                     
         主要负责人 95                     
         
           96                         
           97                     
         
 98                     
         
           99                         
          选择100                         
          移除101                     
         
102                     
         分管领导103                     
         
          104                         
          105                     
         
106                     
         
          107                         
          选择108                         
          移除109                     
         
110                 
        
111                 
        
         112                     
         总裁113                     
         
          114                         
          115                     
         
116                     
         
          117                         
          选择118                         
          移除119                     
         
120                     
         董事长121                     
         
          122                         
          123                     
         
124                     
         
          125                         
          选择126                         
          移除127                     
         
128                 
        
129                 
        
         130                     
         入司时间131                     
         
          132                         
          133                     
         
134                     
         调动时间135                     
         
          136                         
          137                     
         
138                 
        
139                 
        
         140                     
         岗位序列141                     
         
          142                         
          143                     
         
144                     
         序列名称145                     
         
          146                         
          147                     
         
148                 
        
149                 
        
         150                     
         岗位族号151                     
         
          152                         
          153                     
         
154                     
         族名称155                     
         
          156                         
          157                     
         
158                     
         
          159                         
          选择160                         
          移除161                     
         
162                 
        
163                 
        
         164                     
         立即提交165                 
        
166             
       
167         
      

 

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         }

 

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                 //用于支持数组 name12                 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     });