蓝缘基础框架项目-角色新增

用户帐号已经有了，接下来就要给帐号赋予角色，今天介绍下角色新增功能。
首先看下角色表结构：

CREATE TABLE `sys_role`  (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `enable` int(10) NULL DEFAULT NULL,
  `name` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `roleKey` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `description` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 5 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;

说明：
1、普通的单表，enable表示是否禁用。

回到角色列表页面，如下图：

新增按钮绑定弹出新增页面事件:

		$("#add").click("click", function() {//绑定新增按扭
			dialog = parent.$.ligerDialog.open({
				width : 300,
				height : 310,
				url : rootPath + '/background/role/addUI.html',
				title : "增加角色",
				isHidden:false   //关闭对话框时是否只是隐藏，还是销毁对话框
			});
		});

说明：
1、addUI 跳转到新增页面。
2、ligerDialog.open 方法打开对话框。

新增页面要素代码：

	<form name="form" id="form" action="${ctx}/background/role/add.html" method="post">
		<table style="width: 285px; height: 200px;">
			<tbody>
				<tr>
					<td class="l_right">角色名：</td>
					<td class="l_left">
                        <div class="lanyuan_input">
                        <input id='name' name="name" class="isNum" type="text" >
                        </div>
					</td>
				</tr>
				<tr>
					<td class="l_right">roleKey：</td>
					<td class="l_left">
                        <div class="lanyuan_input">
                        <input id='roleKey' name="roleKey" class="checkdesc" type="text" >
                        </div>
					</td>
				</tr>
				<tr>
					<td class="l_right">角色说明：</td>
					<td class="l_left">
                        <div class="lanyuan_input">
                        <input id='description' name="description" class="checkdesc" type="text" >
                        </div>
					</td>
				</tr>
				<tr>
					<td class="l_right">角色状态：</td>
					<td class="l_left">
                        <input id='enable' name="enable" value="1" type="radio" checked="checked"> 启用　　
                        <input id='enable' name="enable" value="0" type="radio"> 停用
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<div class="l_btn_centent">
								<!-- saveWin_form   from是表单Ｉd-->
								<a class="btn btn-primary" href="javascript:void(0)"
									id="saveWin_form" onclick="saveWin();"><span>保存</span> </a>
								<a class="btn btn-primary" href="javascript:void(0)" id="closeWin"
									onclick="closeWin()"><span>关闭</span> </a>
							</div>
						</td>
				</tr>
			</tbody>
		</table>
	</form>

说明：
1、默认新增角色的状态是启用勾选。
2、保存按钮触发表单的提交， 调用后端保存角色接口add。
3、关闭按钮事件关闭对话框。
4、保存前还需要验证角色名是否存在，保证不重名。
5、新增成功后，关闭对话框并且重新加载列表数据。

$("form").validate({
			submitHandler : function(form) {//必须写在验证前面，否则无法ajax提交
				$(form).ajaxSubmit({//验证新增是否成功
					type : "post",
					dataType:"json",
					success : function(data) {
						if (data.flag) {
							$.ligerDialog.success('新增角色成功', '提示', function() {
								parent.role.loadGird();
								closeWin();
							});
						} else {
							$.ligerDialog.warn("新增角色失败");
						}
					}
				});
			},
			rules : {
				name : {
				required : true,
				remote:{ //异步验证是否存在
					type:"POST",
					url: rootPath + '/background/role/isExist.html',
					data:{
						name:function(){return $("#name").val();}
					 }
					}
				},
				enable : {
					required : true
				}
			},
			messages : {
				name : {
					required : "请输入角色名",
				    remote:"该角色已经存在"
				},
				enable : {
					required : "选择状态"
				}
			},
			errorPlacement : function(error, element) {//自定义提示错误位置
				$(".l_err").css('display','block');
				$(".l_err").html(error.html());
			},
			success: function(label) {//验证通过后
				$(".l_err").css('display','none');
			}
		});

软件定制及其他业务
请加微信号：13128600812

公众号: