<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. [Swift]LeetCode96. 不同的二叉搜索树 | Unique Binary Search Trees

    Given n, how many structurally unique BST's (binary search trees) that store values 1 ... n? Example ...

  2. ELK之filebeat、logstash多个topic配置

    启动多个进程收集日志.直接output到kafka,output到不同的topiccat filebeat.ymlfilebeat.prospectors:- input_type: log path ...

  3. Docker for windows : 安装Redis

    一.拉取Redis镜像 docker pull hub.c..com/library/redis: 二.创建并运行Redis docker run -d -it --name redis d4f259 ...

  4. 机器学习入门18 - 生产机器学习系统(Production ML Systems)

    除了实现机器学习算法之外,机器学习还包含许多其他内容.生产环境机器学习系统包含大量组件.无需自行构建所有内容,而是应该尽可能重复使用常规机器学习系统组件.通过了解机器学习系统的一些范例及其要求,可以明 ...

  5. python编程实战

    1.计算对称平方数 题目描述 打印所有不超过n(n<256)的,其平方具有对称性质的数,如11*11=121. 输入描述 无 输出描述 每行一个数,表示对称平方数 def f(n): flag ...

  6. BitmapToASCii

    using System; using System.Collections.Generic; using System.Drawing; using System.Linq; using Syste ...

  7. APK安装成功后点击"打开",按Home键,在桌面点击图标后应用重启

    转载:http://blog.csdn.net/kepoon/article/details/7468688 问题: 安装系统SD卡里面的apk或者原有的程序更新版本的时候,会遇到升级安装成功之后的一 ...

  8. Chapter 4 Invitations——28

    "Oh, thanks, now that's all cleared up." Heavy sarcasm. “哦,真感谢,现在一切都清楚了.” 我很讽刺的说道 I realiz ...

  9. ThreadPoolExecutor系列二——ThreadPoolExecutor 代码流程图

    ThreadPoolExecutor 代码流程图 本文系作者原创,转载请注明出处:http://www.cnblogs.com/further-further-further/p/7681648.ht ...

  10. Hbase王国游记之:Hbase客户端API初体验

    §历史回顾 2018年岁末,李大胖朦胧中上了开往Hbase王国的车,伴着一声长鸣,列出缓缓驶出站台,奔向无垠的广袤. (图片来自于网络) 如不熟悉剧情的,可观看文章: 五分钟轻松了解Hbase列式存储 ...