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 ...
随机推荐
- 0008_Python变量
1.变量名:数字,字母,下划线组成,不能以数字开头,不能是Python内部关键字. 2.变量类型:数字,字符串,布尔值(首字母大写) 3.内存与变量: 4. = 赋值 == 比较 is == ...
- Flask10 登录模块、表单框架、表单渲染、表单验证、bookie、请求之前钩子、g对象、编写装饰器
from flask import Flask from flask import request from flask import render_template from flask_wtf i ...
- 我对PageRank的理解及R语言实现
PageRank,网页排名,又称网页级别.Google左侧排名或佩奇排名,是一种由搜索引擎根据网页之间相互的超链接计算的技术,而作为网页排名的要素之一,以Google公司创办人拉里·佩奇(Larry ...
- cocos2dx之lua绑定简析
一.总原则:c++对象的生命期不依赖lua gc管理,手动创建的对象要手动销毁 二.引擎层在设计上就是支持脚本概念的(也就是说脚本的使用是“侵入式”的),与lua打交道的代码都封在CCLuaEngin ...
- LEADTOOLS V19： 世界领先的图像处理开发工具包强势来袭
投递人 itwriter 发布于 2014-12-22 16:04 评论(0) 有214人阅读 原文链接 [收藏] « » LEAD 科技于 2014 年 12 月 11 日发布 LEA ...
- 第四课4、ROS客户端
ROS客户端提供一些列库文件用于用户开发.它利用许多ROS概念并使它通过代码可以获取. 下面是ROS程序中的接口 ROSCPP客户端(c++客户端) 首先新建一个包 然后catkin_make一下 在 ...
- JavaScript 异常 Exceptions
JavaScript提供了一套异常处理机制. 异常是干扰程序的正常流程的不寻常(但并非完全是出乎意料的)的事故. 当发现这样的事故时,你的程序应该抛出一个异常. throw语句中断函数的执行. 它应该 ...
- AndroidMainfest.xml文件解释
AndroidManifest.xml是每个android程序中必须的文件.它位于application的根目录,描述了package中的全局数据,包括了package中暴露的组件(activitie ...
- FreeSql 新功能介绍：贪婪加载五种方法
前言 FreeSql 在经过6个月的开发和朋友们的工作实践,不断的改进创新,目前拥有1500个左右单元测试方法,且每个方法内又复盖不同的测试面. 今天介绍 FreeSql 各种贪婪加载的姿势,作下总结 ...
- opesntack基础知识-软件包历史脉络
软件包管理 软件包管理是每个OpenStack项目的基础,其目的是用来将项目代码打包成源码包或者二进制包进行分发.一个项目的代码可能会被打包放到PyPI上,这样你可以通过pip命令安装这个包:也可能会 ...