zTree和easyui分别实现树型下拉框

最近工作中需要用到树型下拉框，因为项目中树形结构使用的是zTree，然后就百度，结果出来效果不好看，后来就试着用了easyui的comboTree，虽然比较好看，但是跟整体的bootstrap风格有点儿不搭。现在贴出来两种方式及效果，以后备用。
方式一，使用zTree
前端代码：

js代码：

/*
     * 点击事件下拉树的设置
     */
    var actionTypeSetting = {
        view: {
            dblClickExpand: true,
            showIcon: false,
        },
        data: {
            key: {
                name: "text",
                children: "children"
            },
            simpleData: {
                enable: true
            }
        },
        callback: {
            onClick: actionTypeOnClick
        }
    };
    /*
     * 点击事件下拉树的点击事件
     */
    function actionTypeOnClick(e, treeId, treeNode) {
        $("#actionTypeId").val(treeNode.id);
        $("#selectActionType").val(treeNode.text);
    }
    /*
     * 初始化点击事件类型
     *
     */
    function initActionType() {
        $.ajax({
            async: false,
            cache: false,
            type: 'POST',
            dataType: "json",
            url: localStorage.getItem("adminPath") + '/touch/typeTable/getActionList?businessTypeId=2',
            error: function () {//请求失败处理函数
                alert('请求失败');
            },
            success: function (data) { //请求成功后处理函数
                $.fn.zTree.init($("#actionTypeTree"), actionTypeSetting, data);
            }
        });
    }

    /*
     * 展示点击事件SelectTree
     */
    function showActionTypeTree() {
        $.ajax({
            url: localStorage.getItem("adminPath") + '/touch/typeTable/getActionList?businessTypeId=2',
            type: 'POST',
            dataType: "json",
            async: false,
            success: function (data) {
                $.fn.zTree.init($("#actionTypeTree"), actionTypeSetting, data);
                var deptObj = $("#selectActionType");
                var deptOffset = $("#selectActionType").offset();
                $("#actionTreeContent").css({
                    left: deptOffset.left - 26 + "px",
                    top: deptOffset.top + "px"
                }).slideDown("fast");
                $('#actionTypeTree').css({width: deptObj.outerWidth() + "px"});
                var zTree = $.fn.zTree.getZTreeObj("actionTypeTree");
                var node = zTree.getNodeByParam("id", $('#actionTypeId').val(), null);
                zTree.selectNode(node);
                $("body").bind("mousedown", onBodyDownByActionType);
            }
        });
    }

    /*
     * Body鼠标按下事件回调函数
     */
    function onBodyDownByActionType(event) {
        if (event.target.id.indexOf('switch') == -1) {
            hideActionTypeMenu();
        }
    }
    /*
     * 隐藏点击事件Tree
     */
    function hideActionTypeMenu() {
        $("#actionTreeContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDownByActionType);
    }

效果：

image.png

方式二，使用easyui
easyui效果跟官方文档一致：

image.png

前端代码：

js代码：

$("#actionTypeId2").combotree({
        url: localStorage.getItem("adminPath") + '/touch/typeTable/getActionList?businessTypeId=2',
        textField:'name',

        onClick: function (node) {
            $("#actionTypeId").val(node.id);
        },
        onSelect: function (node) {
            /**
             * 当选中该节点时展开该节点，同时关闭其他节点
             */
            if (node.state == "closed") {
                $(this).tree('expand', node.target);
            }
            else {
                var isLeaf = $(this).tree('isLeaf', node.target);
                if (!isLeaf) {
                    $(this).tree("collapse", node.target);
                }
            }
        }
    });

没有退出啊

我是littlebear