bootstrap treeview 自定义全选 / 全部取消选中

简介: bootstrap treeview默认不提供全选 / 全部取消操作, 需要开发者自定义. 自定义效果如下, 点击父节点, 子节点全部选中, 再次点击, 子节点全部取消选中. 在笔者的情况下, 需要实现父节点的单独选中, 所以这里做了子节点全部不选中的情况下, 依然保持父节点单独选中状态.

bootstrap treeview默认不提供全选 / 全部取消操作, 需要开发者自定义. 自定义效果如下, 点击父节点, 子节点全部选中, 再次点击, 子节点全部取消选中. 在笔者的情况下, 需要实现父节点的单独选中, 所以这里做了子节点全部不选中的情况下, 依然保持父节点单独选中状态. 


bfc21fa5488af72270d9e63c9b339565d921d6e6


html代码如下:

<div id="modal-departments-lessonManage" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal-detail-title" data-backdrop="static" >
	<div class="modal-dialog" style="width: 80%;">
		<div class="modal-content" style="min-height:500px">
			<div class="modal-header">
				<button class="close" type="button" data-dismiss="modal">
					<span>×</span>
				</button>
				<h5 id="modal-detail-title" class="modal-title">选择必修部门</h5>
			</div>
			<div class="modal-body" style="min-height:380px;padding:30px 25px;">
				<div class="form-group">
					<button class="btn btn-primary" id="expandTree_btn_lessonManage">展开全部</button>
					<button class="btn btn-primary" id="collapseTree_btn_lessonManage">折叠全部</button>
					<div class="col-sm-6" style="padding-left:0;">
						<input id="search-departmentsTree-lessonManage" class="col-sm-5 form-control" type="text" placeholder="输入关键字, 匹配部门会高亮显示"/>
					</div>
				</div>
				<div id="tree-departments-lessonManage"></div>
			</div>
			<div class="modal-footer">
				<button class="btn btn-primary" data-dismiss="modal" id="btn-confirm-departments-lessonManage">确定</button>
				<button class="btn btn-default" data-dismiss="modal">关闭</button>
			</div>
		</div>
	</div>
</div>

JavaScript代码如下:
    var checkableTree_lessonMange = {};
    function buildLessonDepartmentTree(treeData, id) {
    	checkableTree_lessonMange = $('#tree-departments-lessonManage').treeview({
    		data: treeData,
    		showIcon: false,
    		color: "#428bca",
    		showCheckbox: true,
    		selectedColor: "#428bca",
    		selectedBackColor: "#eee",
            nodeIcon: "glyphicon glyphicon-user",
            onNodeChecked: function(event, node) {   // 选中事件
            	var childrenIds = listChildrenIds(node); // 获取所有子节点ID, 包括当前节点ID
           	checkableTree_lessonMange.treeview('checkNode', [childrenIds, { silent: true }]); //全部选中
            	handleParentCheckedStatus(node); // 处理父节点状态
            },    
            onNodeUnchecked: function(event, node) { //取消选中事件
            	var allChildrenNodeIds = listChildrenIds(node);    //获取所有子节点
            	var uncheckedchildrenIds = getUncheckedChildrenIds(node); //获取未被选中的子节点
            	if (allChildrenNodeIds && uncheckedchildrenIds.length == 0) { //有子节点且都被选中情况下,取消选中所有子节点. 加判断防止触发父节点uncheck事件导致兄弟节点及兄弟节点的子节点触发uncheck事件   
            		checkableTree_lessonMange.treeview('uncheckNode', [allChildrenNodeIds, { silent: true }]);      
            	}  
            }   
        });
    	$('#expandTree_btn_lessonManage').click(function() {   // 展开所有节点
    		checkableTree_lessonMange.treeview('expandAll');
    	});
    	$('#collapseTree_btn_lessonManage').click(function() { //合并所有节点
    		checkableTree_lessonMange.treeview('collapseAll');
    	}); 	
        $('#search-departmentsTree-lessonManage').on('input', function (e) { // 搜索指定节点, 并高亮显示
      	    checkableTree_lessonMange.treeview('search', [ $(this).val(), { ignoreCase: false, exactMatch: false }]);
        });
    }
    
    // 处理父节点的选中状态, 在这个方法中能够处理是否当所有子节点被选中时自动选中父节点, 任意一子节点取消选中时取消选中父节点
