bootstrap-treeview使用
1.数据
var tree = [{
text: "车型A",
nodes: [{
text: "车系1",
},
{
text: "车系2"
}, {
text: "车系3"
}
]
},
{
text: "车型B",
nodes: [{
text: "车系4",
},
{
text: "车系5"
}, {
text: "车系6"
}
]
}, {
text: "车型C",
nodes: [{
text: "车系7",
},
{
text: "车系8"
}, {
text: "车系9"
}
]
}
];
2.方法拓展
var OtherTree = function(treeDom) {
var othis = this;
othis.treeDom = treeDom;
othis.nodeCheckedSilent = false;
othis.nodeChecked = (event, node) => {
if(othis.nodeCheckedSilent) {
return
}
othis.nodeCheckedSilent = true;
othis.checkAllParent(node);
othis.checkAllSon(node);
othis.nodeCheckedSilent = false;
};
othis.nodeUncheckedSilent = false;
othis.nodeUnchecked = (event, node) => {
if(othis.nodeUncheckedSilent) return;
othis.nodeUncheckedSilent = true;
othis.uncheckAllParent(node);
othis.uncheckAllSon(node);
othis.nodeUncheckedSilent = false;
};
//选中全部父节点
othis.checkAllParent = (node) => {
othis.treeDom.treeview('checkNode', node.nodeId, {
silent: true
});
var _siblings = othis.treeDom.treeview('getSiblings', node.nodeId);
var _parentNode = othis.treeDom.treeview('getParent', node.nodeId);
if(!("nodeId" in _parentNode)) {
return;
} else {
var _isAllUnchecked = true; //是否全部选中
for(var i in _siblings) {
if(!(_siblings[i].state.checked)) {
_isAllUnchecked = false;
break;
}
}
if(_isAllUnchecked) {
othis.checkAllParent(_parentNode);
}
}
};
//取消全部父节点
othis.uncheckAllParent = (node) => {
othis.treeDom.treeview('uncheckNode', node.nodeId, {
silent: true
});
var _siblings = othis.treeDom.treeview('getSiblings', node.nodeId);
var _parentNode = othis.treeDom.treeview('getParent', node.nodeId);
if(!("nodeId" in _parentNode)) {
return;
}
var _isAllUnchecked = true; //是否有一个没选中
for(var i in _siblings) {
if(!(_siblings[i].state.checked)) {
_isAllUnchecked = true;
break;
}
}
if(_isAllUnchecked) {
othis.uncheckAllParent(_parentNode);
}
};
//级联选中所有子节点
othis.checkAllSon = (node) => {
othis.treeDom.treeview('checkNode', node.nodeId, {
silent: true
});
if(node.nodes != null && node.nodes.length > 0) {
for(var i in node.nodes) {
othis.checkAllSon(node.nodes[i]);
}
}
};
//级联取消所有子节点
othis.uncheckAllSon = (node) => {
othis.treeDom.treeview('uncheckNode', node.nodeId, {
silent: true
});
if(node.nodes != null && node.nodes.length > 0) {
for(var i in node.nodes) {
othis.uncheckAllSon(node.nodes[i]);
}
}
};
}
3.使用
function initTreeView() {
var _othertree = new OtherTree($tree_view);
$tree_view.treeview({
data: tree,
showCheckbox: true,
color: "#999",
selectedBackColor: "#f5f5f5",
selectedColor: "#999",
multiSelect: true,
levels: 5,
onNodeChecked: function(event, node) {
_othertree.nodeChecked(event, node);//调用拓展方法
},
onNodeUnchecked: function(event, node) {
_othertree.nodeUnchecked(event, node);//调用拓展方法
}
});
}
4.回显
var treeArrData = $tree_view.treeview('getUnchecked');//获取所有tree所有的node
if(row.activityModelList) {//返回的对象
var modelList = row.activityModelList.split(',');
var checkArr = [];
for(var i = 0; i < modelList.length; i++) {
for(var j = 0; j < treeArrData.length; j++) {
if(treeArrData[j].text == modelList[i]) {//取nodeId
$tree_view.treeview('checkNode', treeArrData[j].nodeId, {
silent: true
});
}
}
};
}
5.适用
父节点选中子节点全部选中,子节点取消一个父节点自动取消
bootstrap-treeview使用的更多相关文章
- Bootstrap treeview增加或者删除节点
参考(AddNode: http://blog.csdn.net/qq_25628235/article/details/51719917,deleteNode:http://blog.csdn.ne ...
- 初始化bootstrap treeview树节点
最近在做启明星图库时,使用了Jquery Bootstrap Treeview插件.但是,遇到了一个初始化的问题.先看效果如下: 当用户打开图库时,左边分类第一个类别是“所有分类”,默认需要选中. ...
- BootStrap TreeView使用示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- bootstrap treeview 树形数据生成
这个问题还是挺经典的,后台只是负责查出所有的数据,前台js来处理数据展示给treeview;show you the code below:<script> $(function () { ...
- bootstrap treeview实现菜单树
本博客,介绍通过Bootstrap的treeview插件实现菜单树的功能. treeview链接:http://www.htmleaf.com/Demo/201502141380.html ORM框架 ...
- MVC5 网站开发之六 管理员 2、添加、删除、重置密码、修改密码、列表浏览
目录 奔跑吧,代码小哥! MVC5网站开发之一 总体概述 MVC5 网站开发之二 创建项目 MVC5 网站开发之三 数据存储层功能实现 MVC5 网站开发之四 业务逻辑层的架构和基本功能 MVC5 网 ...
- MVC5 网站开发之八 栏目功能 添加、修改和删除
本次实现栏目的浏览.添加.修改和删除. 栏目一共有三种类型. 常规栏目-可以添加子栏目,也可以添加内容模型.当不选择内容模型时,不能添加内容. 单页栏目-栏目只有一个页面,可以设置视图. 链接栏目-栏 ...
- 再谈Newtonsoft.Json高级用法
上一篇Newtonsoft.Json高级用法发布以后收到挺多回复的,本篇将分享几点挺有用的知识点和最近项目中用到的一个新点进行说明,做为对上篇文章的补充. 阅读目录 动态改变属性序列化名称 枚举值序列 ...
- 【转】C#解析Json Newtonsoft.Json
Newtonsoft.Json源码 Newtonsoft.Json介绍 在做开发的时候,很多数据交换都是以json格式传输的.而使用Json的时候,我们很多时候会涉及到几个序列化对象的使用:DataC ...
- django权限二(多级菜单的设计以及展示)
多级权限菜单设计级标题栏 我们现在只有数据展示,要进入其他url还需要手动的输入路径,非常的麻烦,所以我们要设计 一个导航栏以及侧边多级菜单栏,这个展示是通过stark组件的设计的增删改查页面,而 每 ...
随机推荐
- Django 模板继承extend 标签include block
# block 站网页位置# includ 导入网页标签# extends 导入网页模板 # common_js.html <script src="/static/plugins/j ...
- 三、vue如何配置路由 、获取路由的参数、部分刷新页面、缓存页面
1.路由配置:所有的启动文件都在最初始的main.js文件里面,这个文件中首先需要引入: 2.路由文件配置说明: 3.如何获取页面url的参数? this.$route.query 4.页面之 ...
- 对JDBC的轻量级封装,Hibernate框架
IDEA是真的好用... 用脑子下jar包..http://mvnrepository.com/
- nginx 的socket 选项处理--TCP_DEFER_ACCEPT
在nginx listen配置项的说明中有一个选项: deferred -- indicates to use that postponed accept(2) on Linux with. the ...
- beautifulsoup之CSS选择器
BeautifulSoup支持大部分的CSS选择器,其语法为:向tag或soup对象的.select()方法中传入字符串参数,选择的结果以列表形式返回. tag.select("string ...
- Mysql使用binlog恢复数据解决误操作问题的两种方法
为保证没有其他参数配置影响,重新安装配置了一台最小化安装的CentOS7虚拟机 1. 基础知识 安装mysql5.6数据库Mysql binlog初步理解 2. 配置mysql 开启binlog.修 ...
- android 常用adb 及linux 命令
一.ADB相关 adb shell:进入连接的USB调试模式设备shell命令行下 adb tcpip 5555:将USB连接的调试及的连接方式改为网络远程模式进行调试 这里端口为5555(adb 默 ...
- Linux 文件特殊权限详解[suid/sgid/t]
setuid(suid): 针对命令和二进制程序的,当普通用户执行某个(passwd)命令的时候,可以拥有这个命令对应用户的权限, 即让普通用户可以以root用户的角色执行程序或命令. setgid( ...
- win7下使用手动安装composer
假设我们的php放置在D:\php 目录下, 1.添加环境变量,桌面--> 我的电脑右键---->属性 2.点击高级系统设置 3.点击环境变量 4.选择path,在变量值里面追加内容: ...
- 推荐一个好用的以多tab标签方式打开windows CMD的工具
最近我在做基于nodejs的微服务开发,需要在windows命令行里启动很多微服务.我的windows 10任务栏是这样子的: 我想找一款能像下图Chrome标签页这样打开windows 10 CMD ...