Hysoft-Hyui
/
tree.html

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
	<title>树插件演示</title>
	<link rel="stylesheet" href="packaged/css/semantic.css" type="text/css" />
	<link rel="stylesheet" href="css/default.css" type="text/css" />
	<link rel="stylesheet" href="css/style.css" type="text/css" />
	<style type="text/css">
	.ui.tree {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	/*.ui.tree li {white-space: nowrap;}*/
	.ui.tree li ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	.ui.tree .node {
		/*display: inline-block;*/
		cursor: pointer;
		height: 18px;
		margin: 0;
		padding: 0;
		white-space: nowrap;
	}

	.ui.tree .node.hover {
		background: #eaf2ff;
		color: #000000;
	}
	.ui.tree .node.selected {
		background: #FBEC88;
		color: #000000;
	}
	.ui.tree .node .title {
		display: inline-block;
		/*font-size: 12px;*/
		height: 18px;
		line-height: 18px;
		padding: 0px;
		text-decoration: none;
		vertical-align: bottom;
		white-space: nowrap;
	}

	.ui.tree .indent {
		display: inline-block;
		height: 18px;
		overflow: hidden;
		vertical-align: bottom;
		width: 16px;
	}

	.ui.tree i.icon {
		margin:0;
		padding: 0;
	}
	</style>
	<script src="js/jquery.min.js"></script>
	<script src="packaged/javascript/semantic.js"></script>
	<script src="javascript/hyui.src.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		hy.tree("#exp1",{
			data : [{"id":1,"text":"Google","pid":0},{"id":11,"text":"Chrome","pid":1},{"id":12,"text":"Andriod","pid":1},{"id":2,"text":"Baidu","pid":0}]
		});

		hy.tree("#exp2", {
			data: [{"key": 1,"dept": "产品研发部","children": [{"key": 11,"dept": "Java"},{"key": 12,	"dept": ".Net"}]}],
			convert: false,
			textField: "dept",
			valueField: "key"
		});

		hy.tree("#exp3",{
			data: data,
			convert: false,
			multiple: true,
			onSelected: function(o) {
				hy.message(o.text,["top:2","right:2"]);
			},
			onChecked: function(values, texts) {
				hy.message("您选择了:" + texts.join(","),"warning");
			}

		}).openNode(12);
	});
	</script>
</head>
<body>
	<div class="main-wrapper">

		<h3>HY-UI Demos</h3>

		<div class="theme">树插件演示用例。</div> <strong>1.</strong>
		前置条件
		<p>需要指定ul元素作为容器, 示例：</p>
		<pre><code class="javascript">&lt;ul class="ui tree"&gt;&lt;/ul&gt;</code></pre> <strong>2.</strong>
		数据格式
		<p>
			<strong>2.1</strong>
			插件内部默认的数据格式，通过 <em>children</em>
			属性的指定子节点。使用这种数据格式请设置 <em>convert:false;</em>
		</p>
		<pre><code class="javascript">[{
	"id": 1,
	"text": "Google",
	"children": [{
		"id": 11,
		"text": "Chrome"
	},
	{
		"id": 12,
		"text": "Andriod"
	}]
},
{
	"id": 2,
	"text": "Baidu"
}]
</code></pre>
		<p>
			<strong>2.2</strong>
			为了方便开发减少后台数据库查询压力，插件支持
			<em>pid</em>
			指定的父节点的数据，默认使用这种数据格式，自动转换为插件内部数据格式。
		</p>
		<pre><code class="javascript">[{
	"id": 1,
	"text": "Google",
	"pid": 0
}, {
	"id": 11,
	"text": "Chrome",
	"pid": 1
},{
	"id": 12,
	"text": "Andriod",
	"pid": 1
},{
	"id": 2,
	"text": "Baidu",
	"pid": 0
}]</code></pre>
		<strong>3.</strong>
		简单示例
		<em>hy.tree(container, {data:data})</em>
		<pre><code class="javascript">hy.tree(".ui.tree", {
	data: [{
		"id": 1,
		"text": "Google",
		"pid": 0
	},
	{
		"id": 11,
		"text": "Chrome",
		"pid": 1
	},
	{
		"id": 12,
		"text": "Andriod",
		"pid": 1
	},
	{
		"id": 2,
		"text": "Baidu",
		"pid": 0
	}]
})</code></pre>
		<ul id="exp1" class="ui tree"></ul>
		<p>&nbsp;</p>
		<strong>4.</strong>
		自定义数据格式
		<pre><code class="javascript">var data = [{
	"key": 1,
	"dept": "产品研发部",
	"children": [{
		"key": 11,
		"dept": "Java"
	},
	{
		"key": 12,
		"dept": ".Net"
	}]
}]
</code></pre>
		<pre><code class="javascript">hy.tree(".ui.tree",{
    data: data,
    convert: false, // 这是默认支持的格式，无须转换
    textField: "dept", // 文本显示字段
    valueField: "key" // 值字段
});</code></pre>
		<ul id="exp2" class="ui tree"></ul>
		<p>&nbsp;</p>
		<strong>5.</strong>
		默认配置解释
		<pre><code class="javascript">// Default Settings