function handleParentCheckedStatus(node) { var parentNode = $('#tree-departments-lessonManage').treeview("getNode", node.parentId); if (parentNode.nodes) { var checkedCount = 0; for (childIndex in parentNode.nodes) { if (!parentNode.nodes[childIndex].state.checked) { return; } checkedCount++; } $('#tree-departments-lessonManage').treeview("checkNode", parentNode.nodeId); setParentNodeCheck(parentNode); } } // 获取指定节点下所有未被选中的子节点ID function getUncheckedChildrenIds(parentNode) { var children = parentNode.nodes, uncheckedIds = []; //当前节点子集中未被选中的集合 if (!children) { return uncheckedIds; } for (nodeIndex in children) { !children[nodeIndex].state.checked ? uncheckedIds.push(children[nodeIndex].nodeId) : ''; if (children[nodeIndex].nodes) { var recursionNodes = getUncheckedChildrenIds[nodeIndex]; for (recursionIndex in recursionNodes) { !recursionNodes[recursionIndex].state.checked ? uncheckedIds.push(recursionNodes[recursionIndex]) : ''; } } } return uncheckedIds; } // 获取指定节点下的所有子节点ID function listChildrenIds(parentNode) { var childrenIds = [], children = parentNode.nodes; if (!children) { childrenIds.push(parentNode.nodeId); return childrenIds; } for (nodeIndex in children) { childrenIds.push(children[nodeIndex].nodeId); if (children[nodeIndex].nodes) { var recursionNodes = listChildrenIds(children[nodeIndex]); for (recursionIndex in recursionNodes) { childrenIds.push(recursionNodes[recursionIndex]); } } } return childrenIds; }


目录
相关文章
|
2月前
|
前端开发 容器
bootstrap table 设置自定义列宽
【5月更文挑战第4天】bootstrap table 设置自定义列宽
开心档 - 软件开发入门之 Bootstrap4 自定义表单
Bootstrap4 自定义表单Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。
开心档之 Bootstrap4 自定义表单
Bootstrap4 自定义表单Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。
|
JavaScript Java
Bootstrap-Datatables Java后台分页 批量删除 自定义搜索
先上一张效果图、自定义搜索Java代码、批量删除的代码。
225 0
Bootstrap-Datatables Java后台分页 批量删除 自定义搜索
|
前端开发
Bootstrap Tree View,简单而优雅的树结构组件(2)
Bootstrap Tree View,简单而优雅的树结构组件
302 0
Bootstrap Tree View,简单而优雅的树结构组件(2)
|
JSON 前端开发 JavaScript
Bootstrap Tree View,简单而优雅的树结构组件(1)
Bootstrap Tree View,简单而优雅的树结构组件
535 0
Bootstrap Tree View,简单而优雅的树结构组件(1)
|
前端开发
bootstrap-treeview 自定义添加节点方法
        bootstrap-treeview官方没有给出动态添加子节点和子节点集合的方法, 当需要点击父节点再去从后台获取其子节点时, 需要用户自定义动态加载子节点方法. 本文自定义了添加节点集合方法, 用于一次添加多个子节点.
3679 0
|
前端开发 JavaScript 容器
|
前端开发
bootstrap自定义样式-bootstrap侧边导航栏的实现
前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单,参考了很多官网的侧滑,实现方法各有不同,优缺点也十分明显,有的官网首页为了仅仅实现一个侧滑的效果,用了owl.carousel滑屏的插件,个人觉得小题大做了。
3541 0