前端jsp文件代码：
<link rel="stylesheet" href="css/demo.css" type="text/css">
<link rel="stylesheet" href="css/zTreeStyle.css" type="text/css">
<script src="lib/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="js/jquery.ztree.excheck.js"></script>
<script type="text/javascript">
$(function () {
initTree();
});
function initTree(){
var deptNodes = [];
var setting = {
check: {
enable: true,
chkStyle: "radio",
radioType: "all"
},
view: {
dblClickExpand: false,
fontCss: setFontCss
},
data: {
simpleData: {
enable: true
}
},
callback: {
onClick: onClick,
onCheck: onCheck,
onDblClick: zTreeOnDblClick
}
};
//$.fn.zTree.init($("#treeDemo"), setting, zNodes);
var name = $("#citySel").val();
var datas = {'name': name}
$.ajax({
url: 'ygDept!findDept.action',
data: datas,
type: 'POST',
dataType: 'json',
success: function(data){
$.each(data, function(i,item){
deptNodes[i] = {id:item.id, //注意要对应和json字段名一致
pId:item.parentid,
name:item.name,
open:true} ;
});
$.fn.zTree.init($("#treeDemo"), setting, deptNodes);
}
})
}
//双击扩展事件
function dblClickExpand(treeId, treeNode) {
return treeNode.level > 0;
};
//单击事件
function onClick(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.checkNode(treeNode, !treeNode.checked, null, true);
return false;
}
//双击事件
function zTreeOnDblClick(event, treeId, treeNode) {
var cityObj = document.getElementById("citySel");
cityObj.value=treeNode.name;
closeDialog();
};
function onCheck(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getCheckedNodes(true),
v = "";
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 = $("#citySel");
// cityObj.attr("value", v);
var cityObj = document.getElementById("citySel");
cityObj.value=v;
setFontCss(zTree, nodes);
}
//设树节点样式
function setFontCss(treeId, treeNode) {
var cityObj = document.getElementById("citySel").value;
if(cityObj && treeNode.name.indexOf(cityObj) >-1){
return {color:"red"}
}
else return {};
// return treeNode.level == 0 ? {color:"red"} : {};
}
//重置团体机构搜索条件
function resetDept(){
var cityObj = document.getElementById("citySel");
cityObj.value="";
}
</script>
<body>
<div><input id="citySel" type="text" style="170px; height:27px;" />
<input type="button" value="搜索" class="bb" onclick="initTree()" />
<input type="button" value="清除" class="bb" onclick="resetDept()" />
<input type="button" value="选择" class="bb" style="margin-left: 150px;" onclick="closeDialog()" /></div>
<div id="menuContent" position: absolute;">
<ul id="treeDemo" class="ztree" style="margin-top:10px; margin-left:0px; auto; height: 300px; background-color: white;border: 0;"></ul></div>
</body>
具体导入文件可上zTree官网下载
API文档查看可上链接：http://www.treejs.cn/v3/api.php