Ul easyui-tree

来自ling
跳转至: 导航搜索

asyui-layout div easyui-window div easyui-panel a easyui-linkbutton input/textarea easyui-validatebox ul easyui-tree table easyui-datagrid div easyui-tab div menu-sep a easyui-splitbutton div easyui-accordion select easyui-combobox select easyui-combotree body/div easyui-layout div easyui-menu a easyui-menubutton input easyui-numberbox timerSpan

             1)url:一个获取远程数据的地址。
             2)animate:当展开或折叠节点时是否定义动画效果。true[是] false[否] 默认false
            节点属性如下:
            1)text:节点的显示文本。
            2)id:节点ID,对于加载远程数据时非常重要。
            3)state:节点状态,'open'或'closed',默认为'open'。当设置为'关闭',该节点包含子节点,并将远程站点加载它们(并非触发再加载)。
            4)attributes:为节点添加自定义属性。
            5)children:以数组节点的方式定义一些字节点。
  • 事件如下:
                1)onClick:
                   当用户点击一个节点时激活,该节点参数包含如下属性:
                   id:节点ID
                   text:节点文本
                   attributes:节点自定义属性。
                   target:目标点击的DOM对象。
             2)onLoadSuccess:
                  当数据成功加载数据时激活,该参数跟jQuery.ajax的'success'函数效果相同。
             3)onLoadError:
                 当数据加载数据失败时激活,该参数跟jQuery.ajax的'error'函数效果相同。
  • 方法如下:
                1)reload:重新加载树数据。
                2)getSelected:获取选中的节点并返回它,如果没有选择节点将返回null。
                3)collapse:折叠一个节点,该目标参数是该节点的DOM对象。
             4)expand:展开一个节点,该目标参数是该节点的DOM对象。 
             5)append:在一个父节点追加一些子节点。
                   param有两个属性:
                   parent:DOM对象,把它作为父节点追加(它们)。
                   data:array,或者节点数据。
             6)remove:删除它以及它以下的子节点,该目标参数是该节点的DOM对象。
<ul class="easyui-tree">
        <li>
            <span>Folder</span>
            <ul>
                <li>
                    <span>Sub Folder 1</span>
                    <ul>
                        <li><span>File 11</span></li>
                        <li><span>File 12</span></li>
                        <li><span>File 13</span></li>
                    </ul>
                </li>
                <li><span>File 2</span></li>
                <li><span>File 3</span></li>
            </ul>
        </li>
        <li><span>File21</span></li>
    </ul>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
	<link rel="stylesheet" type="text/css" href="/JQuery/js/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="/JQuery/js/easyui/themes/icon.css">
	<script type="text/javascript" src="/JQuery/js/easyui/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="/JQuery/js/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#tt1').tree({
				animate:true,
				onClick:function(node){
					alert('you click '+node.text);
				}
			});
			$('#tt2').tree({
				checkbox: true,
				url: 'treeServer.jsp',
				onClick:function(node){
					alert('you click '+node.text);
				}
			});
		});
		function reload(){
			$('#tt2').tree('reload');
		}
		function getChildNodes(){
			var node = $('#tt2').tree('getSelected');
			if (node){
				var children = $('#tt2').tree('getChildNodes', node.target);
				var s = '';
				for(var i=0; i<children.length; i++){
					s += children[i].text + ',';
				}
				alert(s);
			}
		}
		function getChecked(){
			var nodes = $('#tt2').tree('getChecked');
			var s = '';
			for(var i=0; i<nodes.length; i++){
				if (s != '') s += ',';
				s += nodes[i].text;
			}
			alert(s);
		}
		function getSelected(){
			var node = $('#tt2').tree('getSelected');
			alert(node.text);
		}
		function collapse(){
			var node = $('#tt2').tree('getSelected');
			$('#tt2').tree('collapse',node.target);
		}
		function expand(){
			var node = $('#tt2').tree('getSelected');
			$('#tt2').tree('expand',node.target);
		}
		function collapseAll(){
			$('#tt2').tree('collapseAll');
		}
		function expandAll(){
			$('#tt2').tree('expandAll');
		}
		function append(){
			var node = $('#tt2').tree('getSelected');
			$('#tt2').tree('append',{
				parent: node.target,
				data:[{
					text:'new1',
					checked:true
				},{
					text:'new2',
					state:'closed',
					children:[{
						text:'subnew1'
					},{
						text:'subnew2'
					}]
				}]
			});
		}
		function remove(){
			var node = $('#tt2').tree('getSelected');
			$('#tt2').tree('remove', node.target);
		}
		function update(){
			var node = $('#tt2').tree('getSelected');
			if (node){
				node.text = '<span style="font-weight:bold">new text</span>';
				node.iconCls = 'icon-save';
				$('#tt2').tree('update', node);
			}
		}
		function isLeaf(){
			var node = $('#tt2').tree('getSelected');
			var b = $('#tt2').tree('isLeaf', node.target);
			alert(b)
		}
	</script>
</head>
<body>
	<h1>Tree</h1>
	<p>Create from HTML markup</p>
	<ul id="tt1">
		<li>
			<span>Folder</span>
			<ul>
				<li>
					<span>Sub Folder 1</span>
					<ul>
						<li>
							<span><a href="#">File 11</a></span>
						</li>
						<li>
							<span>File 12</span>
						</li>
						<li>
							<span>File 13</span>
						</li>
					</ul>
				</li>
				<li>
					<span>File 2</span>
				</li>
				<li>
					<span>File 3</span>
				</li>
				<li>File 4</li>
				<li>File 5</li>
			</ul>
		</li>
		<li>
			<span>File21</span>
		</li>
	</ul>
	<hr></hr>
	<p>Create from JSON data</p>
	<div style="margin:10px;">
		<a href="#" onclick="reload()">reload</a>
		<a href="#" onclick="getChildNodes()">getChildNodes</a>
		<a href="#" onclick="getChecked()">getChecked</a>
		<a href="#" onclick="getSelected()">getSelected</a>
		<a href="#" onclick="collapse()">collapse</a>
		<a href="#" onclick="expand()">expand</a>
		<a href="#" onclick="collapseAll()">collapseAll</a>
		<a href="#" onclick="expandAll()">expandAll</a>
		<a href="#" onclick="append()">append</a>
		<a href="#" onclick="remove()">remove</a>
		<a href="#" onclick="update()">update</a>
		<a href="#" onclick="isLeaf()">isLeaf</a>
	</div>

	<ul id="tt2"></ul>
</body>
</html>