js 树没用的树，法克

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>树形菜单示例</title>
<style type="text/css">
ul>li{
list-style: none;
}
/* 可展开*/
.switch-open
{
margin-left:-12px;
border:6px solid transparent;
display:inline-block;
width:0px;
height:0px;
border-top-color: black;

}
/* 展开完毕*/
.switch-close
{
margin-left:-12px;
border:6px solid transparent;
display:inline-block;
width:0px;
height:0px;
border-left-color: black;
margin-bottom: 2px;

}
/* 改变CheckBox样式*/
input[type='checkbox']{
width: 20px;
height: 20px;

-webkit-appearance:none;
-moz-appearance: none;
border: 1px solid #c9c9c9;
border-radius: 3px;
outline: none;
color:white;
text-align: center;
}
input[type='checkbox']:before
{
content: '√ ';
color:transparent;
}
input[type=checkbox]:checked{
background-color: #30add6;
}
input[type=checkbox]:checked:before{
content: '√';
color:white;
font-weight: bold;
}

</style>
</head>
<body>
<div class="warp">
<ul id="container">
</ul>
</div>

//结构
var json={
'0-0':{
'0-0-0':null,
'0-0-1':{
'0-0-1-0':null,
'0-0-1-1':null,
'0-0-1-2':null
},
'0-0-2':null
},
'0-1':{
'0-1-0':null,
'0-1-1':null
},
'0-2':null
};

//这里生成DOM
function generate(json,par)
{
for(var attr in json)
{
var ele=document.createElement('li');
if(!json[attr])
ele.innerHTML=' <input type="checkbox"></input>'+attr;
else
{
ele.innerHTML='<span><span class="switch-open" οnclick="toggle(this)"></span><input type="checkbox" οnclick="checkChange(this)"></input>'+attr+'</span>';
var nextpar=document.createElement('ul');
ele.appendChild(nextpar);
generate(json[attr],nextpar);
}
par.appendChild(ele);
}
}
generate(json,document.getElementById('container'));

//处理展开和收起
function toggle(eve)
{
var par=eve.parentNode.nextElementSibling;
if(par.style.display=='none')
{
par.style.display='block';
eve.className='switch-open';

}
else
{
par.style.display='none';
eve.className='switch-close';
}
}

//处理全部勾选和全部不选
function checkChange(eve)
{
var oul=eve.parentNode.nextElementSibling;
if(eve.checked)
{
for(var i=0;i<oul.querySelectorAll('input').length;i++)
{
oul.querySelectorAll('input')[i].checked=true;
}
}
else
{
for(var i=0;i<oul.querySelectorAll('input').length;i++)
{
oul.querySelectorAll('input')[i].checked=false;
}
}
}
</script>

</body>
</html>

转载于:https://www.cnblogs.com/ayanboke/p/11534529.html

js 树没用的树，法克相关推荐

JS组件系列——Bootstrap 树控件使用经验分享 - 懒得安分 - 博客园
前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地方调用选中项.不管怎么样,树控件都是很多项目里面不可或缺的组件之一.今天, ...
JS 数据结构之旅：通过JS实现栈、队列、二叉树、二分搜索树、AVL树、Trie树、并查集树、堆
JS 数据结构之旅栈概念栈是一个线性结构,在计算机中是一个相当常见的数据结构. 栈的特点是只能在某一端添加或删除数据,遵循先进后出的原则实现每种数据结构都可以用很多种方式来实现,其实可以把栈 ...
2021秋季《数据结构》_EOJ 1063.树的双亲存储法（parent+child / parent）
题目前面介绍了树的链式存储结构,那么如何用顺序存储来存储一棵树呢?在顺序存储时,我们除了存储每个结点值外,还要存储树中结点与结点之间的逻辑关系(即双亲与孩子结点之间的关系).下面介绍树的双亲存储法. ...
POJ 1635 Subway tree systems 树的Hash 或树的最小表示法
题目大意: 就是给出从树的中心开始的dfs序, 根据两个dfs序列判断两棵树是否同构大致思路: 首先根据dfs一直是从树的中心开始的, 所以不用担心中心的问题, 用树的Hash的话当然可以做另外一 ...
数据结构—回溯法、子集树、排列树
文章目录回溯法问题的解空间递归回溯迭代回溯子集树与排列树简单介绍轮船装载问题 0-1背包问题八皇后问题整数求和(1) 整数求和(2) 全排列回溯法回溯法是一种以深度优先方式系统搜索 ...
（数据结构）树的双亲表示法
树的双亲表示法此前写过二叉树的顺序存储和链式存储,此篇文章将介绍普通树是如何存储的... 通常,存储具有普通树结构数据的方法有 3 种: 双亲表示法孩子表示法孩子兄弟表示法而本篇文章将优先介绍 ...
回溯法—子集树与排列树
回溯法有"通用解题法"之称.用它可以系统地搜索问题的所有解.回溯法是一个既带有系统性又带有跳跃性的搜索算法. 在包含问题的所有解的解空间树中,按照深度优先搜索的策略,从根结点出发深 ...
d3.js v3版本实现-树状图
参考的例子:http://bl.ocks.org/robschmuecker/7880033 一.为什么选择d3.js 二.d3.js概述三:树状图实现 1.创建svg 2.在svg元素里面画一个g ...
（数据结构）树的Child表示法
树的孩子表示法此前介绍过用双亲表示法存储普通树,本篇文章将讲解另一种存储普通树的方法... 另一种方法是孩子表示法!!! 孩子表示法存储普通树采用的是:顺序表和链表的组合结构其存储过程是:从树的根 ...

js 树没用的树，法克

js 树没用的树，法克相关推荐

最新文章

热门文章

js 树 没用的树，法克

js 树 没用的树，法克相关推荐

最新文章

热门文章

js 树没用的树，法克

js 树没用的树，法克相关推荐