bootstrap treeview简单实现各节点对应的href界面跳转
程序员文章站
2022-06-08 14:58:08
...
在使用bootstrap treeview插件的时候,虽然绑定了href,但是在点击的时候,仍然无法实现点击就跳转的效果,于是就换了一种方式来实现这种类似的效果。方法如下:
第一步:插件的基本环境
bootstrap-treeview.min.css(1.2.0)
bootstrap-treeview.min.js(1.2.0)
jquery.js
第二步:对treeview插件的基本认识
首先,这个插件实现的最终效果图是这样的
从上到下,结点的id也就是nodeId是从0开始的,即祖父级菜单为0,父级菜单1为1,子级菜单1为2,依次类推,子级菜单4为6.
根据这样的值就能发现可以通过id的不同来实现每一个结点绑定不同的事件,调用不同的函数,从而实现不同的效果。
第三步:给treeview封装自己想要实现的数据,改变text值来实现对应的效果
具体如下:
1)html部分
<div id="menu"></div>
2)json部分
var person = [
{
text:'祖父级菜单',
href:'#perent',
tags:['4'],
nodes:[
{
text:'父级菜单1',
href:"#person",
tags:['2'],
nodes:[
{
text:'子级菜单1',
href:'#person',
tags:['0']
},
{
text:'子级菜单2',
href:'#son',
tags:['0']
}
]
},{
text:'父级菜单2',
href:"#person",
tags:['2'],
nodes:[
{
text:'子级菜单3',
href:'#son',
tags:['0']
},
{
text:'子级菜单4',
href:'#son',
tags:['0']
}
]
}
]
}];
3)js部分
$('#menu').treeview({
data:person //绑定数据源,为上面的json的值
})
$('#menu').on('nodeSelected',function(event,data){ //插件中的方法
// alert(typeof(data.nodeId));
switch(data.nodeId){
case 0:break;
case 1:
testGrandfather(); //当点击结点id为1的那个结点时,调用该函数实现跳转等效果
break;
case 2:
break;
}
});
4)点击结点要实现的函数,如:实现href跳转,或者ajax请求之类的
function testGrandfather(){
//window.location.href="跳转地址"; //界面跳转
$.ajax({ //异步请求
url:url,
type:'post',
dataType:"json",
async:false,
data:{},
success:function(data){
//将后台的数据返回给前端界面
//前端界面对其进行处理,达到要展示的效果。
},
error:function(){
}
})
}
以上即为本人测试过的例子,希望对您有帮助!