下拉框Ztree的实现

效果图:

下拉框Ztree的实现_第1张图片

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

 

 

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

 

 



使用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

 

 

 


 

你可能感兴趣的:(javascript)