一、引入bootstrap、bootstrap-treeview相关文件;
二、HTML代码
<div> <div id="tree" style="color: #999; font-size: 14px;"></div> <div> <button type="button" class="btn btn-success" id="btn-check-all">Check All</button> <button type="button" class="btn btn-danger" id="btn-uncheck-all">Uncheck All</button> </div> <div id="output"></div> </div>
三、JS代码
var defaultData = [ { "id": 0, "icon": "talent-icon-folder", "text": "计算机科学", "nodes": [ { "id": 1, "icon": "talent-icon-folder", "text": "软件工程", "nodes": [ { "id": 2, "icon": "talent-icon-file", "text": "图形学" }, { "id": 3, "icon": "talent-icon-file", "text": "大数据运算" } ] }, { "id": 4, "icon": "talent-icon-file", "text": "微机原理" } ] }, { "id": 5, "icon": "talent-icon-folder", "text": "土木工程", "state": { "checked": true } }, { "id": 6, "icon": "talent-icon-folder", "text": "市场营销" } ]; var $checkableTree = $('#tree').treeview({ data: defaultData, levels: 3, showIcon: true, showCheckbox: true, showBorder: false, /*multiSelect: true,*/ selectedColor: 'back', selectedBackColor: 'white', expandIcon: 'talent-icon-towards-the-right', collapseIcon: 'talent-icon-down', checkedIcon: 'talent-icon-check', uncheckedIcon: 'talent-icon-checkbox', onNodeChecked: function(event, node) { console.log(node.id); $('#output').prepend('<p>' + node.text + ' was checked</p>'); // parent-有子必有父 function doCheckedNode(node) { // 初始化 var thisDiv = $('#tree'); var parentNode = thisDiv.treeview('getParent', node); if(parentNode && 0 <= parentNode.nodeId) { console.log(parentNode); // 选中 thisDiv.treeview('checkNode', [ parentNode, { silent: true } ]); // 递归 doCheckedNode(parentNode); } } doCheckedNode(node); }, onNodeUnchecked: function (event, node) { $('#output').prepend('<p>' + node.text + ' was unchecked</p>'); // child-无父无子 function doUnCheckedNode(node) { // 初始化 var thisDiv = $('#tree'); if(node && node.nodes && 0 < node.nodes.length) { var childNodes = node.nodes; for(var i = 0, len = childNodes.length; i < len; i++) { // 取消选中 thisDiv.treeview('uncheckNode', [ childNodes[i].nodeId, { silent: true } ]); // 递归 doUnCheckedNode(childNodes[i]); } } } doUnCheckedNode(node); } }); $('#btn-check-all').on('click', function (e) { $checkableTree.treeview('checkAll', { silent: $('#chk-check-silent').is(':checked') }); }); $('#btn-uncheck-all').on('click', function (e) { $checkableTree.treeview('uncheckAll', { silent: $('#chk-check-silent').is(':checked') }); });
四、效果
相关推荐
强烈建议初次使用bootstrap的人参考,例子很全...bootstrap树控件使用bootstrap-treeview.js实现树前边多选框checkbox 并实现, 0、获取选中的项 1、点击父级的多选框,自己默认选中 2、全选 3、反选 4、展开、 5、折叠
bootstrap-treeview.js下载
bootstrap下拉树(只有JS和CSS两个文件)
bootstrap-treeview的压缩包,其中包括bootstrap-treeview.css文件和bootstrap-treeview.js文件
bootstrap框架需要的js bootstrap-treeview.min.js
强烈建议初次使用bootstrap的人参考,例子很全...bootstrap树控件使用bootstrap-treeview.js实现树前边多选框checkbox 并实现, 0、获取选中的项 1、点击父级的多选框,自己默认选中 2、全选 3、反选 4、展开、 5、折叠
bootstrap树控件使用bootstrap-treeview.js实现树前边多选框checkbox 并实现, 0、获取选中的项 1、点击父级的多选框,自己默认选中 2、全选 3、反选 4、展开、 5、折叠
bootstrap-treeview 提供树形控件全选、反选、取消、折叠操作。适用于权限管理操作。
bootstrap-treeview的增删改无刷新的完整demo,github地址:https://github.com/merciqiao/bootstrap-treeview-demo/
bootstrap-treeview-master 完整源码和demo
根据整合去改bootstrap-treeview.js,注意新增和删除需要选择,还没有加批量删除,你需要自己试着改写下
bootstrap-table插件:bootstrap-editable,可编辑下拉框,以及代码实例,
赠送jar包:swagger-bootstrap-ui-1.9.6.jar; 赠送原API文档:swagger-bootstrap-ui-1.9.6-javadoc.jar; 赠送源代码:swagger-bootstrap-ui-1.9.6-sources.jar; 赠送Maven依赖信息文件:swagger-bootstrap-ui-...
基于bootstrap-treeview做的一个漂亮的无限分类树层级联动菜单基于bootstrap-treeview做的一个漂亮的无限分类树层级联动菜单
在官方提供的版本的基础上,开发了懒加载功能
可编辑bootstrap-table及相关组件:bootstrap3、bootstrap-table相关、bootstrap-table-editable.js、bootstrap-editable.js、bootstrap-editable.css; 配合起来,可以实现可编辑bootstrap-table列表。代码实现: ...
压缩包里面有: 1.bootstrap-table-editable.js 2.bootstrap-editable.js 3.bootstrap-editable.css 用于bootstrap table实现x-editable的行单元格编辑
bootstrap-table实现 行拖拽 插件 jquery.tablednd.js bootstrap-table-reorder-rows.js bootstrap-table-reorder-rows.css