• 技术文章 >web前端 >js教程

    ztree通过ajax获取json并勾选checkbook

    不言不言2018-07-09 15:45:49原创1745
    这篇文章主要介绍了关于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++;
            });

    以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

    相关推荐:

    jQuery源码之异步机制的解析

    以上就是ztree通过ajax获取json并勾选checkbook的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery-ajax jquery插件
    上一篇:ztree获取勾选节点数据并且与表单信息合并 下一篇:angularjs的数据绑定
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• 深入了解angular中的@Component装饰器• JavaScript面向对象详细解析之属性描述符• 详解node中如何安装多版本并进行切换• 什么是状态?深入学习angular中的动画• 浅析node中path路径模块的一些API
    1/1

    PHP中文网