simpleTree简单使用

最新推荐文章于 2022-08-26 14:45:13 发布

weixin_33962621

最新推荐文章于 2022-08-26 14:45:13 发布

阅读量763

点赞数

文章标签： javascript xhtml ViewUI

SimpleTree使用起来比较方便，它实现了最基本的树形菜单的功能，包括1个JS文件、1个CSS文件和5个图标文件。

使用时只要将相关文件复制到项目中，并在相应的页面引用它就行，例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>SimpleTree</title>
<link rel="stylesheet" type="text/css" href="js/tree_themes/SimpleTree.css"/>
<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
<script type="text/javascript" src="js/SimpleTree.js"></script>
<script type="text/javascript">
$(function(){
    $(".st_tree").SimpleTree({
        click:function(a){
            if(!$(a).attr("hasChild"))
                alert($(a).attr("ref"));
        }
    });
});
</script>
</head>
<body>

<div class="st_tree">
<ul>
    <li><a href="#" ref="hyjm">欢迎界面</a></li>
    <li><a href="#" ref="xtgl">系统管理</a></li>
    <ul show="true">
        <li><a href="#" ref="yhgl">用户管理</a></li>
        <li><a href="#" ref="rzck">日志查看</a></li>
    </ul>
    <li><a href="#" ref="ckgl">仓库管理</a></li>
    <ul>
        <li><a href="#" ref="kcgl">库存管理</a></li>
        <li><a href="#" ref="shgl">收货管理</a></li>
        <li><a href="#" ref="fhgl">发货管理</a></li>
        <ul>
            <li><a href="#" ref="yhgl">用户管理</a></li>
            <li><a href="#" ref="rzck">日志查看</a></li>
        </ul>
    </ul>
</ul>
</div>

</body>
</html>

上面代码在IE8中执行结果如图：

在Chrome里执行如图：

下面是自己手写的树形：

$.post("${pageContext.request.contextPath}/rest/baseStation/treesList",function(result){
			if(!result.status){
				alert(result.data);
				return;
			}
			var str = "";
			for(var i=0;i<result.data.length;i++){
				//不是分组数据，不执行查询树节点操作
				if(result.data[i].groupsid){
					continue;
				}
				str+='<ul style="padding-left:0;">'
			        +'<li><a href="#">'+(result.data[i].groupsname==null?result.data[i].name:result.data[i].groupsname)+'</a></li>';
			        if(result.data[i].children && result.data[i].children.length>0){
			        	str+=getStr(result.data[i].children);
			        }
			    	str+='</ul>';
			}
			$(".company_Tree").html(str);
			$(".company_Tree").SimpleTree({
				click:function(a){
					if(!$(a).attr("hasChild"))
						alert($(a).attr("ref"));
				}/* ,
				afterClick:function(node){
					console.log(node);
				}  */
			});
			
		});
	});
	function getStr(child){
		var str = '<ul show="true">';
		for(var i=0;i<child.length;i++){
				//给树节点添加单机事件(必须是基站)
				if(child[i].isnode==0){
		        	str+='<li><a href="javascript:void(0);" οnclick="showStationInfo(\''+child[i].id+'\')">'+(child[i].groupsname==null?child[i].name:child[i].groupsname)+'</a></li>';
				}else{
		        	str+='<li><a href="#">'+(child[i].groupsname==null?child[i].name:child[i].groupsname)+'</a></li>';
				}
        	 if(child[i].children && child[i].children.length>0){
		        	str+=getStr(child[i].children);
		        }
		}
	    str+='</ul>';
		return str;
	}

展示样式：

weixin_33962621

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
simpleTree简单使用

SimpleTree使用起来比较方便，它实现了最基本的树形菜单的功能，包括1个JS文件、1个CSS文件和5个图标文件。使用时只要将相关文件复制到项目中，并在相应的页面引用它就行，例如：&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht...
复制链接

扫一扫