bootstrap-treeview分级展示列表树的实现
html页面:
要引用
"/webapp/common/css/bootstrap-treeview.css"
"/webapp/common/js/bootstrap-treeview.js",
<div class="row">
<div class="col-md-3" style="width: 350px;">
<!--<div class="btn-group" role="group" >-->
<!--<button type="button" class="btn btn-default" onclick="dosome(1)">全选</button>-->
<!--<button type="button" class="btn btn-default" onclick="dosome(2)">反选</button>-->
<!--<button type="button" class="btn btn-default" onclick="dosome(4)">展开</button>-->
<!--<button type="button" class="btn btn-default" onclick="dosome(3)">折叠</button>-->
<!--<button type="button" class="btn btn-default" onclick="getDisabled()">取值</button>-->
<!--</div>-->
<!--<input type="button" onclick="getDisabled()" value="选中项的个数"/></br></br>-->
<!--<label>选中父级,子级默认选中</label></br></br>-->
<div id="treeview1"></div>
</div>
<!--<div style="display: none;" id="treeviewVal">-->
<!--<!–[{"id":1,"text":"城市管理","level":0,"tag":0,"nodes":[{"id":1001,"text":"北京","level":0,"tag":0,"href":"account!editAccount.html"},{"id":1003,"text":"条件","level":0,"tag":0,"href":"system!listGroup.html"},{"id":1002,"text":"黄河入海流","level":0,"tag":0,"href":"account!list.html"},{"id":1004,"text":"欲穷千里目","level":0,"tag":0,"href":"account!chgPasswd.html"},{"id":1005,"text":"办事处管理","level":0,"tag":0,"href":"td!officeList.html"},{"id":1006,"text":"工作组管理","level":0,"tag":0,"href":"group!list.html"},{"id":1007,"text":"工作区管理","level":0,"tag":0,"href":"workSpace!list.html"},{"id":1008,"text":"业务员管理","level":0,"tag":0,"href":"marketingaAccount!listSalesman.html"},{"id":1009,"text":"日照香炉生紫烟","level":0,"tag":0,"href":"td!hotelList.html"},{"id":1010,"text":"更上一层楼","level":0,"tag":0,"href":"td!saleList.html"},{"id":1022,"text":"帮助文档","level":0,"tag":0,"href":"fileDownload!downloadX.html"}],"href":""},{"id":9,"text":"汇总数据","level":0,"tag":0,"nodes":[{"id":1020,"text":"礼拜","level":0,"tag":0,"href":"calculation!edit.html"},{"id":1021,"text":"杜甫","level":0,"tag":0,"href":"calculationRecrd!list.html"}],"href":""},{"id":2,"text":"业务记录模块","level":0,"tag":0,"nodes":[{"id":1011,"text":"酒楼变更记录","level":0,"tag":0,"href":"hotelChange!list.html"},{"id":1013,"text":"吉拉拉","level":0,"tag":0,"href":"tdyhRecord!patBarcodeRecordList.html"},{"id":1014,"text":"窜货记录","level":0,"tag":0,"href":"tdyhRecord!tranGoodsRecordList.html"},{"id":1027,"text":"业务员调动记录","level":0,"tag":0,"href":"logInfo!personChange.html"},{"id":1029,"text":"组长调动记录","level":0,"tag":0,"href":"logInfo!groupLeaderChange.html"},{"id":1030,"text":"窜货统计","level":0,"tag":0,"href":"tdyhRecord!statTranGoodsList.html"},{"id":1031,"text":"窜货配置","level":0,"tag":0,"href":"tdyhRecord!tranSet.html"}],"href":""},{"id":3,"text":"账务信息模块","level":0,"tag":0,"nodes":[{"id":1015,"text":"组长待确认账单","level":0,"tag":0,"href":"td!groupLeaderStatementList.html?type=0"},{"id":1018,"text":"组长已确认账单","level":0,"tag":0,"href":"td!groupLeaderStatementList.html?type=1"},{"id":1019,"text":"组长已挂起账单","level":0,"tag":0,"href":"td!groupLeaderStatementList.html?type=2"}],"href":""},{"id":5,"text":"财务对账模块","level":0,"tag":0,"nodes":[{"id":5001,"text":"待确认账单","level":0,"tag":0,"href":"finance!list.html"},{"id":5002,"text":"已确认账单","level":0,"tag":0,"href":"finance!confirmList.html"}],"href":""},{"id":6,"text":"未兑换积分数据","level":0,"tag":0,"nodes":[{"id":5004,"text":"未兑换积分汇总","level":0,"tag":0,"href":"td!surplusSummary.html"}],"href":""},{"id":7,"text":"积分兑换数据","level":0,"tag":0,"nodes":[{"id":5003,"text":"积分兑换汇总","level":0,"tag":0,"href":"td!pointSummary.html"}],"href":""},{"id":8,"text":"积分数据","level":0,"tag":0,"nodes":[{"id":5005,"text":"积分汇总","level":0,"tag":0,"href":"td!integralSummary.html"},{"id":5006,"text":"积分记录","level":0,"tag":0,"href":"td!integralSummaryList.html"}],"href":""},{"id":10,"text":"微信管理","level":0,"tag":0,"nodes":[{"id":1023,"text":"微信红包设置","level":0,"tag":0,"href":"wx!list.html"},{"id":1024,"text":"微信积分配置","level":0,"tag":0,"href":"wxIntegral!list.html"},{"id":1025,"text":"拍码设置","level":0,"tag":0,"href":"patBarcode!edit.html"},{"id":1026,"text":"微信修改日志查询","level":0,"tag":0,"href":"logInfo!list.html"}],"href":""},{"id":11,"text":"微信兑换数据","level":0,"tag":0,"nodes":[{"id":1028,"text":"微信兑换记录","level":0,"tag":0,"href":"td!pointSummaryList1.html?pointType=2"}],"href":""},{"id":12,"text":"活动管理","level":0,"tag":0,"nodes":[{"id":1201,"text":"活动管理","level":0,"tag":0,"href":"activity!list.html"},{"id":1202,"text":"活动统计","level":0,"tag":0,"href":"activityPlay!list.html"}],"href":""}]–>-->
<!--</div>-->
</div>
后台上送页面json值:
dataJson =
[{"id":1,"text":"城市管理","level":0,"tag":0,"nodes":[{"id":1001,"text":"北京","level":0,"tag":0,"href":"account!editAccount.html"},{"id":1003,"text":"条件","level":0,"tag":0,"href":"system!listGroup.html"},{"id":1002,"text":"黄河入海流","level":0,"tag":0,"href":"account!list.html"},{"id":1004,"text":"欲穷千里目","level":0,"tag":0,"href":"account!chgPasswd.html"},{"id":1005,"text":"办事处管理","level":0,"tag":0,"href":"td!officeList.html"},{"id":1006,"text":"工作组管理","level":0,"tag":0,"href":"group!list.html"},{"id":1007,"text":"工作区管理","level":0,"tag":0,"href":"workSpace!list.html"},{"id":1008,"text":"业务员管理","level":0,"tag":0,"href":"marketingaAccount!listSalesman.html"},{"id":1009,"text":"日照香炉生紫烟","level":0,"tag":0,"href":"td!hotelList.html"},{"id":1010,"text":"更上一层楼","level":0,"tag":0,"href":"td!saleList.html"},{"id":1022,"text":"帮助文档","level":0,"tag":0,"href":"fileDownload!downloadX.html"}],"href":""},{"id":9,"text":"汇总数据","level":0,"tag":0,"nodes":[{"id":1020,"text":"礼拜","level":0,"tag":0,"href":"calculation!edit.html"},{"id":1021,"text":"杜甫","level":0,"tag":0,"href":"calculationRecrd!list.html"}],"href":""},{"id":2,"text":"业务记录模块","level":0,"tag":0,"nodes":[{"id":1011,"text":"酒楼变更记录","level":0,"tag":0,"href":"hotelChange!list.html"},{"id":1013,"text":"吉拉拉","level":0,"tag":0,"href":"tdyhRecord!patBarcodeRecordList.html"},{"id":1014,"text":"窜货记录","level":0,"tag":0,"href":"tdyhRecord!tranGoodsRecordList.html"},{"id":1027,"text":"业务员调动记录","level":0,"tag":0,"href":"logInfo!personChange.html"},{"id":1029,"text":"组长调动记录","level":0,"tag":0,"href":"logInfo!groupLeaderChange.html"},{"id":1030,"text":"窜货统计","level":0,"tag":0,"href":"tdyhRecord!statTranGoodsList.html"},{"id":1031,"text":"窜货配置","level":0,"tag":0,"href":"tdyhRecord!tranSet.html"}],"href":""},{"id":3,"text":"账务信息模块","level":0,"tag":0,"nodes":[{"id":1015,"text":"组长待确认账单","level":0,"tag":0,"href":"td!groupLeaderStatementList.html?type=0"},{"id":1018,"text":"组长已确认账单","level":0,"tag":0,"href":"td!groupLeaderStatementList.html?type=1"},{"id":1019,"text":"组长已挂起账单","level":0,"tag":0,"href":"td!groupLeaderStatementList.html?type=2"}],"href":""},{"id":5,"text":"财务对账模块","level":0,"tag":0,"nodes":[{"id":5001,"text":"待确认账单","level":0,"tag":0,"href":"finance!list.html"},{"id":5002,"text":"已确认账单","level":0,"tag":0,"href":"finance!confirmList.html"}],"href":""},{"id":6,"text":"未兑换积分数据","level":0,"tag":0,"nodes":[{"id":5004,"text":"未兑换积分汇总","level":0,"tag":0,"href":"td!surplusSummary.html"}],"href":""},{"id":7,"text":"积分兑换数据","level":0,"tag":0,"nodes":[{"id":5003,"text":"积分兑换汇总","level":0,"tag":0,"href":"td!pointSummary.html"}],"href":""},{"id":8,"text":"积分数据","level":0,"tag":0,"nodes":[{"id":5005,"text":"积分汇总","level":0,"tag":0,"href":"td!integralSummary.html"},{"id":5006,"text":"积分记录","level":0,"tag":0,"href":"td!integralSummaryList.html"}],"href":""},{"id":10,"text":"微信管理","level":0,"tag":0,"nodes":[{"id":1023,"text":"微信红包设置","level":0,"tag":0,"href":"wx!list.html"},{"id":1024,"text":"微信积分配置","level":0,"tag":0,"href":"wxIntegral!list.html"},{"id":1025,"text":"拍码设置","level":0,"tag":0,"href":"patBarcode!edit.html"},{"id":1026,"text":"微信修改日志查询","level":0,"tag":0,"href":"logInfo!list.html"}],"href":""},{"id":11,"text":"微信兑换数据","level":0,"tag":0,"nodes":[{"id":1028,"text":"微信兑换记录","level":0,"tag":0,"href":"td!pointSummaryList1.html?pointType=2"}],"href":""},{"id":12,"text":"活动管理","level":0,"tag":0,"nodes":[{"id":1201,"text":"活动管理","level":0,"tag":0,"href":"activity!list.html"},{"id":1202,"text":"活动统计","level":0,"tag":0,"href":"activityPlay!list.html"}],"href":""}]
js代码:
var ids = null;
$(function() { $('#treeview1').treeview({
// data: $("#treeviewVal").html(),
data: dataJson,
showCheckbox : true,
levels:1,
onNodeChecked: function(event, data){
//选中父节点,则自动选择子节点 if(data.nodes != null) { var arrayInfo = data.nodes;
for (var i = 0; i < arrayInfo.length; i++) {
// $('#treeview1').treeview('checkNode', [ arrayInfo[i].nodeId, { silent: true } ]);
$('#treeview1').treeview('toggleNodeChecked', [ arrayInfo[i].nodeId, { silent: true } ]); }
} ids = null;
getIds(ids); },
onNodeUnchecked: function(event, data){
//取消选中父节点,则自动取消选择子节点
if(data.nodes != null)
{
var arrayInfo = data.nodes;
for (var i = 0; i < arrayInfo.length; i++) {
// $('#treeview1').treeview('checkNode', [ arrayInfo[i].nodeId, { silent: true } ]);
$('#treeview1').treeview('toggleNodeChecked', [ arrayInfo[i].nodeId, { silent: true } ]);
}
} ids = null;
getIds(ids); }
}); }); function dosome( num){
if(num == 1)
{
$('#treeview1').treeview('checkAll', { silent: true });//全选
}else if(num == 2){
$('#treeview1').treeview('uncheckAll', { silent: true });//取消全选
}else if(num == 3){
$('#treeview1').treeview('collapseAll', { silent: true });//折叠
}else if(num == 4){
$('#treeview1').treeview('expandAll', { levels: 2, silent: true });//展开所有二级节点
}
}
function getDisabled(){
var checkedArr = $('#treeview1').treeview('getChecked','');
console.log(checkedArr[0].id);
console.log(checkedArr[0].text); }
function getIds(ids) {
var checkedArr = $('#treeview1').treeview('getChecked');
for (var i = 0; i < checkedArr.length; i++) {
console.log("checkedArr["+i+"].id="+checkedArr[i].id); if (i == checkedArr.length -1) {
ids = ids + checkedArr[i].id;
} else {
ids = ids + checkedArr[i].id + ",";
} }
console.log("ids="+ids); //如果ids只包含一个子id的时候,则ajax去后台查对应显示信息;
if(ids != null && ids.toString().indexOf(",") < 0 ) {
//反显 } else {
//清空
} }
bootstrap-treeview分级展示列表树的实现的更多相关文章
- 基于bootstrap的jQuery多级列表树插件 treeview
http://www.cnblogs.com/mfc-itblog/p/5233453.html http://www.htmleaf.com/jQuery/Menu-Navigation/20150 ...
- 基于bootstrap的jQuery多级列表树插件
简要教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一 ...
- bootstrap treeview实现菜单树
本博客,介绍通过Bootstrap的treeview插件实现菜单树的功能. treeview链接:http://www.htmleaf.com/Demo/201502141380.html ORM框架 ...
- 基于bootstrup treeview多级列表树插件
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- 初始化bootstrap treeview树节点
最近在做启明星图库时,使用了Jquery Bootstrap Treeview插件.但是,遇到了一个初始化的问题.先看效果如下: 当用户打开图库时,左边分类第一个类别是“所有分类”,默认需要选中. ...
- WPF如何用TreeView制作好友列表、播放列表
WPF如何用TreeView制作好友列表.播放列表 前言 TreeView这个控件对于我来说是用得比较多的,以前做的小聊天软件(好友列表).音乐播放器(播放列表).类库展示器(树形类结构)等都用的是T ...
- WPF如何用TreeView制作好友列表、播放列表(转)
WPF如何用TreeView制作好友列表.播放列表 前言 TreeView这个控件对于我来说是用得比较多的,以前做的小聊天软件(好友列表).音乐播放器(播放列表).类库展示器(树形类结构)等都用的是T ...
- React入门 (2)—实现微博展示列表
前言 如果从来不了解React先看前篇React入门 (1)-使用指南(包括ES5和ES6对比). 本文为了能将前篇学到的react知识学以致用,做了一个类似微博展示列表的demo.使用的是ES6+R ...
- Bootstrap treeview增加或者删除节点
参考(AddNode: http://blog.csdn.net/qq_25628235/article/details/51719917,deleteNode:http://blog.csdn.ne ...
随机推荐
- 练习:javascript-setInterval动画运动平移,定时器动画练习
常见问题:定时器加速问题,每次点击会启动一个定时器,解决先清除定时器 <!DOCTYPE html> <html lang="en"> <head&g ...
- 移动端控制视频点击播放点击下一个视频时自动停止播放&监听滑动溢出屏幕高度时停止播放
直接上代码js部分: <script type="text/javascript"> var go;//记录video播放器位置 var video=document. ...
- mui弹出菜单
详细操作见代码: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...
- ssm心得
dao层 mybatis mapper工厂spring接管后,直接拿到mapper接口就可以来实现方法 service层 注入dao层的mapper实现各种方法.. controller 层 注入se ...
- Nginx+Apache环境的安装与配置
我们依然尽可能采用yum来安装我们需要的软件,由系统官方维护的软件,其安全性和稳定性都值得信赖,并且容易管理,升级方便,但是在CentOS和RHEL的官方yum源中暂时没有Nginx等软件包,所以我们 ...
- UML各种图总结-精华
UML(Unified Modeling Language)是一种统一建模语言,为面向对象开发系统的产品进行说明.可视化.和编制文档的一种标准语言.下面将对UML的九种图+包图的基本概念进行介绍以及各 ...
- 3D Slicer中文教程(三)—数据加载及保存方式
1.打开数据与保存数据 (1)打开数据 ——可以将数据拖拽到3D Slicer应用窗口或者从菜单栏工具栏打开. ——多种方式加载大量数据. 有关DICOM数据,请参阅DICOM模块文档. 对于几乎所有 ...
- 【转】协同开发中SVN使用规范试用
转自:http://www.cnblogs.com/BraveCheng/archive/2012/07/02/2573617.html 协同开发中SVN使用规范试用 目标,要求 本次svn提交规范主 ...
- Fork别人的代码 原作者更新后如何同步
给主题的fork加一个remote 给 fork 配置一个 remote 使用 git remote -v 查看远程状态 ➜ next git:(master) git remote -v origi ...
- Docker设置http代理
在国内由于不可描述的原因无法访问Google等网站,但是作为一枚挨踢人士,无法使用Google搜索,在使用Ctrl + C技能时是抓狂的:特别是当下Docker.Kubernetes等容器技术火热的时 ...