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 ...
随机推荐
- 《Unix&Linux大学教程》学习笔记四:标准I/O 与 过滤器
1:标准IO Unix中的标准IO主要包括:标准输入.标准输出(正常输出).标准错误(异常信息) 2:重定向输出 内容 > 文件名 :将内容输出到文件,并且覆盖文件原来内容:文件不存在则新建 内 ...
- Jmeter进行接口测试
原文地址:https://www.cnblogs.com/nancyzhu/p/8035042.html web接口测试工具: 手工测试的话可以用postman ,自动化测试多是用到 Jmeter(开 ...
- swift学习之常量和变量
常量:就是在初始化时(试试定义时不赋值会不会报错)赋予一个准确的值,能够在非常多地方直接用到,用letkeyword生命 变量:这个就不用说了,就是能够在下一秒你能够随便改变的量,用varkeywor ...
- Xilinx 常用模块汇总(verilog)【04】
作者:桂. 时间:2018-05-15 13:07:02 链接:http://www.cnblogs.com/xingshansi/p/9040472.html 前言 Xilinx 常用模块汇总(v ...
- 格雷码(Gray code)仿真
作者:桂. 时间:2018-05-12 16:25:02 链接:http://www.cnblogs.com/xingshansi/p/9029081.html 前言 FIFO中的计数用的是格雷码, ...
- iOS画折线图
代码例子效果: 下载地址:http://download.csdn.net/detail/qqmcy/6983187 LineChartViewDemo.h #import <UIKit/UI ...
- [docker]docker4种网络最佳实战
参考: http://hicu.be/docker-container-network-types docker默认3中网络类型 参考: https://docs.docker.com/engine/ ...
- ceph 的 bufferlist
bufferlist是buffer::list的别名,其由来在 http://bean-li.github.io/bufferlist-in-ceph/ 中有非常详细的介绍 其p.p_off.off字 ...
- kafka项目中踩到的一个坑(客户端和服务器端版本不一致问题)
启动项目时控制台抛出的异常信息: -- :: --- [ main] o.s.s.c.ThreadPoolTaskScheduler : Initializing ExecutorService 't ...
- 《Essential C++》读书笔记 之 面向过程编程风格
<Essential C++>读书笔记 之 面向过程编程风格 2014-06-18 2.2 调用(invoking)一个函数 2.2.1 Pass by Reference语义 在函数sw ...