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); }