vue简单的CheckBox节点树
初学vue.js，恰好公司有个页面需要做一个简单的CheckBox组成的节点树，于是摸索着写了一个。
业务逻辑为：选中父节点，子节点全部选中；取消选中父节点，子节点全部取消；选中字节点，父节点选中。
附例子链接：写完的html页面，下载后可以直接在浏览器上观看。
样式如下：
准备工作：引入vue.js
Html代码如下：div container 为显示节点树的div
<div id="container">
<ul class="Ones">
<One v-for="One in Ones" :One.sync="One"></One>
</ul>
</div>
vue的三个模板代码如下（一级节点、二级节点、三级节点）css都是临时写的 没有做整理 有些class样式代码中也没有写。
<script type="x/template" id="One">//一级节点模板
<li class="One">
<div class="tree_div">
<input :id="One.Code" type="checkbox" v-model="oneSelect" style="margin-top:0px !important; margin-bottom:4px !important;">
<label style="font-size:16px !important;color:red;" :for="One.Code">{{ One.FuncName }}</label>
</div> <ul class="Twos">
<Two v-for="Two in One.Twos" :Two.sync="Two"></Two>
</ul>
</li>
</script> <script type="x/template" id="Two">//二级节点模板
<li class="Two">
<div class="tree_div">
<input :id="Two.Code" type="checkbox" v-model="twoSelect" style="margin-top:0px !important; margin-bottom:4px !important;">
<label style="font-size:16px !important;color:blue;" :for="Two.Code">{{ Two.FuncName }}</label>
</div>
<ul class="Threes">
<Three v-for="Three in Two.Threes" :Three.sync="Three"></Three>
</ul>
</li>
</script> <script type="x/template" id="Three">//三级节点模板
<li class="Three">
<div class="tree_div">
<input :id="Three.Code" type="checkbox" v-model="threeSelect" style="margin-top:0px !important; margin-bottom:4px !important;">
<label style="font-size:16px !important;color:green;" :for="Three.Code">{{ Three.FuncName }}</label>
</div>
<div class="Fours" style="margin-left:20px;max-width:400px;margin-top:4px;">
<span style="margin-right:10px;" v-for="Four in Three.Fours">
<input :id="Four.Code" type="checkbox" v-model="Four.Selected" style="margin-top:0px !important; margin-bottom:4px !important;">
<label style="font-size:16px !important;color:darkslateblue;" :for="Four.Code">{{ Four.FuncName }}</label>
</span> </div>
</li>
</script>
vue的组件代码如下：（代码写的比较low，希望各位大大指正）
//一级节点 组件
Vue.component('One', {
props: ['One'],
template: '#One',
computed: {
oneSelect: {
get: function () {//点击子节点时触发（子节点选中，父节点也选中）
var Selected;
if (this.One.Twos && this.One.Twos.length > 0) {
Selected = this.One.Twos.some(function (Two) {
if (Two.Threes && Two.Threes.length > 0) {
Two.Selected = Two.Threes.some(function (Three) {
if (Three.Fours && Three.Fours.length > 0) {
Three.Selected = Three.Fours.some(function (Four) {
return Four.Selected;
});
}
return Three.Selected;
});
}
return Two.Selected;
});
} else {
Selected = this.One.Selected;
}
return Selected; },
set: function (value) {//点击节点本身时触发（选中、取消 所有子节点）
if (this.One.Twos && this.One.Twos.length > 0) {
this.One.Twos.forEach(function (Two) {
Two.Selected = value;
if (Two.Threes && Two.Threes.length > 0) {
Two.Threes.forEach(function (Three) {
Three.Selected = value;
if (Three.Fours && Three.Fours.length > 0) {
Three.Fours.forEach(function (Four) {
Four.Selected = value;
})
}
})
}
});
}
this.One.Selected = value;
}
}
}
}) //二级节点 组件
Vue.component('Two', {
props: ['Two'],
template: '#Two',
computed: {
twoSelect: {
get: function () {//点击子节点时触发（子节点选中，父节点也选中）
var Selected;
if (this.Two.Threes && this.Two.Threes.length > 0) {
Selected = this.Two.Threes.some(function (Three) {
if (Three.Fours && Three.Fours.length > 0) {
Three.Selected = Three.Fours.some(function (Four) {
return Four.Selected;
});
}
return Three.Selected;
});
} else {
Selected = this.Two.Selected;
}
return Selected;
},
set: function (value) {//点击节点本身时触发（选中、取消 所有子节点） if (this.Two.Threes && this.Two.Threes.length > 0) {
this.Two.Threes.forEach(function (Three) {
Three.Selected = value;
if (Three.Fours && Three.Fours.length > 0) {
Three.Fours.forEach(function (Four) {
Four.Selected = value;
})
}
});
}
this.Two.Selected = value;
}
}
}
}) //三级节点 组件
Vue.component('Three', {
props: ['Three'],
template: '#Three',
computed: {
threeSelect: {
get: function () {//点击子节点时触发（子节点选中，父节点也选中）
var Selected;
if (this.Three.Fours && this.Three.Fours.length > 0) {
Selected = this.Three.Fours.some(function (Four) {
return Four.Selected;
});
} else {
Selected = this.Three.Selected;
}
return Selected;
},
set: function (value) {//点击节点本身时触发（选中、取消 所有子节点）
if (this.Three.Fours && this.Three.Fours.length > 0) {
this.Three.Fours.forEach(function (Four) {
Four.Selected = value;
});
}
this.Three.Selected = value;
}
}
}
})
最后的就是vue的数据绑定代码了：
var app = new Vue({
el: '#container',
data: {
Ones: [{
Code: 1,
FuncName: '一级节点1',
Twos: [
{
Code: 2,
Selected: false,
FuncName: '二级节点1',
Threes: [
{
Code: 3,
Selected: true,
FuncName: 'joe的商品2'
},
{
Code: 4,
Selected: false,
FuncName: '三级节点1',
Fours: [{
Code: 5,
Selected: true,
FuncName: '四级节点1'
}, {
Code: 6,
Selected: true,
FuncName: '四级节点2'
}]
}
]
},
{
Code: 7,
Selected: false,
FuncName: '二级节点2'
}
],
Selected: false
}]
}
});
整体页面代码如下：
<html> <head>
<title></title>
</head> <body> <div id="container">
<ul class="Ones">
<One v-for="One in Ones" :One.sync="One"></One>
</ul>
</div> <script src="vue.min.js"></script> <script type="x/template" id="One">//一级节点模板
<li class="One">
<div class="tree_div">
<input :id="One.Code" type="checkbox" v-model="oneSelect" style="margin-top:0px !important; margin-bottom:4px !important;">
<label style="font-size:16px !important;color:red;" :for="One.Code">{{ One.FuncName }}</label>
</div> <ul class="Twos">
<Two v-for="Two in One.Twos" :Two.sync="Two"></Two>
</ul>
</li>
</script> <script type="x/template" id="Two">//二级节点模板
<li class="Two">
<div class="tree_div">
<input :id="Two.Code" type="checkbox" v-model="twoSelect" style="margin-top:0px !important; margin-bottom:4px !important;">
<label style="font-size:16px !important;color:blue;" :for="Two.Code">{{ Two.FuncName }}</label>
</div>
<ul class="Threes">
<Three v-for="Three in Two.Threes" :Three.sync="Three"></Three>
</ul>
</li>
</script> <script type="x/template" id="Three">//三级节点模板
<li class="Three">
<div class="tree_div">
<input :id="Three.Code" type="checkbox" v-model="threeSelect" style="margin-top:0px !important; margin-bottom:4px !important;">
<label style="font-size:16px !important;color:green;" :for="Three.Code">{{ Three.FuncName }}</label>
</div>
<div class="Fours" style="margin-left:20px;max-width:400px;margin-top:4px;">
<span style="margin-right:10px;" v-for="Four in Three.Fours">
<input :id="Four.Code" type="checkbox" v-model="Four.Selected" style="margin-top:0px !important; margin-bottom:4px !important;">
<label style="font-size:16px !important;color:darkslateblue;" :for="Four.Code">{{ Four.FuncName }}</label>
</span> </div>
</li>
</script>
<script type="text/javascript">
//一级节点 组件
Vue.component('One', {
props: ['One'],
template: '#One',
computed: {
oneSelect: {
get: function () {//点击子节点时触发（子节点选中，父节点也选中）
var Selected;
if (this.One.Twos && this.One.Twos.length > 0) {
Selected = this.One.Twos.some(function (Two) {
if (Two.Threes && Two.Threes.length > 0) {
Two.Selected = Two.Threes.some(function (Three) {
if (Three.Fours && Three.Fours.length > 0) {
Three.Selected = Three.Fours.some(function (Four) {
return Four.Selected;
});
}
return Three.Selected;
});
}
return Two.Selected;
});
} else {
Selected = this.One.Selected;
}
return Selected; },
set: function (value) {//点击节点本身时触发（选中、取消 所有子节点）
if (this.One.Twos && this.One.Twos.length > 0) {
this.One.Twos.forEach(function (Two) {
Two.Selected = value;
if (Two.Threes && Two.Threes.length > 0) {
Two.Threes.forEach(function (Three) {
Three.Selected = value;
if (Three.Fours && Three.Fours.length > 0) {
Three.Fours.forEach(function (Four) {
Four.Selected = value;
})
}
})
}
});
}
this.One.Selected = value;
}
}
}
}) //二级节点 组件
Vue.component('Two', {
props: ['Two'],
template: '#Two',
computed: {
twoSelect: {
get: function () {//点击子节点时触发（子节点选中，父节点也选中）
var Selected;
if (this.Two.Threes && this.Two.Threes.length > 0) {
Selected = this.Two.Threes.some(function (Three) {
if (Three.Fours && Three.Fours.length > 0) {
Three.Selected = Three.Fours.some(function (Four) {
return Four.Selected;
});
}
return Three.Selected;
});
} else {
Selected = this.Two.Selected;
}
return Selected;
},
set: function (value) {//点击节点本身时触发（选中、取消 所有子节点） if (this.Two.Threes && this.Two.Threes.length > 0) {
this.Two.Threes.forEach(function (Three) {
Three.Selected = value;
if (Three.Fours && Three.Fours.length > 0) {
Three.Fours.forEach(function (Four) {
Four.Selected = value;
})
}
});
}
this.Two.Selected = value;
}
}
}
}) //三级节点 组件
Vue.component('Three', {
props: ['Three'],
template: '#Three',
computed: {
threeSelect: {
get: function () {//点击子节点时触发（子节点选中，父节点也选中）
var Selected;
if (this.Three.Fours && this.Three.Fours.length > 0) {
Selected = this.Three.Fours.some(function (Four) {
return Four.Selected;
});
} else {
Selected = this.Three.Selected;
}
return Selected;
},
set: function (value) {//点击节点本身时触发（选中、取消 所有子节点）
if (this.Three.Fours && this.Three.Fours.length > 0) {
this.Three.Fours.forEach(function (Four) {
Four.Selected = value;
});
}
this.Three.Selected = value;
}
}
}
})
var app = new Vue({
el: '#container',
data: {
Ones: [{ Code: 1,
FuncName: '一级节点1',
Twos: [
{
Code: 2,
Selected: false,
FuncName: '二级节点1',
Threes: [
{
Code: 3,
Selected: true,
FuncName: 'joe的商品2'
},
{
Code: 4,
Selected: false,
FuncName: '三级节点1',
Fours: [{
Code: 5,
Selected: true,
FuncName: '四级节点1'
}, {
Code: 6,
Selected: true,
FuncName: '四级节点2'
}]
}
]
},
{
Code: 7,
Selected: false,
FuncName: '二级节点2'
}
],
Selected: false
}]
}
}); </script>
</body>
</html>
代码写的比较粗糙，望各位大大指正。^_^
vue简单的CheckBox节点树的更多相关文章
- VUE实现Studio管理后台（七）：树形结构，文件树，节点树共用一套代码NodeTree
本次介绍的内容,稍稍复杂了一点,用VUE实现树形结构.目前这个属性结构还没有编辑功能,仅仅是展示.明天再开一篇文章,介绍如何增加编辑功能,标题都想好了.先看今天的展示效果: 构建树必须用到递归,使用s ...
- Vue视图渲染原理解析，从构建VNode到生成真实节点树
前言 在 Vue 核心中除了响应式原理外,视图渲染也是重中之重.我们都知道每次更新数据,都会走视图渲染的逻辑,而这当中牵扯的逻辑也是十分繁琐. 本文主要解析的是初始化视图渲染流程,你将会了解到从挂载组 ...
- Vue简单基础 + 实例 及 组件通信
vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...
- Vue简单归纳
目录 Vue.JS Vue.JS介绍 概述 MVVM模式 示例图 快速入门 事件绑定 什么是事件 单击事件绑定 键盘事件 按键修饰符 鼠标事件 事件修饰符 数据绑定 插值 v-text v-bind ...
- cocos2dx3.4 导出节点树到XML文件
l利用cocostudio做UI和场景时,经常要去获取某个节点,cocostudio2.1开始加入了文件的概念,可以创建场景,节点,层等文件,把公用的东西创建到文件里,然后把这个文件拖到场景里使用,达 ...
- ROS学习记录（三）————创建一个简单的发布节点和订阅节点
暑假在家有些懈怠,不,非常懈怠- -||!良心已经发痛了,想快些补回原来的进度,但忽然发现,中断了一段时间再重新去学习,有的地方连最基本的符号都忘记了 ,这次特意弄个最最基础的,恢复一下,以前的进度. ...
- vue中的checkbox全选和反选
前几天有个博客园的朋友问小颖,小颖之前写的vue2.0在table中实现全选和反选 .Vue.js实现checkbox的全选和反选,为什么他将里面的js复制下来,但是实现不了全选和反选.小颖当时看他 ...
- 将简单的lambda表达式树转为对应的sqlwhere条件
1.Lambda的介绍 园中已经有很多关于lambda的介绍了.简单来讲就是vs编译器给我带来的语法糖,本质来讲还是匿名函数.在开发中,lambda给我们带来了很多的简便.关于lambda的演变过程可 ...
- 探索未知种族之osg类生物---状态树与渲染树以及节点树之间的关系
节点树 首先我们来看一个场景构建的实例,并通过它来了解一下“状态节点”StateGraph 和“渲染叶”RenderLeaf 所构成的状态树,“渲染台”RenderStage 和“渲染元”Render ...
随机推荐
- WPF Visibility属性用法
WPF Visibility属性用法 Visible 元素在窗体中正常显示 Collaspsed 元素不显示,也不占用空间 Hidden 元素不显示,但是任然为它保留空间
- 09_android项目的目录结构
R.java是由IDE自动生成的,不允许修改. Android Dependences 安卓的支持库 项目创建之后一般都会把安卓支持库的V4包导入进来. 项目打包的时候assets的内容并不会被编译 ...
- c/c++转义字符大全【转自互联网】
将转义字符收集如下:转义字符 意义 ASCII码值(十进制) \a 响铃(BEL) 007 \b 退格(BS) 008 \f 换页(FF) 012 \n 换行(LF) 010 \r 回车(CR) 01 ...
- vue.js基础学习（1）
一:v-cloak:解决浏览器闪烁,编译过程中不会显示,直到编译结束才显示. 用法:[v-cloak] { display: none;} <div v-cloak> {{ message ...
- product of大数据平台搭建------CM 和CDH安装
一.安装说明 CM是由cloudera公司提供的大数据组件自动部署和监控管理工具,相应的和CDH是cloudera公司在开源的hadoop社区版的基础上做了商业化的封装的大数据平台. 采用离线安装模式 ...
- google广告尺寸
谷歌AdMob广告支持三种tablet-only旗帜大小除了320×50显示在手机: 大小(WxH) 描述 可用性 AdSize常数 320×50 标准的旗帜 手机和平板电脑 横幅 300 x250 ...
- es6实现类的多重继承
1.类的多种继承,将多个类的接口“混入”(mix in)另一个类. function mix(...mixins) { class Mix { // 如果不需要拷贝实例属性下面这段代码可以去掉 // ...
- Cogs 6. 线型网络
6. 线型网络 ★★☆ 输入文件:linec.in 输出文件:linec.out 简单对比时间限制:1 s 内存限制:256 MB [问题描述] 有 N(N<=20)台 PC 放 ...
- 2017-10-19 NOIP模拟赛
Count(哈格朗日插值) 题解: 有个定理,另sum(x)表示小于等于x的数中与x互质的数的和 sum(x)=φ(x)*x/2 最后可知f(x)=x (f(1)=2) 当然打表能知道. 然 ...
- postgres_fdw
create extension postgres_fdw; --创建扩展 create server db0 foreign data wrapper postgres_fdw OPTIONS (h ...