• 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);
        }
        
  • 相关阅读:
    安全测试知多少
    支付测试
    接口测试总结
    SoapUI+excel接口自动化测试简述
    浏览器及元素的常用函数及变量整理总结
    jmeter接口自动化测试,数据驱动玩法
    接口测试点汇总
    测试面试题;
    MySQL入门,了解下、
    徒手运维MGR集群基本操作
  • 原文地址:https://www.cnblogs.com/zc290987034/p/7593316.html
Copyright © 2020-2023  润新知