JQ树状图

html 部分
   <link rel="stylesheet" type="text/css" href="{{staticsUrl}}/js/ztree/zTreeStyle/zTreeStyle.css">
   
 <input type="text" name="" value="请选择搜索点位" id="locationName" class="form-control" > //输入框放入名字
 <input type="hidden" name="location_id" value="" id="locationID"> //存入选择的节点ID
 <div class="tree" id="locationTree">
  <div class="searchZtree">
	<input type="text" class="form-control input-sm" id="locationSearch" placeholder="请输入关键字筛选">//树状图筛选
    <span class="glyphicon glyphicon-remove clear-search" id="clearSearch"></span>//清除
   </div>
    <ul class="ztree pcc-tree" id="positionTree"></ul>//树状图主体
    <ul class="ztree" id="locationTreeFilter" style="display: none;"></ul>//筛选后主体
  </div>
  
 css 部分
 .tree{
     position: absolute;
    width: 300px;
    height: auto;
    border: 1px solid #ccc;
    margin-left:60px;
    overflow-y: auto;
  }
  .ztree li{
    overflow-y: auto;
    overflow-x: hidden;
  }
  .ztree li ul.line {
    height: 300px
  }
  #positionTree{
    background: white;
  }
  #clearSearch{
    display: none;
  }
  #locationSearch{
    width: 100%
  }
  .searchZtree{
    background: #b1d6ff;
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    position: relative;
  }
 #clearSearch{
    display: inline;
    position: absolute;
    right: 20px;
    margin-right: ;
    top: 20px;
 }
 #locationTreeFilter{
      background: white;
    height: 300px;
    overflow-y: auto;

 }
 #locationTree{
  display: none;
 }
 
 js部分
  <script src="{{staticsUrl}}/js/ztree/jquery.ztree.all.min.js"></script>
  <script>

  $('#locationTreeFilter').on('change', 'input', function () {
	        var $this = $(this);
	        yisaTree.checkOne($this.data('id') + '', $this.is(':checked'));
	    });//筛选点击后ID联动树状图主体选中
 	 $('#locationSearch').on('input', searchInput);//输入框联动筛选树状图
 $('#clearSearch').on('click', function () {//输入框清除
	        $('#locationSearch').val('');
	        searchInput('#locationSearch');
	        return false;
	    });
		 drawShowTree();//显示树状图
 $(document).on('click', function () { //点击树状图其他区域隐藏
	        $('#locationTree').hide();
	    });
  $('#locationTree').on('click', function (e) {//防止冒泡 排除此区域
	        e.stopPropagation();
	    });
  
  var sto = 0;
	function searchInput(e) {  //筛选输入框时间
	    var $this = typeof e === 'string' ? $(e) : $(this);
	    if ($this.val() === '') {
	        $('#clearSearch').hide();
	    } else {
	        $('#clearSearch').show();
	    }

	    clearTimeout(sto);
	    sto = setTimeout(function () {
	        yisaTree.filterByKeyword($this.val()); //筛选树状图方法
	    }, 300);
	}
	function drawShowTree() { //树状图显示方法
	    var l = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 130;
	    var t = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 310;

	    var scroll_h = 0;
	    $(".left-option").scroll(function () {
	        scroll_h = $(this).scrollTop();
	    });
	    $('#locationName').on('click', function (event) {
	        $("#locationTree").show()
	           return false;     	 //防止冒泡点击消失
	    });
	}
		var yisaTree = window.yisaTree = {
	    treeObj: '',
	    filter: $('#locationTreeFilter'),
	    list: $('#positionTree'),
	    tips: $('#locationName'),
	    /**
	     * 获取所有点位列表
	     * @returns {*}
	     */
	    getLocation: function getLocation() {
	        var locations = void 0;
	        $.ajax({
	            async: false,
	            url: ajaxURL.getLocationTree,
	            dataType: "json"
	        }).done(function (e) {
	            locations = e.data;
	        });
	        return locations;
	    },

	    getCounty: function getCounty() {
	        var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 3;

	        var nodes = this.treeObj.getNodesByParam("scale", scale, null);
	        var arr = [];
	        for (var i = 0; i < nodes.length; i++) {
	            if (!nodes[i].nodes) continue;
	            if (nodes[i].nodes[0].scale !== undefined) continue;

	            var poi = {
	                text: nodes[i].text,
	                lng: nodes[i].nodes[0].lng,
	                lat: nodes[i].nodes[0].lat,
	                count: nodes[i].nodes.length
	            };
	            arr.push(poi);
	        }

	        return arr;
	    },
	    /**
	     * 生成zTree树
	     * @param data
	     * @param style 生成树是checkbox还是radio
	     */
	    creat: function creat(data) {
	        var _this = this;

	        var style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'checkbox';

	        if (typeof $.fn.zTree === 'undefined') return;
	        $.fn.zTree.init(this.list, {
	            check: {
	                enable: true,
	                chkStyle: style,
	                radioType: 'all'
	            },
	            simpleData: {
	                enable: true
	            },
	            data: {
	                key: {
	                    children: "nodes",
	                    name: "text"
	                }
	            },
	            callback: {
	                onCheck: function onCheck(e, treeId, treeNode) {
	                    var lens = _this.treeObj.getCheckedNodes(true),
	                        num = 0;
	                          var location = '',
	                        	  regionCode = '';
	                    for (var i = 0; i < lens.length; i++) {
	                        if (lens[i].scale === undefined) {
	                            num += 1;
	                              location += lens[i].id + ',';
	                        }
	                    }
	                    if (num) {
	                    		var locations=location.split(",");
	                      		locations.pop();
	                      		$("#locationID").val(locations);
	                      		$("#locationName").val("已经选择了"+num+"个点位")
	                     
	                    } else {
	                       $("#locationName").val('请选择搜索位置');
	                    }

	                    var nodes = _this.treeObj.getChangeCheckedNodes();
	                    for (var i = 0, l = nodes.length; i < l; i++) {
	                        nodes[i].checkedOld = nodes[i].checked;
	                    }

	                  
	                }
	            }
	        }, data);
	        this.treeObj = $.fn.zTree.getZTreeObj(this.list[0].id);
	    },
	    /**
	     * 外部选取点位接口，例如地图圈选后调用
	     * @param arr
	     */
	    check: function check(arr) {
	        this.treeObj.checkAllNodes(false);
	        for (var i = 0; i < arr.length; i++) {
	            var node = this.treeObj.getNodeByParam("id", arr[i], null);
	            this.treeObj.checkNode(node, true, true, false);
	        }
	        if (arr.length) {
	            this.tips.html('<span style="color:#f30;">\u5DF2\u9009\u62E9' + arr.length + '\u4E2A\u641C\u7D22\u4F4D\u7F6E</span>');
	        } else {
	            this.tips.html('请选择搜索位置');
	        }
	        var nodes = this.treeObj.getChangeCheckedNodes();
	        for (var _i3 = 0, l = nodes.length; _i3 < l; _i3++) {
	            nodes[_i3].checkedOld = nodes[_i3].checked;
	        }
	    },
	    /**
	     * 选中或取消选中1个节点
	     * @param id 节点ID
	     * @param checked 选中为true，取消为false
	     */
	    checkOne: function checkOne(id, checked) {
	        var node = this.treeObj.getNodeByParam("id", id, null);
	        this.treeObj.checkNode(node, checked, true, false);
	        var lens = this.treeObj.getCheckedNodes(true),
	            num = 0;
	              var location = '',
	                        	  regionCode = '';
	        for (var i = 0; i < lens.length; i++) {
	            if (lens[i].scale === undefined) {
	                num += 1;
	                  location += lens[i].id + ',';
	            }
	        }
	        if (num) {
	          	var locations=location.split(",");
	                      		locations.pop();
	                      		$("#locationID").val(locations);
	                      		$("#locationName").val("已经选择了"+num+"个点位")
	        } else {
	             $("#locationName").val('请选择搜索位置');
	        }

	        var nodes = this.treeObj.getChangeCheckedNodes();
	        for (var _i4 = 0, l = nodes.length; _i4 < l; _i4++) {
	            nodes[_i4].checkedOld = nodes[_i4].checked;
	        }
	        console.log(nodes);
	    },
	    /**
	     * 最终表单提交时，获取选择的点位和地区ID
	     * @returns {{locations: string, regions: string}}
	     */
	    getChecked: function getChecked() {
	        var nodes = this.treeObj.getCheckedNodes(true);
	        var location = '',
	            regionCode = '';
	        for (var i = 0; i < nodes.length; i++) {
	            if (nodes[i].scale === undefined) {
	                location += nodes[i].id + ',';
	            } else {
	                var s = nodes[i].getCheckStatus();
	                if (!s.half) {
	                    regionCode += nodes[i].id + ',';
	                }
	            }
	        }
	        return { "locations": location, "regions": regionCode };
	    },

	    /**
	     * 根据关键词过滤树
	     * @param k 关键词
	     */
	    filterByKeyword: function filterByKeyword(k) {
	        if (!k) {
	            this.filter.hide();
	            this.list.show();
	            return false;
	        } else {
	            this.list.hide();
	            this.filter.show();
	        }
	        var kNodes = this.treeObj.getNodesByFilter(this._filter1, false, null, k);
	        var t = '';
	        for (var i = 0; i < kNodes.length; i++) {
	            var c = '';
	            if (kNodes[i].checked) {
	                c = 'checked';
	            }
	            t += '<li><label><input type="checkbox" data-id="' + kNodes[i].id + '" ' + c + '>' + kNodes[i].text + '</label></li>';
	        }
	        this.filter.html(t);
	    },

	    _recursiveNode: function _recursiveNode(node, pois) {
	        for (var i in node) {
	            if (node[i].scale === undefined) {
	                pois.push(node[i].id);
	            } else {
	                var re = this._recursiveNode(node[i].nodes, pois);
	                if (re.pois) pois.push(re.pois);
	            }
	        }
	        return pois;
	    },

	    /**
	     * 找出包含关键词的叶子节点
	     * @param node
	     * @returns {boolean}
	     * @private
	     */
	    _filter1: function _filter1(node, a) {
	        if (node.text) {
	            return !node.scale && node.text.indexOf(a) !== -1;
	        }
	    }
	};
