首页 > 程序开发 > web前端 > JavaScript >

jQuery MiniUI 开发教程 树形控件 树操作:自定义节点(九)

2012-12-10

自定义节点参考示例:自定义节点创建代码<ul id="tree1" class="mini-tree" url="../data/tree.txt" style="width:200px;padding:5px;" showTreeIcon="true" textField="text" idField="id" ondrawnode=...

自定义节点

参考示例:自定义节点



创建代码

<ul id="tree1" class="mini-tree" url="../data/tree.txt" style="width:200px;padding:5px;"
showTreeIcon="true" textField="text" idField="id"
ondrawnode="onDrawNode" showCheckBox="true">
</ul>
此时,我们监听了“drawnode”事件。



drawnode 事件

function onDrawNode(e) {
var tree = e.sender;
var node = e.node;

var hasChildren = tree.hasChildren(node);

//所有子节点加上超链接
if (hasChildren == false) {
e.nodeHtml = &#39;<a href="http://www.miniui.com/api/&#39; + node.id + &#39;.html" target="_blank">&#39; + node.text + &#39;</a>&#39;;
}

//父节点高亮显示;子节点斜线、蓝色、下划线显示
if (hasChildren == true) {
e.nodeStyle = &#39;font-weight:bold;&#39;;
} else {
e.nodeStyle = "font-style:italic;"; //nodeStyle
e.nodeCls = "blueColor"; //nodeCls
}

//修改默认的父子节点图标
if (hasChildren == true) {
e.iconCls = "folder";
} else {
e.iconCls = "file";
}

//父节点的CheckBox全部隐藏
if (hasChildren == true) {
e.showCheckBox = false;
}
}

相关文章
最新文章
热点推荐