<button type="button" class="btn btn-info look" style="margin-right: 3px;" data-toggle="modal" data-target="#show">
<input type="hidden" value="${role.role_id }">查看
</button>
<script type="text/javascript">
$(function() {
$(".look").on("click", function() {
var id = $(this).find("input").val();
$.ajax({
type: "post",
url: "${pageContext.request.contextPath}/role?method=show&id=" + id,
success: function(data){
var menus = data.menus;
$("#showId").html(data.role_id);
$("#showName").html(data.role_name);
$("#showDescription").html(data.role_description);
var menuName = "";
var html = "";
/* $.each(menu, function(i, item){
console.log(item.menu_name);
}) */
// 或
menus.forEach(function(item, i){
menuName += item.menu_name + " | ";
if(item.menu_id == 1){
// 实现对比数据,如果结果为true则默认勾选该多选框
html += '<span class="checkbox"><label><input type="checkbox" name="menu_id" value="'+item.menu_id+'" checked>'+item.menu_name+'</label></span>';
} else{
// 实现对比数据,如果结果为false则不勾选该多选框
html += '<span class="checkbox"><label><input type="checkbox" name="menu_id" value="'+item.menu_id+'">'+item.menu_name+'</label></span>';
}
})
$("#hint").html(html);
if (menuName.length > 0) { // 去除最后一个|和它两边的空格
menuName = menuName.substr(0, menuName.length - 3);
}
$("#showMenuName").html(menuName);
// 或
/*
$("#showMenuName").empty(); // 加入该代码则会在执行append之前会把文本域内容清空,不会使文本域内容累加
$("#showMenuName").append(menuName); // 向文本域追加内容,如果不加上面一段代码empty()内容会一直累加
*/
},
error: function(err){}
})
});
})
</script>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">查看角色信息</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">角色ID</label>
<div class="col-sm-10">
<div class="form-control" id="showId"></div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">角色名称</label>
<div class="col-sm-10">
<div class="form-control" id="showName"></div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">角色描述</label>
<div class="col-sm-10">
<div class="form-control" id="showDescription"></div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">权限列表</label>
<div class="col-sm-10">
<div class="form-control" id="showMenuName"></div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">权限ID</label>
<div class="col-sm-10" id="hint">
<div class="form-control" id="showMenuId"></div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">父级ID</label>
<div class="col-sm-10">
<div class="form-control" id="showMenuParentId"></div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">权限状态</label>
<div class="col-sm-10">
<span style="color: red;">1为可用,0为不可用</span>
<div class="form-control" id="showMenuFlag"></div>
</div>
</div>
</form>
</div>
</div>