首頁 > web前端 > js教程 > ztree透過ajax取得json並勾選checkbook

ztree透過ajax取得json並勾選checkbook

不言
發布: 2018-07-09 15:45:49
原創
2840 人瀏覽過

這篇文章主要介紹了關於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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板