当前位置：网站首页>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>
边栏推荐
- How to break the DeepFake face-changing scam?turn him over
- 明明加了唯一索引，为什么还是产生重复数据？
- js读取excel时间格式转换
- OLTP and OLAP database architecture 】 【 : actual comparison
- [Metaverse Omi Says] Listen to how Rabbit Fan Rabbit creates a new era of trendy play from virtual to reality
- dayjs-----时间格式化
- 速卖通卖家如何抓住产品搜索权重
- 初识Flink 完整使用 (第一章)
- DAY25: Logic Vulnerability
- js reads excel time format conversion
猜你喜欢
英伟达游戏显卡营收暴跌/ 谷歌数据中心爆炸致3人受伤/ iPhone电量百分比回归…今日更多新鲜事在此...
![[System Design] S3 Object Storage](/img/62/0e3fef066b06ba83cadb406cfa075b.png)
[System Design] S3 Object Storage
数据库注入提权总结（一）
【业务架构】价值链分析：提高客户价值和盈利能力
ARM Architecture 2: Processor Core and Assembly Instruction Set
iwemeta metaverse: a doll sells for 9999 yuan, and Bubble Mart thinks it is not expensive at all
【API 管理】什么是 API 管理，为什么它很重要？
明明加了唯一索引，为什么还是产生重复数据？
FPGA时钟篇(二) 7系列clock region详解
多线程浅谈
随机推荐
shell iterates over folders and outputs
Unity—UGUI control
2022-08-09：以下go语言代码输出什么？A：否，会 panic；B：是，能正确运行；C：不清楚，看投票结果。
ARM结构体系3：ARM指令的寻址和异常中断处理
【OAuth2】十九、OpenID Connect 动态客户端注册
人
JVM探究
m.bjhjwy.com全面教学设备 类型包括： 教学仪器, 教学设备 ,
iwemeta metaverse: Ali's first COO: how to build a sales force
[System Design] S3 Object Storage
Spotify使用C4模型表达其架构设计
[Metaverse Omi Says] Listen to how Rabbit Fan Rabbit creates a new era of trendy play from virtual to reality
DAY26：GetShell专题
PTA Exercise 2.1 Simple Calculator
FPGA的虚拟时钟如何使用？
ShardingSphere入门
DataStream API（基础篇） 完整使用 (第五章)
将博客搬至CSDN
Docker搭建Mysql一主一从
组合数模板