ztree 文件夹类型的树状图

未套程序的源代码：

ztree 文件夹类型的树状图

链接：http://pan.baidu.com/s/1nuHbxhf 密码：4aw2

已套程序的源代码：

css样式：

/*发布邮件  选择领导弹窗*/
.xuandao{
    display: none;
}
.xuandao_1{
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:rgba(0,0,0,0.2) none repeat scroll !important; /*实现FF背景透明，文字不透明*/
    background:#000; filter:Alpha(opacity=20);/*实现IE背景透明*/     
}
.xuandao_2{
    width: 600px;
    top: 15%;
    left: 50%;
    margin-left: -10%;
    background-color: #fff;
    position: absolute;
    z-index: 1000;
    
}
.content_wrap{
    height: 400px;
    overflow: auto;
}
.xuandao_3{
    text-align: center;
    padding: 5px;
}
.xuandao_3 a{
    padding: 5px 18px;
    background-color: #5cb85c;
    border: 1px solid #e5e5e5;
    color: #fff;
}
.xuandao_3 .xuandao_3_1{
    background-color: #ffffff;
    color: #000;
}
.xuandao_3 a:hover {
    background: #3D43FF;
}

HTML模板：

<div class="xiexin_2 xuanzedao">
                    
                </div>
                <div class="xiexin_2">
                    <a href="javascript:;" class="xiexin_bot">确定发布</a>
                    <a href="javascript:;" class="fanhui">返回</a>
                    <a href="javascript:;" class="xuanlingdao">选择领导</a>
                </div>


//弹窗：
<div class="xuandao">
    <div class="xuandao_1"></div>
    <div class="xuandao_2">
        <div class="content_wrap">
            <div class="zTreeDemoBackground left">
                <ul id="treeDemo" class="ztree">
                </ul>
            </div>
        </div>
        <div class="xuandao_3">
            <a href="javascript:;" class="queding">确定</a>
            <a href="javascript:;" class="xuandao_3_1">取消</a>
        </div>
    </div>
</div>
<input type="hidden" id="tempVal">


<script>
$('.queding').click(function(){
        var id = $('#tempVal').val();
        var $val = $('#tempVal').val();
        if($val == ''){
            layer.msg('您没有选择给指定领导，请选择，也可多选', 1, 0);
        }
        $.get("{:U('Index/xuanren')}",{id:id},function(v){
            $('.xuandao').hide();
            var html = '';
            var data = v.list;
            html += '<div class="xiexin_2_1">已选择领导:';
            for(var i=0;i<data.length;i++){
                html+= '<b>'+data[i]['name']+'</b><input type="hidden" name="ren[]" value="'+data[i]['id']+'">';
            }
            html += '</div>';
            $('.xuanzedao').html(html);
        })
    })
    
    //var zNodes=[];
    $('.xuanlingdao').click(function(){
//        $('.xuandao').show();
        var url="{:U('Index/ajax_ren')}";
        var $val = {$uid};
        $.get(url,{uid:$val},function(v){
            $('.xuandao').show();
            var tArr = [];
            $.each(v.list,function(index,ele){
                var obj = { id:ele.id, pId:ele.pId, name:ele.name, open:true, dataVal:ele.id};
                tArr.push(obj);                
            })
            var zNodes = tArr;
            var setting = {
                check: {
                    enable: true,
                    chkStyle : "checkbox",
                    chkboxType: { "Y": "s", "N": "s" },
                    nocheckInherit: false
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback:{
                    onCheck:onCheck
                }
            };
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        })
    })


//获取选择的值
    function onCheck(e,treeId,treeNode){
        var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),
            nodes=treeObj.getCheckedNodes(true),
            v="";
        for(var i=0;i<nodes.length;i++){
            if(nodes[i].pId != '0' && nodes[i].pId != null){
                v+=nodes[i].dataVal + ",";
            }
            
        }
        console.log(v);
        $('#tempVal').val(v);
    }