exports.drawShowTree = drawShowTree;	
  yisaTree.creat(yisaTree.getLocation()); //调用树状图
  </script>
  
 此方法 涵盖搜索筛选 
  
  第二种 简化版树状图
  
   	function ztreeData(){
 		
 		var treeObj="";
 	
 		var setting={
 			check:{
 				checkboxType:{"Y":"","N":""},
 				enable:true,
 				chkStyle:'checkbox',
 				
 			},
 			   simpleData: {
	                enable: true
	            },
	            data: {
	                key: {
	                    children: "nodes",
	                    name: "text"
	                }
	            },
	            callback:{
	            	  onCheck: function onCheck(e, treeId, treeNode) {
	                    var lens =zTtreeObj.getCheckedNodes(true),
	                        num = 0;
	                         var location = '',
	                       
			            regionCode = '';
	                       
	                    for (var i = 0; i < lens.length; i++) {
	                        if (lens[i].scale === undefined) {
	                        	console.log(lens[i])
	                            num += 1;
	                              location += lens[i].id + ',';
	                        }
	                    }	                    
	                    if (num) {
	                      	var locations=location.split(",");
	                      		locations.pop();
	                      		$("#locationID").val(locations);
	                      		$("#locationName").val("已经选择了"+num+"个点位")
	                     
	                    } else {
	                      
	                    }

	                  

	                   
	                }
	            }
 		};
 		var zNodes=[];
 		$.get({
 			async:false,
 			url:ajaxURL.getLocationTree,
 			dataType:'json',
 			success:function(res){
 				zNodes=res.data;
 				zTtreeObj=$.fn.zTree.init($("#positionTree"),setting,zNodes)
 				
 			} 
 		})


 	};
 	ztreeData();