Jquery.zTree模糊搜索树功能

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();                
    }              
}

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值