Question

jquery.ztree.js怎么使用

Answer 1

1.在页面引入相应的css和js文件

<link href="@Url.Content("~/Themes/wsfx/ztree/css/demo.css")" rel="stylesheet" />
<link href="@Url.Content("~/Themes/wsfx/ztree/css/zTreeStyle/zTreeStyle.css")" rel="stylesheet" />
<script src="@Url.Content("~/Themes/wsfx/ztree/js/jquery-1.4.4.min.js")"></script>
<script src="@Url.Content("~/Themes/wsfx/ztree/js/jquery.ztree.core.js")"></script>
<script src="@Url.Content("~/Themes/wsfx/ztree/js/jquery.ztree.excheck.js")"></script>
<script src="@Url.Content("~/Themes/wsfx/ztree/js/ztree.js")"></script>
2.html代码

<div id="menuContent" class="menuContent">
<ul id="treeDemo" class="ztree"></ul>
</div>
3.渲染ztree树
<script type="text/javascript">
setSPRSelectData();
//ajax请求数据
function setSPRSelectData() {
//树代码
zNodes = [];

$.ajax({
url: "@Url.Content("~/Official/GetApprover")",
cache: false,
async: true,
success: function (result) {
var firstResult = $.grep(result.data, function (n, i) {
return n.SZJG == 0;
});
var secondResult = $.grep(result.data, function (n, i) {
return n.SZJG > 0;
});
$.each(firstResult, function (index, firstValue) {
if (firstValue.SZJG == 0) {
var firstNode = { id: firstValue.KeyId, pId: 0, name: firstValue.XM, open: false, nocheck: true, isParent: true };
zNodes.push(firstNode);

$.each(secondResult, function (index, secondValue) {
if (secondValue.SZJG == firstValue.RYBS) {
var secondNode = { id: secondValue.RYBS, pId: firstValue.KeyId, name: secondValue.XM, isParent: false };
zNodes.push(secondNode);
}
});
}
});
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
}
});

}
</script>