Jquery.zTree模糊搜索树功能

0.引用包

1.HTML

2.基础配置

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: "三明" }
         ];

3.初始化数据

function InitialZtree() {
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
}

4.实现文本框的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();                
    }              
}