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

  • 相关阅读:
    demo_38 关注页导航栏实现
    demo_37 评论列表实现_02 封装popup 及 格式化时间
    demo_37 评论列表实现_01
    SaaS
    rsyncd脚本
    rsyncd
    MySQL高可用--MHA安装
    正向代理
    zabbix 一键部署
    kvm安装
  • 原文地址:https://www.cnblogs.com/MuZiLily/p/12034674.html
Copyright © 2020-2023  润新知