Hysoft-Hyui
/
combotree.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.combo{
		position: relative;
	}
	.ui.combo .wrap {
		position:absolute;
		width:100%;
		background:#fff;
		z-index:1;
		display:block;
		margin-top:2px;
		border:1px #ccc solid;
		cursor:pointer;
		min-height:100px;
		max-height:250px;
		overflow-y:auto;
		overflow-x:auto;
		margin: 0px;
		border-radius: 0.3125em;
		-webkit-transition: background-color 0.3s ease-out, -webkit-box-shadow 0.2s ease, border-color 0.2s ease;
		transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease;
		-webkit-box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset;
		box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset;
		-webkit-appearance: none;
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}
	.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(){
		var comt = hy.combotree("#exp1",{
			data: data,
			convert: false,
			multiple: true
		})
	});
	</script>
</head>
<body>
	<div class="main-wrapper">

		<h3>HY-UI Demos</h3>

		<div class="theme">组合树插件演示用例。</div> <strong>1.</strong>
		前置条件
		<p>组合树插件基于<em>hy.tree</em>插件，但其树的HTML容器不需要指定。</p>
		<p>需要指定div元素作为容器, 示例：</p>
		<pre><code class="javascript">&lt;div class="ui combo tree"&gt;&lt;/div&gt;</code></pre>
		<strong>2.</strong> 简单演示 <em>hy.combotree(container, options);</em>
		<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
		},
	// .... 省略
}];
</code></pre>
		<pre><code class="javascript">hy.combotree(".ui.combo.tree", {
	data: data,
	convert: false,
	multiple: true
});
</code></pre>
		<div id="exp1" class="ui combo tree"></div>
		<p>&nbsp;</p>
		<strong>3.</strong> 细节配置说明
		<p>该插件基于<em>hy.tree</em>，基本配置同<em>hy.tree</em>一致</p>
		<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(value, text) {}, // this指向combotree本身
	onChecked: function(values, texts) {} //  this指向combotree本身
};</code></pre>
		<p>&nbsp;</p>
		<strong>4.</strong> 使用注意
		<p><em>hy.combotree</em>插件生成的input文本本框内容根据用户选择改变，值为回调函数中的text文本。真正使用时需要添加隐藏域来存储需要的value值。</p>
		<p>可以自定义onSelected，onChecked回调函数来处理。默认情况下值变动在<em>&lt;div class="ui combo tree" data-value="xxx"&gt;&lt;/div&gt;</em>中的<em>data-value</em>属性上存储</p>
		<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>