<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. FFmpeg 结构体学习(四): AVFrame 分析

    在上文FFmpeg 结构体学习(三): AVPacket 分析我们学习了AVPacket结构体的相关内容.本文,我们将讲述一下AVFrame. AVFrame是包含码流参数较多的结构体.下面我们来分析 ...

  2. SUSE12Sp3安装配置.net core 生产环境(1)-IP,DNS,网关,SSH,GIT

    1.新增用户 sudo useradd 用户名 sudo passwd 用户名 这个时候会提示你输入密码,输入两次密码即可 2.静态 IP 设置 1.设置 IP 地址 sudo vi /etc/sys ...

  3. [Swift]LeetCode412. Fizz Buzz

    Write a program that outputs the string representation of numbers from 1 to n. But for multiples of ...

  4. [Swift]LeetCode802. 找到最终的安全状态 | Find Eventual Safe States

    In a directed graph, we start at some node and every turn, walk along a directed edge of the graph.  ...

  5. [Swift]LeetCode976. 三角形的最大周长 | Largest Perimeter Triangle

    Given an array A of positive lengths, return the largest perimeter of a triangle with non-zero area, ...

  6. fiddler抓取https失败解决方案

    众所周知,Fiddler默认只能抓取到http请求,要抓取到https请求我们还需要FiddlerCertMaker插件的支持, 至于怎么使用fiddler抓https及插件的使用方式,大家可以去百度 ...

  7. vue-cli中webpack配置详解

    vue-cli是构建vue单页应用的脚手架,命令行输入vue init <template-name> <project-name>从而自动生成的项目模板,比较常用的模板有we ...

  8. 我对SQL性能优化的看法,对我的文章有提议的欢迎评论!

    影响你的查询速度的原因是什么? 网速不给力,不稳定. 服务器内存不够,或者SQL 被分配的内存不够. sql语句设计不合理 没有相应的索引,索引不合理 表数据过大没有有效的分区设计 数据库设计太2,存 ...

  9. 使用ML.NET + Azure DevOps + Azure Container Instances打造机器学习生产化

    介绍 Azure DevOps,以前称为Visual Studio Team Services(VSTS),可帮助个人和组织更快地规划,协作和发布产品.其中一项值得注意的服务是Azure Pipeli ...

  10. 代码实现PHP web服务器下绝对路径到Web网址的转换

    代码实现PHP web服务器下绝对路径到Web网址的转换 代码中用到几个系统变量或常量: 1. 路径中各目录分隔字符 DIRECTORY_SEPARATOR(常量),Windows下DIRECTORY ...