Ztree下拉框多選


上圖~

 po代碼~

  //文檔加載
    $(document).ready(function () {
        //加載ztree樹
        $.fn.zTree.init($("#treeDemo"), setting, getjson());
        setCheck();
    });
//初始化配置
    var setting = {
        check: {
            enable: true
        },
        view: {
            dblClickExpand: false
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeClick: beforeClick,
            onCheck: onCheck
        }

    };
    //獲取人員數據
    function getjson() {
        var str = [];
        $.ajax({
            type: "Get",
            url: "/Schedule/GetUser",
            cache: false,
            async: false,
            success: function (result) {
                str = result.data;
            }
        });
        return eval(str);
        //后台返回數據,我是按照ztree的字段來定義的,因為我懶~
        //id :標識
        //pId :父級標識
        //name :名稱
        //chkDisabled :是否能夠勾選
        //open :是否展開
    }
    //設置父子關聯關系
    function setCheck() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"), py = "p", sy = "s", pn = "p", sn = "s", type = { "Y": py + sy, "N": pn + sn };
        zTree.setting.check.chkboxType = type;
    }
    //點擊前
    function beforeClick(treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.checkNode(treeNode, !treeNode.checked, null, true);
        return false;
    }
    //勾選時觸發
    function onCheck(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            nodes = zTree.getCheckedNodes(true),
            namearray = new Array(),
            idarray = new Array();
        //獲取子節點數據
        for (var i = 0, l = nodes.length; i < l; i++) {
            //獲取全部節點
            if (!nodes[i].isParent) {//獲取子節點
                namearray.push(nodes[i].name);
                idarray.push(nodes[i].id);
            }
            //else {
            //    //獲取父節點
            //}
        }
        $("#userSel").val(namearray.join(','));
        $("#userValue").val(idarray.join(','));
    }
    //顯示下拉框ul
    function showMenu() {
        var cityObj = $("#userSel");
        var cityOffset = $("#userSel").offset();
        $("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");
        $("body").bind("mousedown", onBodyDown);
    }
    //隱藏下拉框ul
    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    //下拉框ul發生變化
    function onBodyDown(event) {
        if (!(event.target.id == "menuBtn" || event.target.id == "userSel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
            hideMenu();
        }
    }
    //編輯時,勾選已經選中的節點
    function refreshNode(id) {
        var checkeduser = getjson(id).toString().split(',');
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            parnodes = new Array(),
            allnodes = zTree.transformToArray(zTree.getNodes()),
            namearray = new Array(),
            idarray = new Array(),
            flag = true;
        //獲取子節點數據
        for (var i = 0, l = allnodes.length; i < l; i++) {
            if (!allnodes[i].isParent) {
                if (checkeduser.indexOf(allnodes[i].id) > -1) {
                    namearray.push(allnodes[i].name);
                    idarray.push(allnodes[i].id);
                    allnodes[i].checked = true;
                    zTree.updateNode(allnodes[i]);
                    //獲取當前子節點的父節點,進行勾選
                    parnodes = allnodes[i].getParentNode();
                    if (parnodes != null) {
                        parnodes.checked = true;
                        zTree.updateNode(allnodes[i]);
                        while (flag) {
                            parnodes = parnodes.getParentNode();
                            if (parnodes != null) {
                                parnodes.checked = true;
                                zTree.updateNode(allnodes[i]);//更新節點

                            } else {
                                flag = false;
                            }
                        }
                    }
                }
            }

        }
        $("#userSel").val(namearray);
        $("#userValue").val(idarray);
    }     

簡單粗暴的po完了代碼,就這樣吧~~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM