16-EasyUI尚硅谷 - combotree（依赖于combo和tree）

这个控件主要用于权限的设置

1. 获取combotree选中的值的id

效果：

 

控制台打印：

代码：

<body>
	<select id="cc"></select>
	<a id="btn" class="easyui-linkbutton">获取combotree选中的值的id</a>
</body>

<script type="text/javascript">
	$(function() {
		$("#cc").combotree({
			//url: "json/tree_data.json",
			url: "ResourceServlet?method=loadTree",
			width: 300,
			// 加复选框
			checkbox: true,		// tree中特性，添加复选框
			multiple: true		// combo中特性，支持多选
		});
		$("#btn").click(function() {
			var ids = $("#cc").combotree("getValues");
			console.info(ids);
		});
	});
</script>

 2. 调用combotree方法返回tree对象，就可以调用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>Combotree</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() {
		$("#cc").combotree({
			//url: "json/tree_data.json",
			url: "ResourceServlet?method=loadTree",
			width: 300,
			// 加复选框
			checkbox: true,		// tree中特性，添加复选框
			multiple: true		// combo中特性，支持多选
		});
		$("#btn").click(function() {
			var ids = $("#cc").combotree("getValues");
			console.info(ids);
		});
		// 调用tree方法，返回tree对象
		$("#btn2").click(function() {
			var tree = $("#cc").combotree("tree");
			var root = tree.tree("getRoot");
			console.info(root);
		});
	});
</script>
</head>

<body>
	<select id="cc"></select>
	<a id="btn" class="easyui-linkbutton">获取combotree选中的值的id</a>
	<a id="btn2" class="easyui-linkbutton">返回tree对象，并调用tree中的任何方法</a>
</body>
</html>

 

posted @ 2017-08-04 18:20  半生戎马，共话桑麻、  阅读(190)  评论(0)    收藏  举报
levels of contents