bootstrap-treeview 树形菜单带复选框以及级联选择
<div id="searchTree"></div> <script>
var treeData = [{
text: "Parent 1",
nodes: [{
text: "Child 1",
nodes: [{
text: "Grandchild 1"
}, {
text: "Grandchild 2",
nodes: [{
text: "Grandchild 2-1",
nodes: [{
text: "Grandchild 2-1-1"
}, {
text: "Grandchild 2-2-1",
}]
}, {
text: "Grandchild 1-2",
}]
}]
}, {
text: "Child 2",
nodes: [{
text: "Grandchild 2-1"
}, {
text: "Grandchild 2-2",
}]
}]
}, {
text: "Parent 2",
id:'11111'
}, {
text: "Parent 3"
}, {
text: "Parent 4"
}, {
text: "Parent 5"
}];
var nodeCheckedSilent = false; function nodeChecked(event, node) {
if (nodeCheckedSilent) {
return;
}
nodeCheckedSilent = true;
checkAllParent(node);
checkAllSon(node);
nodeCheckedSilent = false;
} var nodeUncheckedSilent = false; function nodeUnchecked(event, node) {
if (nodeUncheckedSilent)
return;
nodeUncheckedSilent = true;
uncheckAllParent(node);
uncheckAllSon(node);
nodeUncheckedSilent = false;
} //选中全部父节点
function checkAllParent(node) {
$('#searchTree').treeview('checkNode', node.nodeId, {
silent: true
});
var parentNode = $('#searchTree').treeview('getParent', node.nodeId);
if (!("nodeId" in parentNode)) {
return;
} else {
checkAllParent(parentNode);
}
}
//取消全部父节点
function uncheckAllParent(node) {
$('#searchTree').treeview('uncheckNode', node.nodeId, {
silent: true
});
var siblings = $('#searchTree').treeview('getSiblings', node.nodeId);
var parentNode = $('#searchTree').treeview('getParent', node.nodeId);
if (!("nodeId" in parentNode)) {
return;
}
var isAllUnchecked = true; //是否全部没选中
for (var i in siblings) {
if (siblings[i].state.checked) {
isAllUnchecked = false;
break;
}
}
if (isAllUnchecked) {
uncheckAllParent(parentNode);
} } //级联选中所有子节点
function checkAllSon(node) {
$('#searchTree').treeview('checkNode', node.nodeId, {
silent: true
});
if (node.nodes != null && node.nodes.length > 0) {
for (var i in node.nodes) {
checkAllSon(node.nodes[i]);
}
}
}
//级联取消所有子节点
function uncheckAllSon(node) {
$('#searchTree').treeview('uncheckNode', node.nodeId, {
silent: true
});
if (node.nodes != null && node.nodes.length > 0) {
for (var i in node.nodes) {
uncheckAllSon(node.nodes[i]);
}
}
}
$('#searchTree').treeview({
showCheckbox: true,
data: treeData,
onNodeChecked: nodeChecked,
onNodeUnchecked: nodeUnchecked
});
</script>
bootstrap-treeview 树形菜单带复选框以及级联选择的更多相关文章
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单
jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单 easyui 的树(Tree)插件允许您创建一个复选框树.如果您点击一个节点的复选框,这个点击的节点信息将向上和向下继承.例如:点击 ...
- WPF:带复选框CheckBox的树TreeView
最近要用WPF写一个树,同事给了我一个Demo(不知道是从哪里找来的),我基本上就是参照了这个Demo. 先放一下效果图(3棵树): 这个树索要满足的条件是: 父节点.Checked=true时,子节 ...
- jquery完成带复选框的表格行高亮显示
jquery完成带复选框的表格行高亮显示 通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时 ...
- js做全选,用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false
用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...
- php一些单选、复选框的默认选择方法(示例)
转载 http://www.php.cn/php-weizijiaocheng-360029.html 一. radio和checkbox及php select默认选择的实现代码 1.radio单选框 ...
- checkebox 全选 ,子复选框单个全部选择后,全选框也会被选择
<script> //点击全选,子复选框被选中 function demo(){ var allcheck=document.getElementById("allcheck&q ...
- 实现带复选框的TreeView控件
实现效果: 知识运用: TreeView控件的CheckView属性 //是否在树形视图控件中显示复选框 public bool CheckBoxs{ get;ser } 实现代码: TreeView ...
- 关于JFace带复选框的树
树的复选框用CheckboxTreeViewer实现.由于其子类ContainerCheckedTreeViewer在没有选择全部子节点时可以自动将父节点设置成灰选,所以实现树的复选框更多的是用Con ...
- 关于textjs的tree带复选框的树
通过查阅一些资料和自己之前了解到的一些相关知识,有时项目中需要用到.话不多说,先看一下效果图: 我写的这人员选择的树,主要是改写了TreePanel,如下代码: ExtendTreePanel.js ...
随机推荐
- Mesos源码分析(12): Mesos-Slave接收到RunTask消息
在前文Mesos源码分析(8): Mesos-Slave的初始化中,Mesos-Slave接收到RunTaskMessage消息,会调用Slave::runTask. void Slave::ru ...
- LeetCode编程训练 - 位运算(Bit Manipulation)
位运算基础 说到与(&).或(|).非(~).异或(^).位移等位运算,就得说到位运算的各种奇淫巧技,下面分运算符说明. 1. 与(&) 计算式 a&b,a.b各位中同为 1 ...
- 使用Sublime Text 或 vs2017开发Node.js程序
在学习一门开发语言时,为了从简单的方式入手,有时候直接用Notepad开始敲代码.曾经我也这样干过,这样做简洁而不简单啊! 随着时间的流逝,人也变得懒惰起来,做事前总是想借助一些工具来搞事情.< ...
- MapReduce计算模型的优化
MapReduce 计算模型的优化涉及了方方面面的内容,但是主要集中在两个方面:一是计算性能方面的优化:二是I/O操作方面的优化.这其中,又包含六个方面的内容. 1.任务调度 任务调度是Hadoop中 ...
- [Swift]LeetCode470. 用 Rand7() 实现 Rand10() | Implement Rand10() Using Rand7()
Given a function rand7 which generates a uniform random integer in the range 1 to 7, write a functio ...
- [Swift]LeetCode1022. 从根到叶的二进制数之和 | Sum of Root To Leaf Binary Numbers
Given a binary tree, each node has value 0 or 1. Each root-to-leaf path represents a binary number ...
- Storm学习笔记 - Storm初识
Storm学习笔记 - Storm初识 1. Strom是什么? Storm是一个开源免费的分布式计算框架,可以实时处理大量的数据流. 2. Storm的特点 高性能,低延迟. 分布式:可解决数据量大 ...
- 10 个深恶痛绝的 Java 异常。。
异常是 Java 程序中经常遇到的问题,我想每一个 Java 程序员都讨厌异常,一 个异常就是一个 BUG,就要花很多时间来定位异常问题. 什么是异常及异常的分类请看这篇文章:一张图搞清楚 Java ...
- 获取Ip所在城市名与详细
//获取ip和地理信息 string url = "http://pv.sohu.com/cityjson"; WebRequest wRequest = WebRequest.C ...
- ADO.NET五大对象详解
Connection 连接对象 用于对数据库的连接操作.传入的参数为连接字符串. Commamd 命令对象 用于执行对数据库的操作 ,传入的参数可以为连接字符串或存储过程,也必须传入连接对象的实例. ...