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);
}
ztree 文件夹类型的 树状图的更多相关文章
- ArcGIS教程:树状图
摘要 构造可显示特征文件里连续合并类之间的属性距离的树示意图(树状图). 使用方法 · 输入特征文件必须採用预定的特征文件格式. 特征文件可使用 Iso 聚类或创建特征工具来创建.该文件必须至少包括两 ...
- 用D3.js画树状图
做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同 网上有很多这种数据可视化展示的js控件,我这里选择 ...
- ztree 树状图——例
效果: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...
- 树状图展示终端目录内容-tree
以树状图列出目录的内容,让你一目了然 执行 tree 指令,它会列出指定目录下的所有文件,包括子目录里的文件. 安装 我们通过包管理工具可以方便的安装它 mac - brew install tree ...
- bzoj 4871: [Shoi2017]摧毁“树状图”
4871: [Shoi2017]摧毁“树状图” Time Limit: 25 Sec Memory Limit: 512 MBSubmit: 53 Solved: 9[Submit][Status ...
- Highcharts 树状图(Treemap)
Highcharts 树状图(Treemap) 树状图 series 配置 设置 series 的 type 属性为 treemap ,series.type 描述了数据列类型.默认值为 " ...
- D3.js系列——布局:弦图和集群图/树状图
一.弦图 1.弦图是什么 弦图(Chord),主要用于表示两个节点之间的联系的图表.两点之间的连线,表示谁和谁具有联系. 2.数据 初始数据为: var city_name = [ "北京& ...
- python爬取股票最新数据并用excel绘制树状图
大家好,最近大A的白马股们简直 跌妈不认,作为重仓了抱团白马股基金的养鸡少年,每日那是一个以泪洗面啊. 不过从金融界最近一个交易日的大盘云图来看,其实很多中小股还是红色滴,绿的都是白马股们. 以下截图 ...
- 使用ECharts绘制网址径向树状图
an.rustfisher.com有很多内容,很多页面.如果用一个树状图把所有页面展示出来会是什么效果? 第一时间想到了ECharts. 最后效果: https://an.rustfisher.com ...
随机推荐
- JmsTemplate sendAndReceive 设置超时
通过调用sendAndReceive方法,实现发送消息之后可以同步接收返回信息. Message replyMsg = this.jmsQueueTemplate.sendAndReceive(new ...
- Spring MVC实现上传文件报错解决方案
报错代码: org.springframework.beans.BeanInstantiationException: Could not instantiate bean class [org.sp ...
- CAP Twelve Years Later: How the "Rules" Have Changed
The CAP theorem asserts that any networked shared-data system can have only two of three desirable ...
- s3cmd用法总结
概述 S3是亚马逊AWS提供的简单存储服务(可以理解为有公网域名的大容量高可用存储) S3配合CloudFront服务可作为CDN使用,它提供多节点全球发布 安装 方法一: yum install s ...
- C++11 并发指南四(<future> 详解三 std::future & std::shared_future)
上一讲<C++11 并发指南四(<future> 详解二 std::packaged_task 介绍)>主要介绍了 <future> 头文件中的 std::pack ...
- Nginx 功能模块
一.Nginx 核心功能模块 Nginx 核心功能模块负责 Nginx 的全局应用,主要对应主配置文件的 Main 区块和 Events 区块,这里有很多 Nginx 必须的全局参数配置. Nginx ...
- SNF开发平台WinForm-平板拍照及扫描二维码功能
在我们做项目的时候,经常会有移动平板处理检验,审核等,方便移动办公.这时就需要在现场拍照上传问题,把当场问题进行上传,也有已经拍完照的图片或加工过的图片进行上传.还有在车间现场一体机,工控机 这种产物 ...
- U盘安装CentOS 7卡住在 mounting configuration file system
使用UltraISO PE 9.6.0.3000刻录CentOS 7.2到U盘之后,在PC机上安装,一直卡住在此界面 网上各路大神各显神通,提供了各种各样的办法,后来根据一位网友的说法,顺利安装完成 ...
- Atitit 视图参数解决方案 oracle版和mysql版本 attilax总结.docx
Atitit 视图参数解决方案 oracle版和mysql版本 attilax总结.docx 1.1. Package机制1 1.2. 全局变量机制1 1.3. 临时表模式,oracle mysql都 ...
- linux每日命令(31):tar命令
tar命令可以为linux的文件和目录创建档案.利用tar,可以为某一特定文件创建档案(备份文件),也可以在档案中改变文件,或者向档案中加入新的文件.tar最初被用来在磁带上创建档案,现在,用户可以在 ...