ztree 文件夹类型的 树状图

未套程序的源代码:

ztree 文件夹类型的 树状图

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

已套程序的源代码:

css样式:

/*发布邮件  选择领导弹窗*/
.xuandao{
display: none;
}
.xuandao_1{
position: fixed;
z-index:;
top:;
left:;
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:; }
.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:, pId:, name:"随意勾选 1", open:true, dataVal:''},
{ id:, pId:, name:"随意勾选 1-1", open:true, dataVal:''},
{ id:, pId:, name:"checkbox 1-1-1", dataVal:''},
{ id:, pId:, name:"随意勾选 1-1-2", dataVal:''},
{ id:, pId:, name:"checkbox 1-2", open:true},
{ id:, pId:, name:"无 checkbox 1-2-1"},
{ id:, pId:, name:"无 checkbox 1-2-2"},
{ id:, pId:, name:"随意勾选 2", open:true},
{ id:, pId:, name:"随意勾选 2-1"},
{ id:, pId:, name:"随意勾选 2-2", open:true},
{ id:, pId:, name:"随意勾选 2-2-1", },
{ id:, pId:, name:"随意勾选 2-2-2"},
{ id:, pId:, 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);
}
上一篇:如何在pyqt中实现丝滑滚动字幕


下一篇:visio画等分树状图