您的位置：首页 > 其它

欢迎使用CSDN-markdown编辑器

2015-11-01 20:31 309 查看

ztree 加载部门和用户树

最近的项目中客户要以树的形式展示部门及其下属的用户，从网上看到ztree功能强大，就用了一下。

废话不多说，直接上代码。

<！–由于本人是从事.net开发，所有的代码均为c#及JS–>

总体思路为首先加载部门表，然后以异步加载的形式加载用户

1、前台展示：

引用脚本：

<link href="../lib/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="../lib/jquery/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="../lib/zTree_v3/js/jquery.ztree.core-3.5.js" type="text/javascript"></script>
<script src="../lib/zTree_v3/js/jquery.ztree.excheck-3.5.min.js" type="text/javascript"></script>
<script src="../lib/zTree_v3/js/jquery.ztree.exedit-3.5.min.js" type="text/javascript"></script>
<script src="../lib/zTree_v3/js/jquery.ztree.exhide-3.5.min.js" type="text/javascript"></script>

<body style="overflow: hidden;">
<div id="layout" style="margin: 2px; margin-right: 3px;">
<div position="left" id="mainmenu" title="用户角色">
<div id="tabcontainer" style="margin: 2px;">

<div id="menuContent"  style="display:none; overflow:auto;:2px auto; width:inherit;height:99%;" title="用户">
<ul id="tree" class="ztree" style="margin-top:0; width:auto;height:400px;"></ul>
</div>
请选择部门:<input type="text" id="selDepartment" style="margin: 2px 0px;width:99%;height:99%;" onclick="showMenu()"/>

</div>
</div>
</div>

<script type="text/javascript">

//选中用户和角色ID
var selectedUserID, selectedRoleID;
//部门ID
var _DepartmentId;
//用户名
var userName;
/配置ztree树
var setting = {
view: {
dblClickExpand: false,
height:500
},
async: {//异步加载配置
enable: true,
url:"Ajax_User.ashx",
autoParam:["id=_DepartmentId"],  //自动传值，后台接收到的为_DepartmentId
otherParam:{ "view": "GetUserByDepId"},//其他值

},
data: {
simpleData: {
enable: true
}
},
callback: {
onClick: onClick,
}
};
var zTree;
var treeNodes;

$(document).ready(function () {
showMenu();
//初始化部门树
$.post("Ajax_Department.aspx", { cmd: "GetTree" }, function (data) {
if (data != "") {
var zNodes = JSON2.parse(data);
$.fn.zTree.init($("#tree"), setting, zNodes);
zTree = $.fn.zTree.getZTreeObj("tree");
var nodes = zTree.getNodes();
}
});
});
//树的点击事件
function onClick(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("tree"),
nodes = zTree.getSelectedNodes(),
v = "";
nodes.sort(function compare(a, b) { return a.id - b.id; });
for (var i = 0, l = nodes.length; i < l; i++) {
v += nodes[i].name + ",";
}
if (v.length > 0) v = v.substring(0, v.length - 1);
var cityObj = $("#selDepartment");
cityObj.attr("value", v);
var userid = "";
if (treeNode.isParent) {
alert("请先选择一个子节点");
return;
}

//展示树
function showMenu() {
var cityObj = $("#selDepartment");
var cityOffset = $("#selDepartment").offset();
$("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");
}
</script>片

2、后台获取数据

/获取部门树
private void  GetTree()
{
List<DepartmentInfo> deps = new DepartmentManager().GetTreeDep();
ZTree zTree = null;//自
a80f
定义树的类便于向前台传值
List<ZTree> tlist = new List<ZTree>();
foreach (DepartmentInfo dep in deps)
{
zTree = new ZTree();
zTree.id = dep.DepID;
zTree.pId = dep.DepParentID;
zTree.name =dep.DepName;
zTree.open = false;
zTree.isParent = true;//全部部门均为父类，这样便于异步加载用户后操作用户数据
tlist.Add(zTree);
}
Response.Write(tlist.ToJson());
}

//异步获取用户
private void GetUserByDepId(HttpContext context)
{
string depId = context.Request["_DepartmentId"];
List<User> users =new  UserManager().GetTreeUserWithDep(depId);
List<ZTree> ztree=new List<ZTree> ();
foreach (var item in users)
{
ZTree zt = new ZTree() {
id=item.UserID,
name=item.UName,
isParent=false,//设为子节点，便于前台针对用户的操作
pId=item.DepID,
open=true//展开用户树
};
ztree.Add(zt);
}
context.Response.Write(ztree.ToJson());

}

放出ZTree的API地址：
Demo演示:[http://www.ztree.me/v3/demo.php#_101](http://www.ztree.me/v3/api.php#_101)
API文档:[http://www.ztree.me/v3/api.php](http://www.ztree.me/v3/api.php)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ztree 部门和用户树树

相关文章推荐

新的分享

章节导航