导入js文件和css文件
<script type="text/javascript" src="js/zTree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="js/zTree/jquery.ztree.excheck-3.5.js"></script>
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
html代码
<div class="tree" style="height: 500px; overflow: auto; float: left; width: 20%">
<input type="hidden" id="fznamehide"/>
<div class="clearfix">
</div>
<ul id="tree" class="ztree"></ul>
</div>
js脚本
var vAddNodeId;//新增节点ID
var vParentId;//父节点ID
var vNodeSel = '<%=strRootNodeId%>'; //选中的节点ID
var setting = {
view : {
dblClickExpand : false,
showLine : true,
removeHoverDom: removeHoverDom,
addHoverDom: addHoverDom,
selectedMulti : false
},
check: {
enable: false
},
data : {
simpleData : {
enable : true,
idKey : "id", //子节点
pIdKey : "pId", //父节点
rootPId : "0" //根节点
}
},
edit: { //树形结构可编辑
enable: true,
showRemoveBtn: showRemoveBtn,
showRenameBtn: showRenameBtn,
renameTitle: "编辑分组名称",
removeTitle: "删除分组"
},
async: {
enable: true,
type:"post",
url:getUrl, //获取数据url
autoParam:["id"],
otherParam:{"rootNodeId":'<%=strRootNodeId%>'}
},
// 回调函数
callback : {
onClick : function(event, treeId, treeNode, clickFlag) {
vNodeSel = treeNode.id;
vParentId = treeNode.pId;
$("#tableMain").dataTable().fnDraw();
},
onAsyncSuccess:zTreeOnAsyncSuccess,
//捕获异步加载出现异常错误的事件回调函数 和 成功的回调函数
onAsyncError : zTreeOnAsyncError,
}
};
function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
//设置新增节点为选中状态
if(vAddNodeId != ''){
var node = treeObj.getNodeByParam("id", vAddNodeId, null);
treeObj.selectNode(node,false);
vAddNodeId = '';
}
//初始化树默认根节点为选中
if(vNodeSel == '<%=Tool.ROOT_NODE_ID%>'){
var node = treeObj.getNodeByParam("id", vNodeSel, null);
treeObj.selectNode(node,false);
}
}
function getUrl(treeId, treeNode){
return 'message/MessAnalysis_getTeamTreeInfo';
}
// 加载错误提示
function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
alert("加载错误:" + XMLHttpRequest);
};
function addHoverDom(treeId, treeNode) {
//根目录才显示新增按钮
if(treeNode.id != 1){
return ;
}
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
var vSelectNode = treeObj.getSelectedNodes();
var vselSel = vSelectNode[0].id; //当前标记为选中的节点
if (btn) btn.bind("click", function(){
var vselNodes = treeObj.getSelectedNodes(); //当前标记为选中的节点
vParentId = vselNodes[0].id;
if( vParentId !=1){
$(".ui-dialog:eq(6) .ui-dialog-buttonpane button:first").addClass("btn btn-success");
$(".ui-dialog:eq(6) .ui-dialog-buttonpane button:first").html("<i class='icon-ok icon-white'></i> 确定");
$("#dialog-addalert" ).dialog( "open" );
return ;
}
});
};
function removeHoverDom(treeId, treeNode) {
console.log("remove " + "#addBtn_"+treeNode.id);
$("#addBtn_"+treeNode.tId).unbind().remove();
};
$.fn.zTree.init($("#tree"), setting); //初始化ztree
treeObj = $.fn.zTree.getZTreeObj("tree");