easy ui tree 默认选中指定行

 

 提供一个JqueryUI api网站供学习。地址：http://www.jeasyui.com/

 

1、html中设置<ul id="unitlist" animate="true"></ul>显示tree。

2、在加载js时候先注册tree。

 

Js代码  

1. $(function(){  
2.     var addr_tree = $("#unitlist").tree({  
3.         url:'',  
4.         method:"post",  
5.         onSelect:function(node){}  
6.     });  
7. })  

 3、通过查看jqueryUI api，没有发现一个有效的能使tree选中第一个节点的方法。

 4、然后查看jqueryUI生成的html源文件，发现只要选中一个节点，就会在class中添加tree-node-selected属性。于是通过源文件根据id="unitlist"往下查找第一个节点的div，手动给他添加class="tree-node-selected";

 5、此时，就可以通过getSelected方法获取Node对象，同时就可以获取选中行的相关信息了。但是发现$("#unitlist").tree()是异步执行的，放在声明变量后面不起作用。于是代码改成：

 

Js代码  

1. $(function(){  
2.     var addr_tree = $("#unitlist").tree({  
3.         url:'',  
4.         method:"post",  
5.         onSelect:function(node){},  
6.         onLoadSuccess:function(node,data){  
7.            $("#unitlist li:eq(0)").find("div").addClass("tree-node-selected");   //设置第一个节点高亮  
8.            var n = $("#unitlist").tree("getSelected");  
9.            if(n!=null){  
10.                 $("#unitlist").tree("select",n.target);    //相当于默认点击了一下第一个节点，执行onSelect方法  
11.            }  
12.         }  
13.     });  
14. })  

 PS：服务端需要提供的json数据格式可参考http://www.jeasyui.com/documentation/tree.php。

 

------------------------------------------------------------------------------------------------------------------------------------------------------------

 

再说一下DateBox插件，怎么获取它的值呢？

 

  发现API中没有提供这个方法，试了一下$("#a").datebox("getValue")方法即可得到。

根据上边方法再加上由节点id得到父节点并添加class来实现默认选中指定行

由于本次要选中的是指定节点 而且用的是超链 在节点vale上加了<a>标签

<li><span><a id=" unitType"href="unitType">单位分类</a></span></li>

然后根据<a>标签id 得到父节点并添加class

var lbs=$("#unitType").closest('div');
lbs.addClass("tree-node-selected");