tree.defaults = {
	method: "post", // Ajax请求方式
	multiple: false, // 是否多选
	params: {}, // Ajax请求参数
	url: null, // Ajax请求地址
	data: null, // 数据源,指定后Ajax异步请求配置失效
	convert: true, // 数据格式转换，默认开启
	textField: "text", // 显示文本字段
	valueField: "id", // 值字段
	parentField: "pid", // 父级字段
	rootValue: 0, // 根节点的父级字段值
	filter: function(data) {
		return data["checked"]; // 默认选中过滤函数，多选时有效。传入值为单个数据对象
	},
	onError: function() {}, // Ajax异步请求发生错误时执行函数
	onSelected: function(o) {}, // 选择时执行函数
	onChecked: function(values, texts) {} // 多选选择时执行函数
};</code></pre>
		<strong>6.</strong>
		基本方法与其他数据字段属性
		<pre><code class="javascript">var tree = hy.tree(container,options);
tree.openNode(value); // 展开节点
tree.getSelected(); // 获取选中的值
tree.getAllSelected() // 获取所有被选中的值

// data attribute
{
    // ... 省略
    state: "closed", // 关闭状态
    checked: true // 选择状态， 选择状态可以通过过滤函数(filter)自定义决定哪些是选中
}
</code></pre>
		<strong>7.</strong>
		综合示例演示
		<p>回调函数、默认选中,展开节点</p>
		<pre><code class="javascript">var data = [{
	"id": 1,
	"text": "My Documents",
	"children": [{
		"id": 11,
		"text": "Photos",
		"state": "closed",
		"children": [{
			"id": 111,
			"text": "Friend",
			"checked":true
		},
		{
			"id": 112,
			"text": "Wife"
		},
		{
			"id": 113,
			"text": "Company"
		}]
	},
	// .... 省略
}];
</code></pre>
		<pre><code class="javascript">hy.tree(".ui.tree", {
	data: data,
	convert: false,
	multiple: true,
	onSelected: function(o) {
		hy.message(o.text, ["top:2", "right:2"]);
	},
	onChecked: function(values, texts) {
		hy.message("您选择了:" + texts.join(","), "warning");
	}
}).openNode(12);</code></pre>
		<ul id="exp3" class="ui tree"></ul>
		<p>&nbsp;</p>
		<div class="theme">&copy;2014 宏宇软件 by sylthasgg@gmail.com</div>
	</div>

	<script type="text/javascript" src="js/highlight.js"></script>
	<script type="text/javascript">hljs.initHighlightingOnLoad();</script>
	<script type="text/javascript">
		var data = [{
			"id":1,
			"text":"My Documents",
			"state": "closed",
			"children":[{
				"id":11,
				"text":"Photos",
				"state":"closed",
				"children":[{
					"id":111,
					"text":"Friend",
					"checked":true
				},{
					"id":112,
					"text":"Wife"
				},{
					"id":113,
					"text":"Company"
				}]
			},{
				"id":12,
				"text":"Program Files",
				"children":[{
					"id":121,
					"text":"Intel"
				},{
					"id":122,
					"text":"Java",
					"attributes":{
						"p1":"Custom Attribute1",
						"p2":"Custom Attribute2"
					}
				},{
					"id":123,
					"text":"Microsoft Office"
				},{
					"id":124,
					"text":"Games",
					"checked":true
				}]
			},{
				"id":13,
				"text":"index.html"
			},{
				"id":14,
				"text":"about.html"
			},{
				"id":15,
				"text":"welcome.html"
			}]
		}];
	</script>
</body>
</html>