ztree异步加载实现全选功能

本例实现当点击全选按钮时,将已经展开的所有节点选中,且在点击某一节点时,将其子节点也全部选中。
HTML代码:
<div class="content_wrap">
 <div class="zTreeDemoBackground left">
  <ul id="treeDemo" class="ztree"></ul>
 </div>
 <input id="select_all" value="no" type="hidden">
 <a id="checkAllNodes" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">全选</a>
</div>
JQUEYR代码:
<script type="text/javascript" charset="utf-8">
 var setting = { 
  
  async: {   
   enable: true,
   type: 'post',
   url: 'ztree/ztreeAction!getZtree.action',   
   autoParam: ['id'], //异步加载时需要自动提交父节点属性的参数
   dataType:'json',
   dataFilter:ajaxDataFilter //对Ajax返回数据进行预处理
  },
  check: {
   enable: true,
   chkStyle: "checkbox",
   chkboxType: { "Y": "s", "N": "ps" } //勾选checkbox对于父子节点的关联关系
  },
  callback: {                  
   onClick: onClick //用于捕获节点被点击的事件回调函数
  }
 };
 
 var zNodes =[];
 function onClick(event, treeId, treeNode, clickFlag){

 }
 //当每次加载成功后,执行该函数
 function ajaxDataFilter(treeId, parentNode, responseData) {
  //当每次加载成功后且点击全选按钮时,将新加载后的全部节点选中,responseData表示每次新加载的所有节点
  if (responseData&&$('#select_all').val()=='yes') {
   for(var i =0; i < responseData.length; i++) {
    responseData[i].checked = true;
        }
  }
  return responseData;
 };

 function checkAllNodes() {
  $('#select_all').val('yes');
  var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
  //将现有节点全部选中(不包括还没有展开的节点)
  treeObj.checkAllNodes(true);
 };

 $(document).ready(function(){
  //初始化ztree
  $.fn.zTree.init($("#treeDemo"), setting, zNodes);
  $("#checkAllNodes").click(checkAllNodes);
 });
  
</script>

展开阅读全文

没有更多推荐了,返回首页