对于系统来说,一个好的角色架构是灰常重要的,但是页面该怎么展示,以及修改配置权限更方便呢?我个人觉得应该是使用树形结构来展示我们的角色层叠更贴切,
所以我花了一天的时候研究了下jquery的ztree是怎么样玩的(哈哈,因为个人比较愚钝,所以花的时间有点多)
下面先上点效果图
这样的做法基本可以管理简单的树形模式,下面我来帖些代码
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>角色控制面板</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<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>
<link rel="stylesheet" href="/static/plugin/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="/static/plugin/zTree_v3/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/static/plugin/zTree_v3/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="/static/plugin/zTree_v3/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="/static/plugin/zTree_v3/js/jquery.ztree.exedit-3.5.js"></script>
<SCRIPT type="text/javascript">
var setting = {
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false,
showIcon: true
},
edit: {
enable: true,
editNameSelectAll: true,
showRemoveBtn: showRemoveBtn,
showRenameBtn: true
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeDrag: beforeDrag,
beforeEditName: beforeEditName,
beforeRemove: beforeRemove,
beforeRename: beforeRename,
onRemove: onRemove
}
};
function beforeDrag(treeId, treeNodes) {
return false;
}
function beforeEditName(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
if(confirm("是否进入简单编辑状态?")){
return true;
}else{
$("#formRoleId").val(treeNode.id);
$("#formRoleRsv").val(treeNode.rsv_);
$("#formRoleName").val(treeNode.name);
$("#formRoleContent").val(treeNode.content);
}
return false;
}
function beforeRemove(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
return confirm("确认删除 [" + treeNode.name + "]?");
}
function onRemove(e, treeId, treeNode) {
$.post('/cms/authority/removeById.do', 'id='+treeNode.id+'&rsv_='+treeNode.rsv_, function(result){
var json = toJson(result);
if(!json.success){
alert(json.message);
}
});
}
function beforeRename(treeId, treeNode, newName, isCancel) {
if (newName.length == 0) {
alert("内容不能为空.");
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
setTimeout(function(){zTree.editName(treeNode)}, 10);
return false;
}
if(treeNode.name == newName){
return true;
}
$.post('/cms/authority/modify.do', 'id='+treeNode.id+'&rsv_='+treeNode.rsv_+'&name='+newName, function(result){
var json = toJson(result);
if(!json.success){
alert(json.message);
return false;
}
});
return true;
}
function showRemoveBtn(treeId, treeNode) {
return !treeNode.isParent;
}
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' onfocus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_"+treeNode.tId);
if (btn) btn.bind("click", function(){
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var f = confirm("确定要添加新角色?");
if(!f){
return false;
}
$.post('/cms/authority/save.do', 'parent.id='+treeNode.id+'&name=新角色', function(result){
var json = toJson(result);
if(json.success){
zTree.addNodes(treeNode, toJson(json.value));
}else{
alert(json.message);
}
});
return false;
});
};
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.tId).unbind().remove();
};
function toJson(obj){
try{
return eval('('+obj+')');
}catch(e){
return [{success:false,message:'请求返回数据异常!'}];
}
}
$(document).ready(function(){
$.post('/cms/authority/find4tree.do', '', function(result){
$.fn.zTree.init($("#treeDemo"), setting, toJson(result));
});
});
function submitForm(){
$.post('/cms/authority/modify.do', $('#submitForm').serialize(), function(result){
var json = toJson(result);
if(json.success){
var zTree = $.fn.zTree.getZTreeObj('treeDemo');
var newNode = zTree.getNodeByParam("id", $('#formRoleId').val());
newNode.name = $('#formRoleName').val();
newNode.content = $('#formRoleContent').val();
zTree.updateNode(newNode);
resetForm();
}
alert(json.message);
});
}
function resetForm(){
$("#formRoleId").val('');
$("#formRoleRsv").val('');
$("#formRoleName").val('');
$("#formRoleContent").val('');
}
</SCRIPT>
</HEAD>
<BODY>
<h2>角色控制面板</h2>
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
<hr />
<div>
<h3>修改明细</h3>
<form action="#" id="submitForm" method="post">
<input type="hidden" name="id" id="formRoleId" />
<input type="hidden" id="formRolePId" />
<input type="hidden" name="rsv_" id="formRoleRsv" />
角色名称: <input type="text" name="name" id="formRoleName" /><br />
角色内容: <input type="text" name="content" id="formRoleContent" /><br />
<input type="button" value="submit" onclick="submitForm();" /> <input type="button" value="reset" onclick="resetForm();" />
</form>
</div>
</BODY>
</HTML>
幸好ztree的api还是比较不错的,用起来挺顺手,除了add节点那个事件比较别扭,其他的还算可以,基本看了我上面代码应用的事件,基本的功能点都覆盖到了,一般的项目也就是用到哪几个功能而已,其他订制的需要自己研究,基本的新增修改流程就是addNodes,updateNode方法
