miniUi tree 的使用

1、声明一个div

<div size="240" showCollapseButton="true">
		<div class="mini-toolbar" style="padding:2px;border-top:0;border-left:0;border-right:0;">
			<input id="key" name="key" class="mini-textbox" style="width:160px;" onenter="onKeyEnter"/>
			<a class="mini-button" style="width:60px;height:30px;background-color: #286090;color: #f2f3f3;align-content: center" onclick="search()"><spring:message code="SignatureManagement.treeSearch" /></a>
		</div>

		<div id="treeDiv" style="display: none;" class="mini-fit" >
			<ul id="tree1" class="mini-tree" url="" style="width:auto;padding:5px;height:100%"
				showTreeIcon="false" onDrawNode="onDrawNode" textField="folderName" idField="id" parentField="parentId" resultAsTree="false"  contextMenu="#treeMenu" expandOnLoad="false">
			</ul>
		</div>
	</div>

2、可以给该数设置节点点击事件

var tree = mini.get("tree1");
	tree.on("nodeselect", function (e) {
		//执行的内容
	});

3、树节点查询方法，单机不走数据库

//点击查询树形结点
	function search() {
		var key = mini.get("key").getValue();
		if (key == "") {
			tree.clearFilter();
		} else {
			key = key.toLowerCase();
			tree.filter(function (node) {
				var text = node.folderName ? node.folderName.toLowerCase() : "";
				if (text.indexOf(key) != -1) {
					return true;
				}
			});
		}
	}
	//回车键查询树形结点
	function onKeyEnter(e) {
		search();
	}

4、设置节点滑动样式以及选中样式

<style>
/*树节点滑动样式*/
		.mini-tree-node-hover .mini-tree-nodeshow
		{
			background-color: #286090;
			color: white;
		}
		/*树节点选中样式*/
		.mini-tree-selectedNode .mini-tree-nodeshow{
			background-color: #286090;
			color: white;
		}
</style>

5、给节点设置标签

//参考：http://www.miniui.com/demo/#src=tree/drawnode.html
function onDrawNode(e) {
		//所有子节点加上超链接
		e.nodeHtml = '<span title="'+e.value+'">' + e.value + '</span>';
	}