layui+ztree 树状下拉框

https://www.cnblogs.com/xqz0618/p/layui_ztree.html

 

一、效果图

【关闭】

  

【展开】    

     layui+ztree 树状下拉框_第1张图片

二、代码

 【HTML】注:布局一定要用DIV不是select否则效果····

@**@

【js】

   ① 以下为固定方法

function initSelectTree(id, isMultiple, chkboxType, zNodes) {
            var setting = {

                data: {
                    simpleData: {
                        enable: true
                    }
                },
                check: {
                    enable: false,
                    chkStyle: "radio",
                    radioType: "all",

                },
                chkboxType: { "Y": "ps", "N": "ps" },
                callback: {
                    onClick: onClick,
                    onCheck: onCheck
                }

            };
            if (isMultiple) {
                setting.check.enable = isMultiple;
            }
            if (chkboxType !== undefined && chkboxType != null) {
                setting.check.chkboxType = chkboxType;
            }
            var html = '
' + '' + '' + '
'; $("#" + id).append(html); $("#" + id).append('
' + '' + '
    ' + '
    '); $("#" + id).bind("click", function () { if ($(this).parent().find(".tree-content").css("display") !== "none") { hideMenu() } else { $(this).addClass("layui-form-selected"); var Offset = $(this).offset(); var width = $(this).width() - 2 - 15; $(this).parent().find(".tree-content").css({ left: Offset.left + "px", top: Offset.top + $(this).height() + "px", height: 250 + "px", }).slideDown("fast"); $(this).parent().find(".tree-content").css({ width: width, }); $("body").bind("mousedown", onBodyDown); } }); $.fn.zTree.init($("#" + id + "Tree"), setting, zNodes); hideMenu(); } //function beforeClick(treeId, treeNode) { // var check = (treeNode && !treeNode.isParent); // if (!check) alert("只能选择城市..."); // return check; //} function onClick(event, treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj(treeId); if (zTree.setting.check.enable == true) { zTree.checkNode(treeNode, !treeNode.checked, false) assignment(treeId, zTree.getCheckedNodes()); } else { assignment(treeId, zTree.getSelectedNodes()); hideMenu(); } } function onCheck(event, treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj(treeId); assignment(treeId, zTree.getCheckedNodes()); } function hideMenu() { $(".select-tree").removeClass("layui-form-selected"); $(".tree-content").fadeOut("fast"); $("body").unbind("mousedown", onBodyDown); } function assignment(treeId, nodes) { var names = ""; var ids = ""; for (var i = 0, l = nodes.length; i < l; i++) { names += nodes[i].name + ","; ids += nodes[i].id + ","; } if (names.length > 0) { names = names.substring(0, names.length - 1); ids = ids.substring(0, ids.length - 1); } treeId = treeId.substring(0, treeId.length - 4); $("#" + treeId + "Show").attr("value", names); $("#" + treeId + "Show").attr("title", names); $("#" + treeId + "Hide").attr("value", ids); } function onBodyDown(event) { if ($(event.target).parents(".tree-content").html() == null) { hideMenu(); } }

    ②以下为变动方法

    Ajax("/BindCombox/GetDeptData", false, "POST", {}, function (data) {
                    var jsondata = JSON.parse(data);
                    if (jsondata.IsError) {
                        layer.msg("" + jsondata.ErrMsg, { icon: 5 });
                    } else {
                        zNodes = jsondata.Data;//获取数据源
    
    
                        initSelectTree("PDEPT_KEY", true, { "Y": "ps", "N": "s" }, zNodes);
                        var treeObj = $.fn.zTree.getZTreeObj("PDEPT_KEYTree");
                        var node = treeObj.getNodes();
                        treeObj.selectNode(node[0]);
                        treeObj.checkNode(node[0], true, true, true);
                    }
                });

    ③数据源格式

    [
        {"id":41.0,"name":"技术二部","pId":1.0,"open":true},
        {"id":42.0,"name":"技术三部","pId":null,"open":true}
     ]

    注:设置open为true,树状菜单为展开状态

    三、未实现效果问题解析

      ①没有引用js。ztree和layui

      ②布局采用select,没有使用div

      ③网络请求数据源不正确。

     

    注:此方法仍存在不足之处,望有能人指点

     

     

     

    你可能感兴趣的:(layui)