12-EasyUI尚硅谷 - tree（基础：特性和部分方法的使用）

 效果：

　　　　

实现：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>Tree</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/icon.css">
<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>

<script type="text/javascript">
	$(function() {
		$("#t2").tree({
			url: "json/tree_data.json",
			animate: true,
			checkbox: true,
			//cascadeCheck: false,
			//onlyLeafCheck: true,
			dnd: true
		});
	});
	// 一些方法
	function getRoot() {
		var rootObj = $("#t2").tree("getRoot");		// 获取根节点
		console.info(rootObj);
	}
	function getChildren() {
		var rootObj = $("#t2").tree("getRoot");		// 获取根节点
		var children = $("#t2").tree("getChildren", rootObj.target)		// 获取根节点的子节点
		console.info(children);
	}
	function getChecked() {
		var nodesChecked = $("#t2").tree("getChecked");		// 获取勾中的节点
		var nodesSelected = $("#t2").tree("getSelected");		// 获取选中的节点
		console.info(nodesSelected);
	}
	function isLeaf() {
		var flag = $("#t2").tree("isLeaf", $("#t2").tree("getSelected").target);	// 判断选中的节点是否是叶子节点
		alert(flag);	// 是叶子节点返回true，否则返回false
	}
	function toggle() {
		var rootObj = $("#t2").tree("getRoot");		// 获取根节点
		$("#t2").tree("toggle", rootObj.target);	// 切换根节点的状态：展开或收缩
	}
</script>
</head>

<body>
	<!-- html形式 -->
	<!-- <ul id="t1" class="easyui-tree">
		<li>
			<span>根节点</span>
			<ul>
				<li><span>节点1</span></li>
				<li><span>节点2</span></li>
				<li><span>节点3</span></li>
			</ul>
		</li>
	</ul> -->
	
	<!-- 一些方法 -->
	<input type="button" onclick="getRoot();" value="getRoot方法"/>
	<input type="button" onclick="getChildren();" value="getChildren方法"/>
	<input type="button" onclick="getChecked();" value="getChecked方法"/>
	<input type="button" onclick="isLeaf();" value="isLeaf方法"/>
	<input type="button" onclick="toggle();" value="toggle方法"/>
	<br><br>
	<!-- js形式 -->
	<ul id="t2"></ul>
</body>
</html>

 

posted @ 2017-08-02 22:03  半生戎马，共话桑麻、  阅读(112)  评论(0)    收藏  举报
levels of contents