前台代码加载树，回显页面，以及动态的进行增删改查
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib uri="http://www.extremecomponents.org" prefix="ec" %>
<html>
<head>
<title></title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<%@ include file="/public/commonhead.jsp"%>
<link rel="stylesheet" href="${pageContext.request.contextPath}/zTree_v3-master/css/demo.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/zTree_v3-master/css/zTreeStyle/zTreeStyle.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/zTree_v3-master/js/jquery.ztree.core.js"></script>
<script src="${pageContext.request.contextPath}/zTree_v3-master/js/jquery.ztree.excheck.js"></script>
<script src="${pageContext.request.contextPath}/zTree_v3-master/js/jquery.ztree.exedit.js"></script>
<style type="text/css">
.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
</style>
</head>
<body>
<p id="txtips" <c:if test="${requestScope.message==null||requestScope.message==''}"> style="display: none;"</c:if>><c:out value="${requestScope.message}" /><img src="<c:out value="${pageContext.request.contextPath}"/>/images/o_c.gif" alt="关闭" id="close" /></p>
<form action="#" method="post" id="userEditForm">
<input type="hidden" id="roleId" name="id" value="${role.id}"/>
<input type="hidden" name="permissions" id="permissions" />
<input type="hidden" name="selectedComms" id="selectedComms" />
<table class="commandTable" cellspacing="0px" id="tt">
<tr>
<td colspan="4" class="tableCaption">设置权限</td>
</tr>
<tr>
<td align="right" class="tableTitle">当前角色</td>
<td align=left colspan="3" >
<input type="text" name="name" readonly="true" value="${role.name}"/>
</td>
</tr>
<tr>
<td colspan="4" align="left" style="border: 0px" valign="top">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
</td>
</tr>
<tr>
<td colspan="4" align="left" style="border: 0px" valign="top">
<button type="button" name="add" οnclick="contentAddPage.submitForm()" title="保 存" class="bt_n01" >保存</button>
<button type="button" name="back" id="back" οnclick="fnback()" title="返 回" class="bt_n01" >返 回</button>
</td>
</tr>
</table>
</form>
</body>
</html>
js代码
<script>
/* 页面加载时加载权限树 */
$(function()
{
var setting = {
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false
},
edit: {
enable: true,
editNameSelectAll: true,
showRemoveBtn: showRemoveBtn,
showRenameBtn: showRenameBtn
},
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeDrag: beforeDrag,
beforeEditName: beforeEditName,
beforeRemove: beforeRemove,
beforeRename: beforeRename,
onRemove: onRemove,
onRename: onRename
}
};
var zNodes = [];
var log, className = "dark";
function beforeDrag(treeId, treeNodes) {
return false;
}
function beforeEditName(treeId, treeNode) {
className = (className === "dark" ? "":"dark");
showLog("[ "+getTime()+" beforeEditName ] " + treeNode.name);
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
setTimeout(function() {
if (confirm("进入节点 -- " + treeNode.name + " 的编辑状态吗？")) {
setTimeout(function() {
zTree.editName(treeNode);
}, 0);
}
}, 0);
return false;
}
/*删除节点*/
function beforeRemove(treeId, treeNode) {
className = (className === "dark" ? "":"dark");
showLog("[ "+getTime()+" beforeRemove ] " + treeNode.name);
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
if(confirm("确认删除 节点 -- " + treeNode.name + " 吗？")){
var parm="sid="+treeNode.id+"&fid="+treeNode.pId+"&name="+treeNode.name;
$.ajax({
url:"${pageContext.request.contextPath}/console/role/roleCommDel",
type:"post",
data:parm,
dataType:"json",
success:function(data)
{
if(data==1)
{
alert("删除成功");
}
},
error:function()
{
alert("删除失败");
}
})
return true;
}
return false;
}
function onRemove(e, treeId, treeNode) {
showLog("[ "+getTime()+" onRemove ] " + treeNode.name);
}
/* 编辑节点名称 */
function beforeRename(treeId, treeNode, newName, isCancel) {
className = (className === "dark" ? "":"dark");
showLog((isCancel ? "<span style='color:red'>":"") + "[ "+getTime()+" beforeRename ] " + treeNode.name + (isCancel ? "</span>":""));
if (newName.length == 0) {
setTimeout(function() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.cancelEditName();
alert("节点名称不能为空.");
}, 0);
return false;
}
var parm="sid="+treeNode.id+"&fid="+treeNode.pId+"&name="+newName;
$.ajax({
url:"${pageContext.request.contextPath}/console/role/roleCommEdit",
type:"post",
data:parm,
dataType:"json",
success:function(data)
{
if(data==1)
{
alert("编辑成功");
}
},
error:function()
{
alert("编辑失败");
}
})
return true;
}
function onRename(e, treeId, treeNode, isCancel) {
showLog((isCancel ? "<span style='color:red'>":"") + "[ "+getTime()+" onRename ] " + treeNode.name + (isCancel ? "</span>":""));
}
function showRemoveBtn(treeId, treeNode) {
return !treeNode.isFirstNode;
}
function showRenameBtn(treeId, treeNode) {
return !treeNode.isLastNode;
}
function showLog(str) {
if (!log) log = $("#log");
log.append("<li class='"+className+"'>"+str+"</li>");
if(log.children("li").length > 8) {
log.get(0).removeChild(log.children("li")[0]);
}
}
function getTime() {
var now= new Date(),
h=now.getHours(),
m=now.getMinutes(),
s=now.getSeconds(),
ms=now.getMilliseconds();
return (h+":"+m+":"+s+ " " +ms);
}
/*添加节点*/
var newCount = 1;
function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
+ "' title='add node' οnfοcus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_"+treeNode.tId);
if (btn) btn.bind("click", function(){
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
var parm="sid="+100+ newCount+"&fid="+treeNode.id+"&name="+"new node"+(newCount++);
/*ajax与后台互动*/
$.ajax({
url:"${pageContext.request.contextPath}/console/role/roleCommAdd",
type:"post",
data:parm,
dataType:"json",
success:function(data)
{
if(data==1)
{
alert("添加成功");
}
},
error:function()
{
alert("添加失败");
}
})
return false;
});
};
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.tId).unbind().remove();
};
function selectAll() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.setting.edit.editNameSelectAll = $("#selectAll").attr("checked");
}
/* 获取全部权限 */
$.ajax({
url:"${pageContext.request.contextPath}/console/role/roleComm/data",
type:"post",
data:{"roleId":$('#roleId').val()},
dataType:"json",
success:function(data)
{
var permissions = '${permissions}';
var permissionArr = permissions.split(',');
$.each(data,function(i,val)
{
var node;
var flag = true;
for(var j = 0;j<permissionArr.length;j++)
{
if(val.sId==permissionArr[j])
{
flag = false;
}
}
if(flag)
{
node = {id:val.sId,pId:val.fId,name:val.name};
}else
{
node = {id:val.sId,pId:val.fId,name:val.name,checked:true};
}
zNodes.push(node);
})
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
$("#selectAll").bind("click", selectAll);
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getNodes();
for (var i = 0; i < nodes.length; i++) { //设置节点展开
treeObj.expandNode(nodes[i], true, false, true);
}
}
})
});
/* 添加以及权限 */
var contentAddPage = {
submitForm : function (){
var treeObj = $.fn.zTree.getZTreeObj("treeDemo"), nodes = treeObj.getCheckedNodes(true);
var v = "";
for(var i = 0;i<nodes.length;i++)
{
if(i==nodes.length-1)
{
v += nodes[i].id;
}else
{
v += nodes[i].id+",";
}
}
$("#permissions").val(v);
$.ajax({
url:"${pageContext.request.contextPath}/role/editRole",
type:"post",
data:$("#userEditForm").serialize(),
dataType:"json",
success:function(data)
{
if(data!=null)
{
alert("编辑成功");
}
},
error:function()
{
alert("编辑失败");
}
})
},
clearForm : function(){
$('#contentAddForm').form('reset');
contentAddEditor.html('');
}
};
function fnback(){
window.location.href= "<c:out value="${pageContext.request.contextPath}"/>/console/role";
}
</script>后台代码
加载树获取全部权限
/**
* 获取全部权限(社区)
* @param id
* @param request
* @return
*/
@ResponseBody
@RequestMapping(value = "/console/role/roleComm/data", method = RequestMethod.POST)
public List<M_address> CommList(@RequestParam("roleId") Integer roleId, Model model) {
List<M_address> list =bianMaDetailService.findBianMaList();
return list;
} @RequestMapping(value = "/console/role/roleComm", method = RequestMethod.GET)
public String roleCommList(@RequestParam("id") Integer id, Model model) {
Role role = new Role();
role.setId(id);
role = roleService.getRole(role);
model.addAttribute("role", role);
String permissions = "";
List<M_address> permissionList = bianMaDetailService.listByRoleId(id);
for(int i = 0;i<permissionList.size();i++)
{
if(i==permissionList.size()-1)
{
permissions+=permissionList.get(i).getsId();
}else
{
permissions+=permissionList.get(i).getsId()+",";
}
}
model.addAttribute("permissions", permissions);
return "role/rolecommlist";
}保存修改权限
/**
* 保存修改权限
* @param id
* @param request
* @return
*/
@RequestMapping("/role/editRole")
@ResponseBody
public int editRole(String name,int id,String permissions)
{
int num=roleService.editRole(id, permissions);
return num;
}添加节点
/**
* 添加节点
*/
@ResponseBody
@RequestMapping(value="/console/role/roleCommAdd",method=RequestMethod.POST)
public int roleCommAdd(Model model,String sid,String fid,String name){
Map<String, Object> map=new HashMap<String, Object>();
map.put("sId", sid);
map.put("fId", fid);
map.put("name", name);
int a=addressService.roleCommAdd(map);
return a;
}编辑节点名称
/**
* 权限节点名称修改
*/
@ResponseBody
@RequestMapping(value="/console/role/roleCommEdit",method=RequestMethod.POST)
public int roleCommEdit(Model model,String sid,String fid,String name){
Map<String, Object> map=new HashMap<String, Object>();
map.put("sId", sid);
map.put("fId", fid);
map.put("name", name);
int a=addressService.roleCommEdit(map);
return a;
}删除节点名称
/**
* 删除节点
*/
@ResponseBody
@RequestMapping(value="/console/role/roleCommDel",method=RequestMethod.POST)
public int roleCommDel(Model model,String sid,String fid,String name){
Map<String, Object> map=new HashMap<String, Object>();
map.put("sId", sid);
map.put("fId", fid);
int a=addressService.roleCommDel(map);
return a;
}
468
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
