<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 树形菜单带复选框以及级联选择的更多相关文章

  1. 雷林鹏分享:jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单

    jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单 easyui 的树(Tree)插件允许您创建一个复选框树.如果您点击一个节点的复选框,这个点击的节点信息将向上和向下继承.例如:点击 ...

  2. WPF:带复选框CheckBox的树TreeView

    最近要用WPF写一个树,同事给了我一个Demo(不知道是从哪里找来的),我基本上就是参照了这个Demo. 先放一下效果图(3棵树): 这个树索要满足的条件是: 父节点.Checked=true时,子节 ...

  3. jquery完成带复选框的表格行高亮显示

    jquery完成带复选框的表格行高亮显示 通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时 ...

  4. js做全选,用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false

    用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...

  5. php一些单选、复选框的默认选择方法(示例)

    转载 http://www.php.cn/php-weizijiaocheng-360029.html 一. radio和checkbox及php select默认选择的实现代码 1.radio单选框 ...

  6. checkebox 全选 ,子复选框单个全部选择后,全选框也会被选择

    <script> //点击全选,子复选框被选中 function demo(){ var allcheck=document.getElementById("allcheck&q ...

  7. 实现带复选框的TreeView控件

    实现效果: 知识运用: TreeView控件的CheckView属性 //是否在树形视图控件中显示复选框 public bool CheckBoxs{ get;ser } 实现代码: TreeView ...

  8. 关于JFace带复选框的树

    树的复选框用CheckboxTreeViewer实现.由于其子类ContainerCheckedTreeViewer在没有选择全部子节点时可以自动将父节点设置成灰选,所以实现树的复选框更多的是用Con ...

  9. 关于textjs的tree带复选框的树

    通过查阅一些资料和自己之前了解到的一些相关知识,有时项目中需要用到.话不多说,先看一下效果图: 我写的这人员选择的树,主要是改写了TreePanel,如下代码: ExtendTreePanel.js ...

随机推荐

  1. 《JavaScript DOM编程艺术》学习笔记(一)

    这本书是我听说学习前端基础入门书籍,于是就开始看了,大概是从5月10号开始看的吧,一直看到现在,差不多要看完了,书是挺厚的...286页,不过比起JAVASCRIPT权威指南来说还是差多了,权威指南才 ...

  2. 关于条件语句和 a && b

    learn from javascript cookbook if (element == 'ab') array[index] = "**"; 该语句 等价于 if (eleme ...

  3. MySQL 分区建索引

    200 ? "200px" : this.width)!important;} --> 介绍 mysql分区后每个分区成了独立的文件,虽然从逻辑上还是一张表其实已经分成了多张 ...

  4. 美图App的移动端DNS优化实践:HTTPS请求耗时减小近半

    本文引用了颜向群发表于高可用架构公众号上的文章<聊聊HTTPS环境DNS优化:美图App请求耗时节约近半案例>的部分内容,感谢原作者. 1.引言 移动互联网时代,APP 厂商之间的竞争非常 ...

  5. Node.js(day5)

    一.NOSQL NOSQL是Not Only SQL的简称,与关系型数据库对应,一般称为非关系型数据库.关系型数据库遵循ACID规则,而NOSQL存储数据时不需要严格遵循固定的模式,因此在大数据的今天 ...

  6. [Swift]LeetCode1001. 网格照明 | Grid Illumination

    On a N x N grid of cells, each cell (x, y) with 0 <= x < N and 0 <= y < N has a lamp. In ...

  7. Python内置函数(30)——hex

    英文文档: hex(x) Convert an integer number to a lowercase hexadecimal string prefixed with “0x”, for exa ...

  8. solr之环境配置三

    配置安装Solr到Tomcat 1. 解压 solr4.7.2.zip 2. 将 solr-4.7.2\dist\solr-4.7.2.war拷贝到 apache-tomcat-7.0.55\weba ...

  9. redis 系列20 服务器下

    二. serverCron函数 2.3 更新服务器每秒执行命令次数 serverCron函数中的trackOperationsPerSecond函数会以每100毫秒一次的频率执行,这个函数以抽样计算的 ...

  10. C语言中你可能不熟悉的头文件(stdlib.h)

    C语言中你可能不熟悉的头文件<cstdlib>(stdlib.h) C Standard General Utilities Library (header) C标准通用工具库(头文件) ...