当前位置:首页 > 日记 > 正文

Bootstrap插件TreeView选择父节点选择功能的所有子节点下

Bootstrap插件TreeView选择父节点选择功能的所有子节点下
项目需要实现权限管理和使用前端框架的引导,引导的TreeView扩展插件是直接选择第一个图片:
当选择父节点时,也会选择父节点下的所有子节点来查看代码。
1,HTML代码

TreeView的使用

2,JSON数据

功能gettvstatedata(){
无功defaultdata = {
{
正文:'parent 1,
链接:# parent1,
标签:{一},
状态:{
检查:真的
},
节点:{
{
正文:'1',
链接:#孩子,
标签:{ 2},
节点:{
{
正文:'grandchild 1,
链接:# grandchild1,
Tags: {'0'}
},
{
正文:'grandchild 2,
链接:# grandchild2,
标签:{ 0}
}
}
},
{
正文:'2',
链接:# $child2,
标签:{ 0}
}
}
},
{
正文:'parent 2,
链接:# parent2,
标签:{ 0},
节点:{
{
正文:'1',
链接:#孩子,
标签:{ 2},
节点:{
{
正文:'grandchild 1,
链接:# grandchild1,
标签:{ 0}
},
{
正文:'grandchild 2,
链接:# grandchild2,
标签:{ 0}
}
}
},
{
正文:'2',
链接:# $child2,
标签:{ 0}
}
}
},
{
正文:'parent 3,
链接:# parent3
},
{
正文:'parent 4,
链接:# parent4,
标签:{ 0}
},
{
正文:'parent 5,
链接:# parent5,
标签:{ 0}
}
};

返回defaultdata;
}

3、JS数据绑定、负载TreeView

