下拉框Ztree的实现

效果图：

首页得有一个盛放伪下拉框的input输入框，然后在input下面放一个div层盛放Ztree，默认隐藏，在点击input时再调出来。看代码。

 <table style="width:100%">
                   <tr>
                      <td style="position:relative" >
                         <input id="ChanYeName" type="text" class="form-control" style="width:300px" placeholder="" readonly="readonly" />                           
                         <input id="cyids" type="hidden" /> <!--若需要节点id，将节点id存储在此，然后上传到服务器-->
                         <div id="info" style="z-index: 1;position:absolute; width:300px; height:168px; top:29px; background:#fff; border:1px solid #eee;overflow-y:auto; display:none;">
                               <ul id="haveclasstree" class="ztree"></ul>
                         </div>
                      </td>
                  </tr>
 </table>

然后就是在此页面引入几个必要的js和css文件。如下

<link href="/css/metroStyle/metroStyle.css" rel="stylesheet" />
<script src="/js/jquery.ztree.core.min.js"></script>
<script src="/js/jquery.ztree.excheck.min.js"></script>

使用bootstrap样式的ztree已经很美观了，各位可以按需自行选择。
最后就是关键的Ztree初始化js了，注意Ztree需要三个参数，id,pid,和name。看代码：

 //选择时点击文字，选择框未绑定事件
        $(function () {
            document.onclick = function (e) {
                $("#info").hide(300);
            }

            $('#info').click(function (e) {

                e = e || event;
                stopFunc(e);
            });
            $('#ChanYeName').click(function (e) {

                e = e || event;
                stopFunc(e);
                $("#info").slideToggle(300)
            });
        })

        //阻止向上传递事件（阻止冒泡）
        function stopFunc(e) {
            e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
        }

//ztree的配置项
var setting = {
    check: {
        enable: true
    },
    data: {
        simpleData: {
            enable: true
        }
    },
    callback: {
        onNodeCreated: onNodeCreated,
        onClick: function (e, treeId, treeNode, clickFlag) {
            var  zTree = $.fn.zTree.getZTreeObj("haveclasstree");
            //zTree.checkNode(treeNode, !treeNode.checked, true);
            var nodes = zTree.getSelectedNodes();
            var node = nodes[0];
            //设置选择根父级节点时不可显示在input中
            if(node.node_flag != 1){
                $("#ChanYeName").val(nodes[0].full_name);
                $("#cyids").val(nodes[0].id)
            }
        }
    }

};

var dataMaker = function(count) {
    var nodes = [], pId = -1,
        min = 10, max = 90, level = 0, curLevel = [], prevLevel = [], levelCount,
        i = 0,j,k,l,m;

    while (i<count) {
        if (level == 0) {
            pId = -1;
            levelCount = Math.round(Math.random() * max) + min;
            for (j=0; j<levelCount && i<count; j++, i++) {
                var n = {id:i, pid:pId, name:"Big-" +i};
                nodes.push(n);
                curLevel.push(n);
            }
        } else {
            for (l=0, m=prevLevel.length; l<m && i<count; l++) {
                pId = prevLevel[l].id;
                levelCount = Math.round(Math.random() * max) + min;
                for (j=0; j<levelCount && i<count; j++, i++) {
                    var n = {id:i, pid:pId, name:"Big-" +i};
                    nodes.push(n);
                    curLevel.push(n);
                }
            }
        }
        prevLevel = curLevel;
        curLevel = [];
        level++;
    }
    return nodes;
}

var showNodeCount = 0;
function onNodeCreated(event, treeId, treeNode) {
    showNodeCount++;
}

function createTree () {
     var zNodes = [];
    $.ajax({
        url:'/momnt/tree',
        type:'get',
        dataType:'json',
        async: false,  //ajax设置为同步以将数据传到函数外调用
        success:function (json) {
            var status = json.status;
            var data = json.data;
            if(status == 0){
               zNodes = data;
            }
        }
    });
   /* zNodes = [
         { "id" : 1,"name" : "组1","pid" : 0},{ "id" : 10,"name" : "组1.1","pid" : 1},{ "id" : 23,"name" : "组1.2",
			        "pid" : 1
			    },
			    {
			         "id" : 24,
			        "name" : "组1.3",
			        "pid" : 1
			    },
			    {
			        "id" : 25,
			        "name" : "组1.1.1",
			        "pid" : 10
			    },
			    {
			        "id" : 26,
			        "name" : "组1.2.1",
			        "pid" : 23
			    },
			    {
			        "id" : 27,
			        "name" : "组1.3.1",
			        "pid" : 24
			    }
    ];*/
    showNodeCount = 0;
    $("#haveclasstree").empty();
    setting.check.enable = false;
    $.fn.zTree.init($("#haveclasstree"), setting, zNodes);
    var zTree = $.fn.zTree.getZTreeObj("haveclasstree");
    var nodes = zTree.getNodes();
    //当根父节点没有子节点时，不进行子节点的赋值操作
    if(nodes[0].children !== undefined){
        zTree.selectNode(nodes[0].children[0]); //设置默认选中第一个子节点
        $("#ChanYeName").val(nodes[0].children[0].full_name);
        $("#cyids").val(nodes[0].children[0].id);
    }
}


$(document).ready(function(){
    createTree();
});