//点击取消隐藏弹窗
$('.xuandao_3_1').click(function(){
        $('.xuandao').hide();
    })
</script>

thinkphp控制器：

前台需要的数据类型，

var zNodes =[
            { id:1, pId:0, name:"随意勾选 1", open:true, dataVal:'1'},
            { id:11, pId:1, name:"随意勾选 1-1", open:true, dataVal:'12'},
            { id:111, pId:11, name:"checkbox 1-1-1", dataVal:'13'},
            { id:112, pId:11, name:"随意勾选 1-1-2", dataVal:'13'},
            { id:12, pId:1, name:"checkbox 1-2", open:true},
            { id:121, pId:12, name:"无 checkbox 1-2-1"},
            { id:122, pId:12, name:"无 checkbox 1-2-2"},
            { id:2, pId:0, name:"随意勾选 2", open:true},
            { id:21, pId:2, name:"随意勾选 2-1"},
            { id:22, pId:2, name:"随意勾选 2-2", open:true},
            { id:221, pId:22, name:"随意勾选 2-2-1", },
            { id:222, pId:22, name:"随意勾选 2-2-2"},
            { id:23, pId:2, name:"随意勾选 2-3"}
        ];

//点击【选择领导】按钮，找出所有分分组，按照树状图显示出来，并且排除当前登录的人  我传过来了当前登录者的id
    public function ajax_ren(){
        $data = array();
        $arr = array();
        $arruser = array();
        $user_a = M('linzi_user_a')->select();//一级分类
        foreach($user_a as $k=>$r){
            $arr[$k]['id'] = $r['a_id'];
            $arr[$k]['pId'] = 0;
            $arr[$k]['name'] = $r['title'];
        }
        $user_abc = M('linzi_user_abc')->select();//无限极分类
        foreach($user_abc as $kk=>$v){
            $data[$kk]['id'] = $v['id'];
            if($v['sji_id'] != null){//看这个判断
                $shangji = $v['sji_id'];
            }else{
                $shangji = $v['a_id'];
            }
            $data[$kk]['pId'] = $shangji;
            $data[$kk]['name'] = $v['title'];
        }
        $uid['id'] = array('neq',I('uid'));
        $user = M('linzi_user')->where($uid)->select();//无限极分类下的人员
        foreach($user as $key=>$vv){
            $arruser[$key]['id'] = 'a'.$vv['id'];
            $arruser[$key]['pId'] = $vv['abc_id'];
            $arruser[$key]['name'] = $vv['name'];
        }
        foreach($arr as $v){
            $data[] = $v;
        }
        foreach($arruser as $v){
            $data[] = $v;
        }
//        dump($arruser);die();
//        dump($data);die();
        $info['status']=1;
        $info['list']=$data;
        $this->ajaxReturn($info);
    }
    
    //点击确定按钮选择的谁
    public function xuanren(){
//        dump($_GET);die();
        $id = explode(',',I('id'));
        $ids=array();
        foreach($id as $k=>$v){
            if(strpos($v,'a')!==false){
                $ids[$k]=$v;
            }
        }
        $user_id = array();
        foreach($ids as $kk=>$vv){
            $user_id[$kk] = substr($vv,1);
        }
        $data['id'] = array('in',$user_id);
        $name = array();
        $user = M('linzi_user')->where($data)->select();
        foreach($user as $k=>$v){
            $abc = M('linzi_user_abc')->where(array('id'=>$v['abc_id']))->getField('title');
            $name[$k]['id'] = $v['id'];
            $name[$k]['name'] = $abc .'——'. $v['name'];
        }
        $show['status'] = 1;
        $show['list'] = $user;
        $this->ajaxReturn($show);
    }

秒客网

ztree 文件夹类型的树状图

相关文章

ztree 文件夹类型的 树状图

相关文章

ztree 文件夹类型的树状图