新增功能涉及三张表（用户表，角色表，用户角色关联表）
首先打开添加页面后需要把系统角色查询出来，也就是在新增用户的同时给用户设置角色
页面最终效果（截图屏幕有限）
页面代码
1 <!DOCTYPE html> 2 <html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>新增用户信息</title> 7 <header th:replace="header.html"></header> 8 </head> 9 10 <body> 11 <div class="x-body"> 12 <form class="layui-form"> 13 14 <div class="layui-form-item"> 15 <label for="L_username" class="layui-form-label"> 16 <span class="x-red">*</span>用户名 17 </label> 18 <div class="layui-input-inline"> 19 <input type="text" id="L_username" th:value="${sysUser.userName}" name="userName" lay-verify="required" autocomplete="off" class="layui-input"> 20 </div> 21 <div class="layui-form-mid layui-word-aux"> 22 <span class="x-red">*</span>将会成为您唯一的登入名 23 </div> 24 </div> 25 <div class="layui-form-item"> 26 <label for="L_pass" class="layui-form-label"> 27 <span class="x-red">*</span>密码 28 </label> 29 <div class="layui-input-inline"> 30 <input type="password" id="L_pass" th:value="${sysUser.passWord}" name="passWord" lay-verify="pass" autocomplete="off" class="layui-input"> 31 </div> 32 <div class="layui-form-mid layui-word-aux"> 33 6到16个字符 34 </div> 35 </div> 36 <div class="layui-form-item"> 37 <label for="L_repass" class="layui-form-label"> 38 <span class="x-red">*</span>确认密码 39 </label> 40 <div class="layui-input-inline"> 41 <input type="password" id="L_repass" name="repass" required="" lay-verify="repass" autocomplete="off" class="layui-input"> 42 </div> 43 </div> 44 <div class="layui-form-item"> 45 <label for="L_nickname" class="layui-form-label"> 46 <span class="x-red">*</span>昵称 47 </label> 48 <div class="layui-input-inline"> 49 <input type="text" id="L_nickname" th:value="${sysUser.nickName}" name="nickName" required="" lay-verify="nickname" autocomplete="off" class="layui-input"> 50 </div> 51 </div> 52 <div class="layui-form-item"> 53 <label for="L_telephone" class="layui-form-label"> 54 <span class="x-red">*</span>手机 55 </label> 56 <div class="layui-input-inline"> 57 <input type="text" id="L_telephone" th:value="${sysUser.telephone}" name="telephone" required="" lay-verify="telephone" autocomplete="off" class="layui-input"> 58 </div> 59 <div class="layui-form-mid layui-word-aux"> 60 11位数字 61 </div> 62 </div> 63 <div class="layui-form-item"> 64 <label for="L_email" class="layui-form-label"> 65 <span class="x-red">*</span>邮箱 66 </label> 67 <div class="layui-input-inline"> 68 <input type="text" id="L_email" th:value="${sysUser.email}" name="email" required="" lay-verify="email" autocomplete="off" class="layui-input"> 69 </div> 70 </div> 71 <div class="layui-form-item"> 72 <label for="L_email" class="layui-form-label">生日</label> 73 <div class="layui-input-inline"> 74 <input type="text" id="L_birthday" th:value="${sysUser.birthday}" name='birthday' placeholder="yyyy-MM-dd" class="layui-input "> 75 </div> 76 </div> 77 <div class="layui-form-item"> 78 <label class="layui-form-label">性别</label> 79 <div class="layui-input-block"> 80 <input type="radio" th:field="${sysUser.sex}" name="sex" value="1" title="男" checked=""> 81 <input type="radio" th:field="${sysUser.sex}" name="sex" value="0" title="女"> 82 </div> 83 </div> 84 <input type="text" id="roleId" name="roleId" style="display:none;"/> 85 <div class="layui-form-item"> 86 <label class="layui-form-label">角色</label> 87 <div class="layui-input-block show-role-container"> 88 </div> 89 </div> 90 <div class="layui-form-item"> 91 <label for="L_email" class="layui-form-label"> 92 </label> 93 <button class="layui-btn" lay-filter="add" lay-submit=""> 94 保存 95 </button> 96 </div> 97 </form> 98 </div> 99 <script> 100 101 layui.use(['form','layer', 'laydate'], function(){ 102 $ = layui.jquery; 103 var form = layui.form 104 ,layer = layui.layer 105 ,laydate = layui.laydate; 106 getAllRole(function(){ 107 layui.form.render('radio') 108 }); 109 //日期 110 laydate.render({ 111 elem: '#L_birthday' 112 ,trigger: 'click' 113 ,format: 'yyyy-MM-dd' //可任意组合 114 }); 115 116 117 //自定义验证规则 118 form.verify({ 119 nikename: function(value){ 120 if(value.length < 5){ 121 return '昵称至少得5个字符啊'; 122 } 123 } 124 ,telephone: [/(.+){6,12}$/, '电话号码必须6到12位'] 125 ,pass: [/(.+){6,12}$/, '密码必须6到12位'] 126 ,repass: function(value){ 127 if($('#L_pass').val()!=$('#L_repass').val()){ 128 return '两次密码不一致'; 129 } 130 } 131 }); 132 133 //监听提交 134 form.on('submit(add)', function(data){ 135 var rolelRadio = $("[name=roleId]:checked"); 136 if(rolelRadio == undefined || rolelRadio.length <= 0){ 137 layer.alert("请给该用户设置角色"); 138 return false; 139 } 140 data.field.roleId = rolelRadio.val(); 141 $.ajax({ 142 url:"/user/add", 143 type:"POST", 144 data:data.field, 145 dataType:'json', 146 success:function(result){ 147 if(result.code == 500 || result.code == 5000100 || result.code == 5000101 || result.code == 5000102){ 148 layer.alert(result.msg); 149 }else{ 150 layer.alert("用户添加成功！", {icon: 6},function () { 151 //关闭当前frame 152 xadmin.close(); 153 // 可以对父窗口进行刷新 154 xadmin.father_reload(); 155 }); 156 } 157 } 158 }); 159 return false; 160 }); 161 162 163 }); 164 function getAllRole(callback){ 165 $.ajax({ 166 url:"/role/all", 167 type:"GET", 168 dataType:'json', 169 success:function(result){ 170 var html = ""; 171 if(result.datas && result.datas.length > 0){ 172 for(i in result.datas ){ 173 html += '<input type="radio" name="roleId" value="'+result.datas[i].id+'" title="'+result.datas[i].roleName+'" >' + 174 '<div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>'+result.datas[i].roleName+'</div></div>'; 175 } 176 $(".show-role-container").html(html); 177 callback(); 178 } 179 } 180 }); 181 } 182 </script> 183 </body> 184 </html>