Ztree下拉框多选

笑着哭i 提交于 2019-12-14 04:19:49

上图~

 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完了代码,就这样吧~~

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!