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>';
}