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">-->
      <!--&lt;!&ndash;[{"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":""}]&ndash;&gt;-->
   <!--</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 ...

随机推荐

java(10)类的无参方法
一.变量的作用域(有效的使用范围) 1.变量有2种 1.1成员变量(属性) 声明在类的里面,方法的外面 1.2 局部变量声明在方法里面或for循环结构中 2.调用时的注意事项(初始值不同.作用域不同 ...
Django小技巧——使用package管理app
在一个学习视频上看见的小技巧,遂记录下来. 1. 如下图所示,项目中有多个app,本技巧要解决的问题是集中管理这多个app,将其放入一个package下集中管理,改善项目的视图环境 2. 建立一个pa ...
Accoridion折叠面板
详细操作见代码: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...
ES6 的一些语法
1,let 声明变量 let 声明的变量只能在let 的块级作用域中生效,也是为了弥补var声明变量的全局污染问题. var 声明变量有变量提升的作用,也就是在声明变量之前可以使用变量 console ...
php7 + 新特性部分
三目运算符: 以前:$type = isset($_GET['type']) ? $_GET['type'] : '测试'; php7.0: $type = $_GET['type'] ?? '测试' ...
QPS/TPS/并发量/系统吞吐量概念和公式
1.概念我们在日常工作中经常会听到QPS/TPS这些名词,也会经常被别人问起说你的系统吞吐量有多大.一个系统的吞度量(承压能力)与request对CPU的消耗.外部接口.IO等等紧密关联,单个req ...
JavaScript入门学习笔记（JSON）
JSON是JavaScript Object Notation的简称,是一种轻量级的数据交换格式. JSON使用JS的语法,但其格式只是一个文本,可以被任何编程语言读取病作为数据格式传递. JSON以 ...
七天开发进度（六）（微信小程序版（一））
1. 今天主要根据网上教程学习了微信小程序的代码结构,和代码编写-Tabbar配置, 学习了app.js的App和Page方法, 认识了view组件,button组件,input组件,但是还没怎么应用 ...
bzoj 2780
后缀自动机的应用首先我们观察到:如果一个询问串的答案不为0,那么这个串一定是至少一个模式串的子串如果只有一个模式串,那么这个问题可以简单地用什么东西解决掉(比如普通后缀自动机) 而这里有很多模式串 ...
CAS tomcat6搭建
#genkey:在tomcat根目录下keytool -genkey -alias tomcat_cas -keyalg RSA -storepass changeit -keystore serve ...

bootstrap-treeview分级展示列表树的实现

bootstrap-treeview分级展示列表树的实现的更多相关文章

随机推荐

热门专题