jQuery MiniUI

标题: mini-tree控件的onload 与 ondrawnode事件问题 [打印本页]

作者: nuangnian 时间: 2017-2-9 13:51:28 标题: mini-tree控件的onload 与 ondrawnode事件问题

树加载完后,根据某几个节点，通过bubbleParent找到他们所有父节点，然后改变其text的颜色
方式一：
var allNodes= [];
function onload(e){
allNodes= getAllNodes();
}
function onDrawNode(e) {
$.each(allNodes, function(i, item){
if(e.node.id == item.id){
e.nodeCls = "redColor";
}
})
}
有时会生效，大多数情况下先触发onDrawNode,则没有效果

方式二：
function onload(e){
var allNodes= getAllNodes();
$.each(allNodes, function(i, item){
if(e.node.id == item.id){
tree.addNodeCls(item,"redColor");
}
})
}
展开节点时，颜色没了。。。

作者: dforce 时间: 2017-2-9 14:38:09

本帖最后由 dforce 于 2017-2-9 14:39 编辑

getAllNodes里面怎么获取节点的
1 load肯定是先于draw的
2 addNodeCls收缩展开无法保持

作者: nuangnian 时间: 2017-2-9 14:50:49

dforce 发表于 2017-2-9 14:38
getAllNodes里面怎么获取节点的
1 load肯定是先于draw的
2 addNodeCls收缩展开无法保持

那就按方式一讨论
function getAllNodes(){
var result = [];
var nodes = objTree.findNodes(function(node){
if(isHasObjAmount(node.id, objAmount)) return true;
});
$.each(nodes, function(i, item){
objTree.bubbleParent(item, function(data){
result.push(data);
});
})
return result;
}
其中objAmount是个数组，存了几个要改变子节点颜色的id。
getAllNodes的意思是根据子节点，找到它们所有父节点（包含自己，并且递归到根节点）。

作者: dforce 时间: 2017-2-9 16:06:41

nuangnian 发表于 2017-2-9 14:50
那就按方式一讨论
function getAllNodes(){
var result = [];

var allNode=[]
mini.parse();
把allNode定义到mini.parse()前，运行mini.parse()的时候就已经自动加载了，onload事件就触发，之后再定义allNode相当于覆盖掉了。

作者: nuangnian 时间: 2017-2-9 17:07:20

dforce 发表于 2017-2-9 16:06
var allNode=[]
mini.parse();
把allNode定义到mini.parse()前，运行mini.parse()的时候就已经自动加载了 ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>treedemo</title>
<script src="http://www.miniui.com/scripts/boot.js" type="text/javascript"></script>
</head>
<style type="text/css">
body{
   margin:0;padding:0;border:0;width:100%;height:100%;overflow:hidden;
}
.red
{
   color:red;
}
</style>
<body>
<ul id="tree" class="mini-tree" style="width:300px;padding:5px;"
      showTreeIcon="true" textField="text" idField="id" expandOnLoad="true">
</ul>


<script type="text/javascript">
var list = [
{ id: "base", text: "Base"},
{ id: "ajax", text: "Ajax", pid: "base"},
{ id: "json", text: "JSON", pid: "base"},
{ id: "date", text: "Date", pid: "base"},
{ id: "control", text: "Control", pid: "base"},
{ id: "forms", text: "Forms", pid: "base"},
{ id: "button", text: "Button", pid: "forms"},
{ id: "listbox", text: "ListBox", pid: "forms"},
{ id: "checkboxlist", text: "CheckBoxList", pid: "forms"},
   { id: "lists", text: "Lists"},
{ id: "datagrid", text: "DataGrid", pid: "lists" },
{ id: "tree", text: "Tree", pid: "lists" },
{ id: "treegrid", text: "TreeGrid ", pid: "lists" }
];
var allNodes = [];
var allButtons = [];
mini.parse();
var tree = mini.get("tree");
tree.loadList(list, "id", "pid");

var buttonNode = tree.getNode('button');
var listboxNode = tree.getNode('tree');

allButtons.push(buttonNode);
allButtons.push(listboxNode);
//tree.on('load', function(e){
$.each(allButtons, function(i, item){
tree.bubbleParent(item, function(data){
allNodes.push(data);
})
})
//})
tree.on('drawnode',function(e){
$.each(allNodes, function(i, item){
if(item.id == e.node.id){
e.nodeStyle = 'color:red;';
}
})
});
</script>
</body>
</html>

作者: nuangnian 时间: 2017-2-9 17:08:12

nuangnian 发表于 2017-2-9 17:07
treedemo

先触发drawnode 再触发load事件

作者: dforce 时间: 2017-2-9 17:10:55

nuangnian 发表于 2017-2-9 17:08
先触发drawnode 再触发load事件

tree自动加载的，只能在html里面绑定onload
另外onload是url加载才会触发，静态数据不会触发。

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)