欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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插件的基本认识

首先,这个插件实现的最终效果图是这样的

bootstrap treeview简单实现各节点对应的href界面跳转

从上到下,结点的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(){
			
		}
		
	})
}

以上即为本人测试过的例子,希望对您有帮助!

相关标签: bootstrap treeview