1.引用包
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
2.HTML
<input id="citySel" value="" onkeyup="AutoMatch(this)" placeholder="搜索模板" class="form-control">
<ul id="yyTree" class="ztree mobTree"></ul>
3.基础配置
var setting = {
view: {
selectedMulti: true //支持多选
},
data: {
simpleData: {
enable: true //简单数据格式
}
},
callback: {
beforeClick: getCurrentNode,
onClick: zTreeOnClick
}
};
var zNodes = [
{ id: 1, pId: 0, name: "北京" },
{ id: 2, pId: 0, name: "天津" },
{ id: 3, pId: 0, name: "上海" },
{ id: 6, pId: 0, name: "重庆" },
{ id: 4, pId: 0, name: "河北省", open: true },
{ id: 41, pId: 4, name: "石家庄" },
{ id: 42, pId: 4, name: "保定" },
{ id: 43, pId: 4, name: "邯郸" },
{ id: 44, pId: 4, name: "承德" },
{ id: 5, pId: 0, name: "广东省", open: true },
{ id: 51, pId: 5, name: "广州" },
{ id: 52, pId: 5, name: "深圳" },
{ id: 53, pId: 5, name: "东莞" },
{ id: 54, pId: 5, name: "佛山" },
{ id: 6, pId: 0, name: "福建省", open: true },
{ id: 61, pId: 6, name: "福州" },
{ id: 62, pId: 6, name: "厦门" },
{ id: 63, pId: 6, name: "泉州" },
{ id: 64, pId: 6, name: "三明" }
];
4.初始化数据
function InitialZtree() {
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
}
5.实现文本框的onkeyup事件且匹配zTree树节点
function AutoMatch(txtObj) {
if (txtObj.value.length > 0) {
InitialZtree();
var zTree = $.fn.zTree.getZTreeObj("yyTree");
var nodeList = zTree.getNodesByParamFuzzy("name", txtObj.value);
//将找到的nodelist节点更新至Ztree内
$.fn.zTree.init($("#yyTree"),se, nodeList);
} else {
InitialZtree();
}
}