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 ...
随机推荐
- VBScript.RegExp 正则表达式excel vba 学习经验
1) 手动引用(前期绑定) 点击VBE编辑器菜单:工具 - 引用,选取: Microsoft VBScript Regular Expressions 5.5 Dim regex As New ...
- 查看最新的Google地址
nslookup www.google.com 8.8.8.8
- Spark初识
一.简介 1.什么是Spark 官网地址:http://spark.apache.org/ Apache Spark™是用于大规模数据处理的统一分析引擎. 从右侧最后一条新闻看,Spark也用于AI人 ...
- Python进度条小实例
代码理解: 函数view_bar(num,total) num是一个随即数,total是总数( num / total ) * 的int类型可以计算百分比 '\r%d%%%s' % (rate_num ...
- windows server r2 安装vs2017 更新补丁Windows8.1-KB2919355-x6
方法一: 点击vs2017安装包后提示需要更新Windows8.1-KB2919355-x64补丁 点击链接进入全部下载后查看官方安装顺序为 注意 必须按照以下顺序安装更新:clearcompress ...
- too many open files
压测遇到这个问题,每次都查,记录一下: 系统分配文件数太少,临时修改方案: ulimit -n 2048 永久配置: vim /etc/security/limits.conf 底部配置: # End ...
- @Transactional(rollbackFor = Exception.class)
@Transactional(rollbackFor = Exception.class)这个注解只有在出异常时才会回滚,需要回滚时没有异常也要人为制造异常(自定义异常)所以,如果使用了异常捕获,很有 ...
- 【转】WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展
一.前言.预览 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等. 本文主要是对文本输入控件进行样式开发,及相关扩展功能开发,主要内容包括: 基本文 ...
- Java8使用@sun.misc.Contended避免伪共享(False Sharing)
伪共享(False Sharing) Java8中用sun.misc.Contended避免伪共享(false sharing) Java8使用@sun.misc.Contended避免伪共享
- Android实现电话录音功能
需求分析 电话录音是在通话的时候进行录音,所以需要使用一个服务来完成功能. 需要监听电话的状态,分为三种状态: 空闲状态 TelephonyManager.CALL_STATE_IDLE 响铃状态 ...