当前位置：网站首页>jq封装树形下拉选择框组件
jq封装树形下拉选择框组件
2022-08-10 09:02:00 【听听那晚风】
目前只是做了单选功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
.one-tree-select {
width: 240px;
position: relative;
font-size: 14px;
color: #606266;
}
.one-selected {
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
color: #606266;
font-size: inherit;
height: 30px;
line-height: 30px;
outline: none;
padding: 0 15px;
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
width: 100%;
box-sizing: border-box;
}
.select-item-box {
position: absolute;
top: 100%;
width: 100%;
height: 200px;
border: 1px solid #e4e7ed;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
box-sizing: border-box;
margin: 5px 0px;
overflow: hidden;
overflow-y: scroll;
}
.two-tree-select {
cursor: pointer;
/* margin-left: 15px; */
box-sizing: border-box;
}
.select-item {
line-height: 34px;
position: relative;
z-index: 6;
}
.select-bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 5;
}
.select-item:hover {
background: #f5f7fa;
}
.three-tree-select {
height: 34px;
/* margin-left: 15px; */
box-sizing: border-box;
}
.two-tree-selected-box {
display: flex;
align-items: center;
}
.two-tree-selected {
flex: 1;
width: 180px;
}
.three-tree-selected-box {
display: flex;
align-items: center;
}
.tree-selected{
margin-left: 15px;
}
.three-tree-selected {
flex: 1;
width: 180px;
margin-left: 30px;
}
.select-change{
margin-right: 10px;
transition: transform .2s;
transform: rotate(90deg);
}
.select-change-open{
transform: rotate(0deg);
}
.select-item-box::-webkit-scrollbar {
width: 5px;
}
.select-item-box::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(144,147,153,.3);
background: rgba(144,147,153,.3);/*颜色*/
}
.select-item-box::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(144,147,153,.3);
background: #ffffff;
}
</style>
<body>
<div class="one-tree-select">
<div class="one-selected"></div>
<div class="select-item-box"></div>
</div>
</body>
<script src="https://g.alicdn.com/jssdk/u-link/index.min.js"></script>
<script src="./js/jquery.js"></script>
<script>
$(function(){
renderTree()
})
var dataList = [{
"item_name": "推荐",
"Id": "1",
"parent_id": "0",
"sort": 9,
"depth": 1,
"children": [{
"item_name": "推荐课程",
"Id": "8",
"parent_id": "1",
"sort": 8,
"depth": 2,
"children": []
},
{
"item_name": "短视频",
"Id": "9",
"parent_id": "1",
"sort": 7,
"depth": 2,
"children": []
},
{
"item_name": "最热",
"Id": "10",
"parent_id": "1",
"sort": 5,
"depth": 2,
"children": []
},
{
"item_name": "最新",
"Id": "11",
"parent_id": "1",
"sort": 4,
"depth": 2,
"children": []
},
{
"item_name": "音频",
"Id": "12",
"parent_id": "1",
"sort": 3,
"depth": 2,
"children": []
}
]
},
{
"item_name": "免费课程",
"Id": "2",
"parent_id": "0",
"sort": 7,
"depth": 1,
"children": [{
"item_name": "免费",
"Id": "21",
"parent_id": "2",
"sort": 1,
"depth": 2,
"children": []
},
{
"item_name": "1",
"Id": "22",
"parent_id": "2",
"sort": 0,
"depth": 2,
"children": []
},
{
"item_name": "2",
"Id": "23",
"parent_id": "2",
"sort": 0,
"depth": 2,
"children": []
},
{
"item_name": "3",
"Id": "24",
"parent_id": "2",
"sort": 0,
"depth": 2,
"children": []
},
{
"item_name": "4",
"Id": "25",
"parent_id": "2",
"sort": 0,
"depth": 2,
"children": []
},
{
"item_name": "5",
"Id": "26",
"parent_id": "2",
"sort": 0,
"depth": 2,
"children": []
},
{
"item_name": "777777",
"Id": "27",
"parent_id": "2",
"sort": 0,
"depth": 2,
"children": []
},
{
"item_name": "付费课程付费",
"Id": "28",
"parent_id": "2",
"sort": 0,
"depth": 2,
"children": []
}
]
},
{
"item_name": "经营账",
"Id": "3",
"parent_id": "0",
"sort": 6,
"depth": 1,
"children": []
},
{
"item_name": "云学堂",
"Id": "4",
"parent_id": "0",
"sort": 5,
"depth": 1,
"children": [{
"item_name": "云学堂分类1",
"Id": "29",
"parent_id": "4",
"sort": 0,
"depth": 2,
"children": []
}]
},
{
"item_name": "进阶课",
"Id": "5",
"parent_id": "0",
"sort": 4,
"depth": 1,
"children": []
},
{
"item_name": "音频",
"Id": "6",
"parent_id": "0",
"sort": 3,
"depth": 1,
"children": [{
"item_name": "测试音频2",
"Id": "20",
"parent_id": "6",
"sort": 2,
"depth": 2,
"children": []
}]
}
]
function renderTree(){
console.log(1)
console.log(dataList[0].item_name)
let tHtml = "";//头部
for(let i in dataList){
if(dataList[i].children.length>0){
tHtml +=`<div class="two-tree-select"> <div class="two-tree-selected-box select-item" id="tree${
dataList[i].Id}"> <div class="two-tree-selected tree-selected">${
dataList[i].item_name}</div> <div class="select-change"> > </div> </div></div>`
}else{
tHtml +=`<div class="two-tree-select"> <div class="two-tree-selected-box select-item" id="tree${
dataList[i].Id}"> <div class="two-tree-selected tree-selected">${
dataList[i].item_name}</div> </div></div>`
}
}
$(".select-item-box").html(tHtml);//渲染项目头部
for(let i in dataList){
let zHtml = "";//第二级
if(dataList[i].children.length>0){
for(let j in dataList[i].children){
zHtml += `<div class="three-tree-selected-box select-item"><div class="three-tree-selected tree-selected">${
dataList[i].children[j].item_name}</div></div>`
}
}
$("#tree"+dataList[i].Id).after(zHtml);
}
}
//展开 收缩下拉框
$(document).on("click", ".one-tree-select", function () {
$(this).find('.select-item-box').toggle()
})
//禁止触发父级事件
$(document).on("click", ".select-item-box", function (e) {
e.stopPropagation()
})
//点击下拉框 选中该下拉框的值
$(document).on("click", ".select-item", function (e) {
e.stopPropagation()
let text = $(this).find('.tree-selected').text()
$('.one-selected').text(text)
})
//点击展开符 隐藏 展开子级
$(document).on("click", ".select-change", function (e) {
e.stopPropagation()
$(this).parents('.two-tree-selected-box').nextAll('.three-tree-selected-box').toggle()
if($(this).hasClass("select-change-open")){
$(this).removeClass("select-change-open");
} else{
$(this).addClass("select-change-open")
}
})
</script>
</html>
边栏推荐
猜你喜欢
初识Flink 完整使用 (第一章)
00后女孩月薪3200，3年买两套房，这个程序员变现新风口千万要把握住
PTA 习题2.2 数组循环左移
数据库注入提权总结（一）
J9 Digital Theory: What kind of sparks will Web3.0+ Internet e-commerce cause?
![How to use [jmeter regular expression extractor] to solve the problem of returning the value as a parameter](/img/bf/2367304d5bdf520e369097a49a7bb6.png)
How to use [jmeter regular expression extractor] to solve the problem of returning the value as a parameter
![[Metaverse Omi Says] Listen to how Rabbit Fan Rabbit creates a new era of trendy play from virtual to reality](/img/e8/f431a9c932e0fa5f413b1f7e09bf46.png)
[Metaverse Omi Says] Listen to how Rabbit Fan Rabbit creates a new era of trendy play from virtual to reality
I don't want to do accounting anymore, Die changed to a new one, moved forward bravely, and finally successfully passed the career change test to double his monthly salary~
多线程知识点总结之温故而知新
Nvidia's gaming graphics card revenue plummets / Google data center explosion injures 3 people / iPhone battery percentage returns... More news today is here...
随机推荐
高性能短连接设计
NaiveUI中看起来没啥用的组件(文字渐变)实现原来这么简单
mySQL add, delete, modify and check advanced
速卖通卖家如何抓住产品搜索权重
Question brushing tool h
2022-08-09：以下go语言代码输出什么？A：否，会 panic；B：是，能正确运行；C：不清楚，看投票结果。
【微服务架构】为故障设计微服务架构
2022 首期线下 Workshop！面向应用开发者们的数据应用体验日来了 | TiDB Workshop Day
DeepFake换脸诈骗怎么破？让他侧个身
线程池的基本概念、结构、类
PTA 习题2.1 简单计算器
JWT：拥有我，即拥有权力
【Unity入门计划】Collision2D类＆Collider2D类
Ask next CDC mysql to Doris. Don't show the specific number of lines, how to do?
DAY25：逻辑漏洞复现
Flink运行时架构 完整使用 (第四章)
Flink部署 完整使用 (第三章)
UGUI—事件，iTween插件
ShardingSphere入门
封装和使用通用的工具栏组件