zTree 树形组件结合bootstrap的使用

zTree参数设置

var setting = {  
            view: {
                showIcon: false  //隐藏icon
            },
            data: {
                key: {
                    children: "setSubArea"  //更加json设置子节点的名称json格式 {id:'1', name: '深圳', setSubArea[{}] }
                }
            },
            check : {
                enable: true,
                autoCheckTrigger: false,
                chkboxType: { "Y": "p", "N": "s" }    
            }              //每个节点上是否显示 CheckBox  
        };  

请求加载数据

$(document).ready(function(){
            //加载页面是发送异步请求
            $.ajax({   
                type: 'POST',   
                dataType : "json",   
                url: "queryAreaTreeJson.action",//请求的action路径    
                success:function(data){ //请求成功后处理函数。 
                    zNodes = data;
                    zTreeObj= $.fn.zTree.init($("#areaTree"), setting, data); 
　　　　　　　　　　　　   //根据input中的value值，是树形结构选中相应节点
                    var treeObj = $.fn.zTree.getZTreeObj("areaTree");
                    var inputArea = $("#areaNames").val().split();
                    for (var i = 0; i < inputArea.length; i ++) {
                        var node = treeObj.getNodeByParam("name", inputArea[i]);//$("#areaNames").val()
                        treeObj.checkNode(node, true, true);
                    }
                }   
           }); 
            $("#area").blur(getSelectNodes);  //input获取焦点自动触发
        });

根据zTree选中的值，显示在input框中

function getSelectNodes() {
        var treeObj = $.fn.zTree.getZTreeObj("areaTree");
        var nodes = treeObj.getCheckedNodes(true);
        var areaArr = [];
        for (var i = 0; i < nodes.length; i ++){
            var node = nodes[i];
            console.log(node);
            if (node.isParent == false || (node.check_Child_State == 0)) {  //选中的节点并且该节点的孩子节点没选中或者是叶子节点
                areaArr.push(node.name);
            }
        }
         
        $("#areaNames").val(areaArr.join(","));
        $('#myModal').modal('hide');
        
    }

<button class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal" onclick="return false;">选择地区</button>

<!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
           aria-labelledby="myModalLabel" aria-hidden="true">
           <div class="modal-dialog">
              <div class="modal-content">
                 <div class="modal-header" style="padding:5px;">
                    <!-- <button type="button" class="btn btn-xs" 
                       data-dismiss="modal" aria-hidden="true">
                          &times;
                    </button> -->
                    <h4 class="modal-title" id="myModalLabel">
                           选择地区
                    </h4>
                 </div>
                 <div class="modal-body">
                    <div class="zTreeDemoBackground left">
                        <ul id="areaTree" class="ztree" style="max-height:300px;width:auto; overflow-y:scroll;"></ul>
                    </div>
                 </div>
                 <div class="modal-footer" style="padding:5px;">
                    <button type="button" class="btn btn-primary"  onclick="getSelectNodes();">
                           确认
                    </button>
                    <button type="button" class="btn btn-default" 
                       data-dismiss="modal" onclick="getSelectNodes();">关闭
                    </button>
                 </div>
              </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>