ztree通过ajax获取json并勾选checkbook-js教程

这篇文章主要介绍了关于ztree通过ajax获取json并勾选checkbook，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

应上级要求，项目的树列表要用ztree，那就服从命令吧。

配置

 var zTree;    var setting = {        view: {            dblClickExpand: false,  //双击节点时，是否自动展开父节点的标识            showLine: true,         //设置ztree是否显示节点之间的连线            selectedMulti: false,   //设置是否允许同时选中多个节点        },        check: {            enable: true            //设置ztree的节点是否显示checkbox/radio        },        data: {            simpleData: {                enable:true,        //是否使用简单数据模式                idKey: "id",        //节点数据中保存唯一标识的属性名称                pIdKey: "p_id",     //节点数据中保存其父节点唯一标识的属性名称                rootPId: ""         //用于修正根节点父节点的数据，即pIdKey指定的属性值            }        },        callback: {            onClick:function (e,treeId,treeNode,clickFlag) {     //用于捕捉勾选时触发                zTree.checkNode(treeNode,!treeNode.checked,true);//勾选或取消勾选单个节点            }        }    };

ajax

 var zNodes ;    var select;    var selectarry=[];   //要勾选的id    var allnodes;    var t = $("#tree");    $.ajax({        type: "POST",        url: "...",//请求的后台地址        data: "name=John&location=Bpston",//前台传给后台的参数        dataType:"json",        ansync:false,        ContentType: "application/json; charset=utf-8",        success: function(msg){         //msg:返回值            // alert( msg.data );            zNodes=msg.data.list;            zNodes=eval(zNodes);            //zNodes=JSON.stringify(zNodes);            //console.log(zNodes);            //alert(zNodes)            t = $.fn.zTree.init(t, setting, zNodes);            var zTree2 = $.fn.zTree.getZTreeObj("tree");            selectarry=msg.data.nodes.split(",");            allnodes=zTree2.getNodes();            for(select=1;select<selectarry.length;select++)            {                allnodes[select]=msg.data.list[select];            }            console.log(allnodes);            //console.log(selectarry);            for(select=0;select<selectarry.length;select++)            {                zTree2.checkNode(zTree2.getNodesByParam("id",selectarry[select])[0],true);            }        }    });

ps：

附展开、折叠、勾选、取消全部节点的方法

//展开和折叠    $("#ztreeExpandAll").click(function () {        $.fn.zTree.getZTreeObj("tree").expandAll(true);    });    $("#ztreeUnExpandAll").click(function () {        $.fn.zTree.getZTreeObj("tree").expandAll(false);    });    //勾选全部或取消全部        var clicknumber=1;        $("#checkall_deafult").click(function () {            if(clicknumber%2>0) {                // var treeObj = $.fn.zTree.getZTreeObj("tree");                zTree.checkAllNodes(true);            }            else {                // var treeObj = $.fn.zTree.getZTreeObj("tree");                zTree.checkAllNodes(false);            }            clicknumber++;        });

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注小兔网！

相关推荐：

jQuery源码之异步机制的解析

ztree获取勾选节点数据并且与表单信息合并

以上就是ztree通过ajax获取json并勾选checkbook的知识。速戳>>知识兔学习精品课！