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 {
//清空
}

}









猜你喜欢

转载自www.cnblogs.com/beixiaoyi/p/10373799.html
0条评论
添加一条新回复