在不展开父节点的情况下，勾选父节点后，可以勾…

以下代码可以实现在不展开父节点的情况下，勾选父节点后，可以勾选上其下的所有节点，但是如果子节点以及孙节点较多的话，会出现错误，需要将延时的时间设置长一点，即 setTimeout(function(){},1000)，后面的数字表示延时的毫秒数，并且该种方法的用户体验不是很好。

<link rel="stylesheet" href="demo.css" type="text/css">  

<link rel="stylesheet" href="zTreeStyle.css" type="text/css">  

<script type="text/javascript" src="jquery.ztree.all-3.5.js"></script>

<script language="JavaScript">  

    var setting = {

    check: {  

enable  : true,      //设置zTree的节点上显示勾选框(checkbox或radio)  

chkStyle: 'checkbox' //指定勾选框类型为checkbox(setting.check.enable=true时生效) 

},

        async : {  

            enable : true, //设置 zTree是否开启异步加载模式  

            url : "url", //Ajax 获取数据的URL 地址  

            autoParam : ["id"]    //异步加载时自动提交父节点属性的参数,假设父节点 node = {id:1, name:"test"}，异步加载时，提交参数 zId=1  

        },  

        data:{ // 必须使用data  

            simpleData : {

                enable : true,

                idKey : "id", //id编号命名 默认

                pIdKey : "pid",//父id编号命名默认

                rootPId : 0 //用于修正根节点父节点数据，即 pIdKey 指定的属性值  

            }  

        },  

        // 回调函数  

        callback : {  

            onClick : function(event, treeId, treeNode, clickFlag) {

            },

            onCheck : onCheck,

            //捕获异步加载出现异常错误的事件回调函数 和 成功的回调函数  

            onAsyncError : zTreeOnAsyncError,  

            onAsyncSuccess : function(event, treeId, treeNode, msg){  

            }

        }

        

    };

   function onCheck(event, treeId, treeNode){

  var zTree = $.fn.zTree.getZTreeObj("mytree");

    if(treeNode.isParent){

      if (!treeNode.open){

      zTree.expandNode(treeNode, true, true, false);

      onExpand(event, treeId, treeNode);

      setTimeout(function(){

      var children=treeNode.children;

      for(var i=0;i<children.length;i++){

      if(children[i].isParent ){

      zTree.expandNode(children[i], false, false, false);

      }

      }

      zTree.expandNode(treeNode, false, false, false);

    },1000);//延时1秒

        }else{

        var children=treeNode.children;

        for(var i=0;i<children.length;i++){

      if(children[i].isParent ){

      if (!children[i].open){

      zTree.expandNode(children[i], true, true, false);

      onExpand(event, treeId, children[i]);

      }

      }

      }

        setTimeout(function(){

      var children=treeNode.children;

      for(var i=0;i<children.length;i++){

      if(children[i].isParent ){

      zTree.expandNode(children[i], false, false, false);

      }

      }

    },1500);//延时1.5秒

        }

        } 

  };

    function onExpand(event, treeId, treeNode) {

         var zTree = $.fn.zTree.getZTreeObj("mytree");

      var checked=treeNode.checked;

      setTimeout(function(){

        var children=treeNode.children;

        for(var i=0;i<children.length;i++){

        zTree.checkNode(children[i],checked,checked);

        if(children[i].isParent){

        if (!children[i].open){

        zTree.expandNode(children[i], true, true, false);

        onExpand(event, treeId, children[i]);

        //alert(children[i].open);

      zTree.expandNode(children[i], false, false, false);

        }

        }

        }

      },500);//延时0.5秒

     };

 

     // 加载错误提示  

    function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {  

        alert("加载错误：" + XMLHttpRequest);  

    };

 

    // 过滤函数  

    function filter(treeId, parentNode, childNodes) {  

        if (!childNodes)  

            return null;  

        for ( var i = 0, l = childNodes.length; i < l; i++) {  

            childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');  

        }  

        return childNodes;  

    }  

    

    // 渲染  

    $(document).ready(function() { 

var str = <%=jsonString%>;

    var show = "<input type='text' style='width: 100px;display:none;' name='code' value='"+str.code+"'/>";

show += "<input type='text' style='width: 100px;display:none;' name='name' value='"+str.name+"'/>";

$("#condition").html(show);

 

        $.fn.zTree.init($("#mytree"), setting);

       

        resetDialogHeight();

    });

    

    //弹出窗口高度调整自适应  

function resetDialogHeight(){

var height = document.body.scrollHeight;

var heightTop = document.body.scrollTop;

if ( window.XMLHttpRequest ) {

    window.dialogHeight = (height+heightTop+295) + "px";

  } else {

    window.dialogHeight=(height+heightTop+55) + "px";//IE6不能自动调整高度，要加45

  }

} 

 

    function OkOnClick(){

    var treeObj = $.fn.zTree.getZTreeObj("mytree");

    var nodes = treeObj.getCheckedNodes(true);

    var values = "";

    var total = nodes.length;

for (var i = 0; i < total; i++) {  

        values += ',"' + nodes[i].id + '":"' + nodes[i].id + '"';//获取选中节点的id值  

        }

        if( total > 0 ) {

values = values.substring(1);

}

var result = "";

   result += '{"code":"' + $("input[name='code']").val() + '",';

result += '"name":"' + $("input[name='name']").val() + '",';

result += '"conditions":{' + values + '}}';

self.returnValue = result;

self.close();

}

</script>

关于在不展开父节点的情况下，勾选父节点后，可以勾选上其下的所有节点，如果还有更好的方法，麻烦各位大神贴出来，感激不尽。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有