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>