easyui树形菜单数据量过大解决方案,采用点击父节点进行ajax请求(struts2)加载子节点,层层加载,分级加载

1.struts2配置文件返回json数据

<package name="tree" extends="struts-default,json-default">
<action name="xxx" class="xxxxxxx"    method="xxxxx">

<result type="json">

<param name="root">str</param>//str为action中要返回的json串
</result>
</action>

</package>

2.创建树控件

<ul id="tt"></ul>

3.生成树的JavaScript

//alert(node.attributes.have == '0');

//上面这一句的说明:由于在点击父节点的时候,会触发点击事件,进行ajax请求,将后台返回的json数据返回

   并采用easyui中的append方法进行拼接,如果重复点击,会重复进行请求,导致重复拼接,数据重复

   所以我在每个节点的attributes属性中定义了一个have变量,初始值为0,点击一次后,改变have的值

   可以避免重复拼接问题.


<script type="text/javascript">
  $(function(){
  $("#tt").tree({
  data:${string},//初始树形菜单,根节点
  onClick : function(node) {  
  alert(node.attributes.have == '0');
 
                if(node.attributes.have == '0'){
                $.ajax({
url:'getTree_treeClick.action',
data:{orgid:node.id},
type:'get',
dataType:'json',
async:false,
success:function(data){
var a = $('#tt').tree('getSelected');
var da = eval("("+data+")");
alert(da);
$("#tt").tree('append',{
parent:a.target,
data:da
});
},
error:function(msg){
alert("error");
}
               });
                //将其中的have属性值改为1,避免多次点击重复拼接子节点
                node.attributes.have = '1';       
                }
            }
  });
  });
  </script>

猜你喜欢

转载自blog.csdn.net/zzwforbid_404/article/details/80265049
今日推荐