JQueryEasyUI学习笔记(十五)异步tree(附源码)
欢迎大家转载,转载请注明出处!
希望这个笔记对自己和大家有用,但是本人水平有限,如果出错的地方,希望大家指出,多多批评,谢谢!
今天是easyui的Tree框架的点击展开时的异步加载和全部直接加载:
<script type="text/javascript"> $(function () { $("#tt2").tree({//异步点击展开Tree url: 'GetTreeMenu.ashx' }); $("#tt").tree({//Tree直接展开 url: 'GetTreeMenu.ashx', onLoadSuccess: function(node,data) {//加载成功后调用事件 var tree = $(this); if (data) { $(data).each(function(index,d) { if (this.state=='closed') { tree.tree('expandAll'); } }); } } }); }); </script> <body> <ul id="tt2"></ul> <ul id="tt"></ul> </body>
每次点击展开tree的节点的时候,向后台传递的是tree的id,这样我们就可以根据id查处他的子节点,首次加载的时候id为null,这样我们做个判断,直接加载根节点就好
其中在异步加载时,只要数据库设计清晰,json数据正确,实现起来十分简单
数据库设计图例:
这样就可以实现异步tree和直接展开tree的方法了,我在写demo的时候,设计的不是很好,所以无论是子节点还是父节点,都有展开的箭头,做个处理就好了
非常时期,大家多多注意身体