$(函数(){())
checkabletree = $(var $ ' # TreeView支票)
TreeView({。
数据:(gettvstatedata), / /数据
显示图标:假,
showcheckbox:真,
级别:1,
onnodechecked:功能(事件、节点){ / /选择的节点
var = getchildnodeidarr选择第一个book节点(节点); / /得到的所有子节点
如果(选择第一个book节点){ / /子节点不为空,然后选择所有子节点
$(# TreeView支票)。Treeview('checknode,{选择第一个book节点,沉默:{真} });
}
var = $(# parentNode TreeView支票)。Treeview(getnode
setparentnodecheck(节点);
},
onnodeunchecked:功能(事件、节点){ / /选中节点
var = getchildnodeidarr选择第一个book节点(节点); / /得到的所有子节点
如果(选择第一个book节点){ / /子节点不为空,然后选中所有子节点
$(# TreeView支票)。Treeview('unchecknode,{选择第一个book节点,沉默:{真} });
}
},
OnNodeExpanded:
函数(事件,数据){
如果(data.nodes定义data.nodes | = = = = = | = null){

否则,如果}(数据{ { 0 } = 2){
警报(标签2 );
{人}
警报(1111);
}
}
});
});
4。当父节点被选中/未选中时,所有的子节点都被选中/未选中,当所有的子对象被选中时,父节点被选中。

功能getchildnodeidarr(节点){
var { };
如果(节点){
对于(在节点中的x){
Ts.push(节点。节点{X}。NodeID);
如果(节点,节点,{节点){
无功getnodediedai = getchildnodeidarr(节点。节点{X});
(J为getnodediedai){
Ts.push(getnodediedai {,});
}
}
}
{人}
Ts.push(节点。节点ID);
}
Return ts;
}

功能setparentnodecheck(节点){
var = $(# parentNode TreeView支票)。Treeview(getnode
如果(其父节点。节点){
无功checkedcount = 0;
(X为其父节点。节点){
如果(其父节点。节点{X}。状态。检查){
checkedcount + +;
{人}
打破;
}
}
如果(checkedcount =父节点。节点。长度){
$(# TreeView支票)。Treeview(Checknode
setparentnodecheck(parentNode);
}
}
}
以上是本文的全部内容,希望能对您有所帮助,希望大家多多支持。

相关文章

PS如何设计一个简单的耳机图标

PS如何设计一个简单的耳机图标

图标,耳机,简单,电脑软件,PS,PS如何设计一个简单的耳机图标让我们来看一下用角工具和钢笔工具快速画图的方法。详情如下。 软件名称:Adobe PS图象处理软件8全绿色中文版软件大小:150.1mb更新时间:2015-11-04 1。打开ps新文档以找到角工具 2…

PS过滤功能使铁树花效果的使用教程

PS过滤功能使铁树花效果的使用教程

使用教程,过滤,铁树,效果,功能,今天,使滤波器的铁树花效果的教程使用的主要工具,生产过程非常简单,请看下面的细节。 软件名称:Adobe PS图象处理软件8全绿色中文版软件大小:150.1mb更新时间:2015-11-04 1、首次启动PS图象处理软件CS5,执行文件-新…

WindowsServer2012的安装配置方法

WindowsServer2012的安装配置方法

教程,安装配置,方法,电脑软件,Oracle12C,分享Oracle 12c的安装配置方法教程,详情如下 1。我们打开虚拟机 2、Windows服务器2012启动。 三.见Windows服务器2012的桌面。 4。我们将两个文件解压缩,winx64_12c_database_1of2.zip,winx64_12c_dat…

插画简单风格卡通飞机图标

插画简单风格卡通飞机图标

图标,插画,飞机,卡通,风格,今天,我想和大家分享一下插画的卡通图标设计,这是一个简单的风格。教程很简单,制作的图标非常漂亮。建议像你这样的朋友可以参考这篇文章并看一看。 步: 本教程结束,以上是插画绘制简单风格的卡通飞机图标教程,方法很…

在excel中使用除法函数公式的运算

在excel中使用除法函数公式的运算

运算,除法,函数,方法,公式,excel的计算功能非常强大。现在教你一个excel的除法公式是非常实用和方便的,以后你可以灵活使用它!今天,小编辑教你如何在excel中使用除法函数公式,希望能对你有所帮助! excel中除法函数公式的运算步骤 打开一个空白…

PS很快把胡戈变成一个好的水彩画效

PS很快把胡戈变成一个好的水彩画效

水彩画,效果,课程,胡戈,电脑软件,方法制作水彩人物画的方法非常简单:首先选择深色区域,用水彩材料重叠,先画水彩肖像;然后在背景区域添加一些水彩纹理;最后,根据喜好,调整色彩和清晰度。 最终效果: 主要过程: 1。选择人物的图片。 2,选择水彩颜料。…

旋转的在Word2010两方法

旋转的在Word2010两方法

方法,电脑软件,对于Word 2010文档中的图片,用户可以根据实际需要旋转所选图片,Word 2010文档中有多种旋转图片的方法。让我们与你在Word2010旋转图片的技巧分享,希望能帮助你。 Word2010旋转图片的方法1: 第一步:选择图片,将鼠标切换到功能区;格…

PS图象处理软件片段筛选

PS图象处理软件片段筛选

筛选,片段,图象,处理软件,电脑软件,PS图象处理软件作为图像处理工具的领导者,今天萧边教你PS图象处理软件片段使用过滤器。本教程是比较基础上的,希望能对你有所帮助! 对PS图象处理软件片段滤波器的使用介绍 如图所示,我们点击箭头的PS图象处…

双向数据绑定和数据的小程序,操纵微

双向数据绑定和数据的小程序,操纵微

数据绑定,操纵,数据,双向,程序,双向数据绑定和数据的小程序,操纵微信 双向数据绑定是JS数据变化部分是HTML数据部分的变化,当然,的HTML数据变化JS数据也可以改变的一部分,这样的接口是实现动态数据显示非常方便,前车架一般有双向数据绑定的MVVM…

MySQL查询使用concat函数功能的拼

MySQL查询使用concat函数功能的拼

查询,方法,函数,功能,电脑软件,如下所示: 表managefee_managefee / /年和月,使用concat函数作为year-month.for例,2017和1是拼写在2017-01 .. 选择concat(a.year,-,如果(a.month 对于managefee_managefee / 2017-01到2017-07数据查询时间 SELECT…

PS如何制作中国古典水墨人物的忧伤

PS如何制作中国古典水墨人物的忧伤

人物,水墨,中国古典,忧伤,电脑软件,萧边带来的教程是使用PS图象处理软件使中国古典水墨风格伤感个性签名。这个教程很简单,效果很好。非常适合初学者学习。 一个关于中国古典水墨人物性格特征的教程 1,创建一个430×260像素的画布,解锁背景,…

Oracle函数确定字符串是否包含格式

Oracle函数确定字符串是否包含格式

函数,示例代码,字符串,格式,电脑软件,第一种方法是编写一个函数来划分字符串,并返回表类型。 创建或替换功能fn_split(p_str在VARCHAR2,p_delimiter在VARCHAR2) 返回ty_str_split 是 j = 0; I = 1; 镜头int = 0; len1 int:= 0; STR VARCHAR2(4000); st…