layui 树形组件href在iframe中打开方式

@Layui

快速使用

引入tree模块

layui.use('tree', function(){}）

声明tree

var tree = layui.tree;

渲染tree结构

在html中定义一个带有id的div

<div id="tree"></div>

通过 tree.render() 方法指定一个元素，便可快速创建一个 tree 实例。

var inst1 = tree.render({
      elem: '#tree'  //绑定元素
      ,data: [{
        title: '一级菜单' //一级菜单
        ,children: [{
          title: '二级菜单' //二级菜单
          ,children: [{
            title: '三级菜单' //三级菜单
            //…… //以此类推，可无限层级
          }]
        }]
      },{
        title: '一级菜单' //一级菜单
        ,children: [{
          title: '二级菜单' //二级菜单
        }]
      }]
    });

给tree节点绑定href点击跳转

首先点击跳转前要开启isJump否则点击跳转无效

 tree.render({
	isJump: true, //开启点击节点跳转页面
})

设置href页面跳转路径

children: [{
								title: '三级菜单', //三级菜单
								href: "http://www.baidu.com" //跳转页面
}]

此时打开的页面会在新的窗口打开如果要设置打开页面在规定的iframe中打开可以监听tree的点击事件并使用jquery中的attr方法给a标签绑定属性

在规定的iframe中打开

首先看使用tree渲染到页面中的结构如下：

可以看到a标签带有样式layui-tree-txt使用
处理方式如下：

layui.use(['jquery','tree'],function(){
	var tree = layui.tree;
	var $ = layui.jquery;
	var inst1 = tree.render({
      elem: '#tree'  //绑定元素
      ,data: [{
        title: '一级菜单' //一级菜单
        ,children: [{
          title: '二级菜单' //二级菜单
          ,children: [{
            title: '三级菜单' //三级菜单
            //…… //以此类推，可无限层级
          }]
        }]
      },{
        title: '一级菜单' //一级菜单
        ,children: [{
          title: '二级菜单' //二级菜单
        }]
      }],
      click:function(){
			$(".layui-tree-txt").attr("target", "iframe的name");
	 }
    });
})