IE9+的树状下拉菜单,支持多选
//JS核心代码
function treeBox(Config){var el=eval(Config.el);var w=Config.width;var h=Config.height;var data=Config.data;var topData=Config.topData;var sl=Config.selectedNum;if(w==null){var wLv1=160;var wLv2=160;var wLv3=160;var wSelectde=200;}else{var wLv1=w.lv1;var wLv2=w.lv2;var wLv3=w.lv3;var wSelectde=w.selected;}
if(h==null){h=280}
if(sl==null){sl=3}
var wBox=wLv1+wLv2+wLv3+wSelectde;var lv_1='';var lv_2_parent='';var lv_3_parent='';var lv_0='';for(var k in data){lv_1+='<a class="lv1" data-id="'+data[k].id+'">'+data[k].name+'</a>';lv_2_parent+='<div class="lv2-parent" data-parent="'+data[k].id+'"></div>'
for(var i in data[k].children){lv_3_parent+='<div class="lv3-parent" data-parent="'+data[k].children[i].id+'"></div>'}}
var html='';html+='<div class="treeBox" style="width:'+wBox+'px;">';if(topData==null){}else{for(var k in topData){lv_0+='<a class="tree-top-item" data-id="'+topData[k].id+'" data-uid="'+topData[k].uid+'" tree-top-selected=false>'+topData[k].name+'</a>'}
html+='<div class="tree-top"><p>常用工种类型</p><div>'+lv_0+'</div></div>';}
html+='<table cellspacing="0"><tr>';html+='<td width="'+wLv1+'" style="border-left:none;"><div class="tree tree-lv1" style="height:'+h+'px;">'+lv_1+'</div></td>';html+='<td width="'+wLv2+'"><div class="tree tree-lv2" style="height:'+h+'px;">'+lv_2_parent+'</div></td>';html+='<td width="'+wLv3+'"><div class="tree tree-lv3" style="height:'+h+'px;">'+lv_3_parent+'</div></td>';html+='<td width="'+wSelectde+'"style="border-right:none;><div class="tree">';html+='<div class="tree-status"><span style="font-size:14px;color:#777;">已选择 ( <span class="selectedNum">0</span> )</span><a class="tree-del-all">清空</a></div>';html+='<div class="tree-selected"></div></div></td>';html+='</tr></table>';html+='<div class="tree-send-val"><a class="tree-btn tree-close">关闭</a><a class="tree-btn tree-confirm">确定</a></div>';html+='</div>';$("#treeBox").append(html);var n=0;for(var k in data){var lv_2_son='';for(var i in data[k].children){n++;lv_2_son+='<a class="lv2" data-id="'+data[k].children[i].id+'">'+data[k].children[i].name+'</a>';var lv_3_son='';for(var j in data[k].children[i].children){var v=data[k].children[i].children[j].id;var name=data[k].children[i].children[j].name;var uid=data[k].children[i].children[j].uid;lv_3_son+='<label><input type="checkbox" class="lv3" value="'+v+' " data-uid="'+uid+'" data-name="'+name+'"><span>'+name+'</span></label>'}
$(".lv3-parent").eq(n-1).append(lv_3_son);}
$(".lv2-parent").eq(k).append(lv_2_son)}
$(".lv2-parent").eq(0).addClass("tree-show");$(".lv3-parent").eq(0).addClass("tree-show");$(".lv1").eq(0).addClass("tree-active");$(".lv2").eq(0).addClass("tree-active");$(".lv1").on('click',function(){var v=$(this).data('id');$(".lv2-parent").each(function(index){if($(this).data('parent')==v){$(".lv2-parent").removeClass("tree-show");$(".lv2-parent").eq(index).addClass("tree-show");$(".lv2-parent").eq(index).children().eq(0).click();}});$(".lv1").removeClass("tree-active");$(this).addClass("tree-active");$(".tree").scrollTop(0);})
$(".lv2").on('click',function(){var v=$(this).data('id');$(".lv3-parent").each(function(index){if($(this).data('parent')==v){$(".lv3-parent").removeClass("tree-show");$(".lv3-parent").eq(index).addClass("tree-show")}});$(".lv2").removeClass("tree-active");$(this).addClass("tree-active");$(".tree").scrollTop(0);});var max=sl-1;$(".lv3").on('change',function(){var v=$(this).val();var name=$(this).data('name');var uid=$(this).data('uid');var l=$(".tree-selected-item").length;if($(this).prop('checked')){if(l<max){var item='<p class="tree-selected-item" data-id="'+v+'" data-uid="'+uid+'" data-name="'+name+'"><span>'+name+'</span><a class="tree-del-this"></a></p>'
$(".tree-selected").append(item);}else if(l==max){var item='<p class="tree-selected-item" data-id="'+v+'" data-uid="'+uid+'" data-name="'+name+'"><span>'+name+'</span><a class="tree-del-this"></a></p>'
$(".tree-selected").append(item);$(".lv3:not(:checked)").prop("disabled",true);}
$(".selectedNum").text(l+1);}else{$(".tree-selected-item").each(function(index){if($(this).data('id')==v){$(".tree-selected-item").eq(index).remove()}});$(".tree-top-item").each(function(index){if($(this).data('id')==v){$(this).attr("tree-top-selected",false);$(this).removeClass('tree-active');}});$(".lv3:not(:checked)").prop("disabled",false);$(".selectedNum").text(l-1);}});$(".tree-top-item").on('click',function(){var v=$(this).data('id');var uid=$(this).data('uid');var name=$(this).text();var l=$(".tree-selected-item").length;var top_s=$(this).attr('tree-top-selected');if(top_s=='true'){return false}else{if(l<max){$(this).attr('tree-top-selected',true);$(this).addClass('tree-active');var item='<p class="tree-selected-item" data-id="'+v+'" data-uid="'+uid+'" data-name="'+name+'"><span>'+name+'</span><a class="tree-del-this"></a></p>'
$(".tree-selected").append(item);$(".lv3").each(function(index){if($(this).val()==v){$(this).prop("checked",true)}});$(".selectedNum").text(l+1);}else if(l==max){$(this).attr('tree-top-selected',true);$(this).addClass('tree-active');var item='<p class="tree-selected-item" data-id="'+v+'" data-uid="'+uid+'" data-name="'+name+'"><span>'+name+'</span><a class="tree-del-this"></a></p>'
$(".tree-selected").append(item);$(".lv3").each(function(index){if($(this).val()==v){$(this).prop("checked",true)}});$(".lv3:not(:checked)").prop("disabled",true);$(".selectedNum").text(l+1);}}})
$(".tree-del-all").on('click',function(){$(".lv3").prop("checked",false);$(".lv3:not(:checked)").prop("disabled",false);$(".selectedNum").text(0);$(".tree-selected").empty();$(".tree-top-item").attr('tree-top-selected',false);$(".tree-top-item").removeClass('tree-active');});$("body").on('click','.tree-del-this',function(){var v=$(this).parent().data('id');var l=$(".tree-selected-item").length;$(".lv3").each(function(index){if($(this).val()==v){$(this).prop("checked",false)}});$(".tree-top-item").each(function(index){if($(this).data('id')==v){$(this).attr("tree-top-selected",false);$(this).removeClass('tree-active');}});$(this).parent().remove();$(".lv3:not(:checked)").prop("disabled",false);$(".selectedNum").text(l-1);});var off=true;if(el.is("input")){el.focus(function(){$(".treeBox").css({'display':'block'})});}else{el.on('click',function(){if(off){$(".treeBox").css({'display':'block'});off=false}else{$(".treeBox").css({'display':'none'});off=true}})}
$(".tree-close").on('click',function(){$(".treeBox").css({'display':'none'});$(".lv3").prop("checked",false);$(".lv3:not(:checked)").prop("disabled",false);$(".selectedNum").text(0);$(".tree-selected").empty();$(".tree-top-item").attr('tree-top-selected',false);$(".tree-top-item").removeClass('tree-active');off=true;});var selected=[];var strSelected='';$(".tree-confirm").on('click',function(){selected=[];strSelected='';$(".tree-selected-item").each(function(){var name=$(this).data('name');var v=$(this).data('id');var uid=$(this).data('uid');selected.push({name:name,value:v,uid:uid});strSelected+=name+'&';});strSelected=strSelected.substring(0,strSelected.length-1);if(el.is("input")){el.val(strSelected)}else{if(strSelected==''){el.text('全部')}else{el.text(strSelected)}}
Config.confirm(selected);off=true;$(".treeBox").css({'display':'none'})})}
这里只贴出JS代码 demo地址:https://github.com/CNbozi/Treeview/
IE9+的树状下拉菜单,支持多选的更多相关文章
- 手把手教学~基于element封装tree树状下拉框
在日常项目开发中,树状下拉框的需求还是比较常见的,但是element并没有这种组件以供使用.在这里,小编就基于element如何封装一个树状下拉框做个详细的介绍. 通过这篇文章,你可以了解学习到一个树 ...
- selemiun 下拉菜单、复选框、弹框定位识别
一.下拉菜单识别 对下拉框的操作,主要是通过Select 类里面的方法来实现的,所以需要new 一个Select 对象(org.openqa.selenium.support.ui.Select)来进 ...
- layui+ztree 树状下拉框
一.效果图 [关闭] [展开] 二.代码 [HTML]注:布局一定要用DIV不是select否则效果···· <div class="layui-form-item"> ...
- Bootstrap 下拉菜单和滚动监听插件
一.下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...
- Bootstrap下拉菜单
前面的话 网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换.有上下文的菜单.而且在各种交互状态下的菜单展示需要和javascript插件配合 ...
- Selenium下拉菜单(Select)的操作-----Selenium快速入门(五)
对于一般元素的操作,我们只要掌握本系列的第二,三章即可大致足够.对于下拉菜单(Select)的操作,Selenium有专门的类Select进行处理.文档地址为:http://seleniumhq.gi ...
- 第二百四十四节,Bootstrap下拉菜单和滚动监听插件
Bootstrap下拉菜单和滚动监听插件 学习要点: 1.下拉菜单 2.滚动监听 本节课我们主要学习一下 Bootstrap 中的下拉菜单插件,这个插件在以组件的形式我们 已经学习过,那么现在来看看怎 ...
- DOM(十)使用DOM设置单选按钮、复选框、下拉菜单
1.设置单选按钮 单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个.每一个都有checked属性,当一项选择为t ...
- 支持多种浏览器的纯css下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- charles 破解方法
1.https://www.charlesproxy.com/latest-release/download.do 官网下载charles 2.傻瓜式安装完成(路径可以默认c盘) 3.安装完成后去c盘 ...
- 【uni-app】uni.request二次封装,更好的管理api接口和使用
前言 之前写了一个Vue.js的axios二次封装(点击跳转),这次是uni-app,uni-app是基于vue.js框架的,我觉得是很好用的一个框架,而且一套代码编译那么多平台,非常节省成本,当然, ...
- Beta冲刺<10/10>
这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 Beta冲刺 这个作业的目标 Beta冲刺--第十天(05.28) 作业正文 如下 其他参考文献 ... B ...
- [ C++ ] 勿在浮沙筑高台 —— 内存管理(9~16p)primitives(下)
per-class allocator 2 tips: operator new重载 不会被派生类实际使用,因为父类大小内存的分配交给子类去调用明显是不正确的.实际上会被转交至 : : operato ...
- weblogic高级进阶之ssl配置证书
1.首先需要明白ssl的原理 这里我们使用keytool的方式为AdminServer配置ssl证书 配置证书的方式如下所示: C:\Users\Administrator\Desktop\mykey ...
- MySql数据库GROUP BY使用过程中的那些坑
MySql数据库GROUP BY使用过程中的那些坑 GROUP BY 语句用于结合合计函数,根据一个或多个列对结果集进行分组. 特别注意: group by 有一个原则,就是 select 后面的所有 ...
- vue全家桶(3.1)
4.数据请求 4.1.axios是什么? axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它有以下特征: 从浏览器中创建 XMLHttpRequest 从 no ...
- python设计模式之策略模式
每次看到项目中存在大量的if else代码时,都会心生一丝不安全感. 特别是产品给的需求需要添加或者更改一种if条件时,生怕会因为自己的疏忽而使代码天崩地裂,哈哈,本文的目的就是来解决这种不安全感的, ...
- 浅谈pyautogui模块
pyautogui模块 PyAutoGUI--让所有GUI都自动化 安装代码: pip install pyautogui 目的 PyAutoGUI是一个纯Python的GUI自动化工具,其目的是可以 ...
- python三大神器之fabric
Fabric Fabric是一个python的远程执行shell的库,同时它也是一个命令行工具.它提供了丰富的同 SSH 交互的接口,可以用来在本地或远程机器上自动化.流水化地执行 Shell 命令. ...