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

作者: 哎呀_哎呀呀 | 来源:发表于2017-08-04 15:46 被阅读0次

zTree和easyui分别实现树型下拉框
easyui combobox复选框多选完整功能实现
ZTree 树
浅谈ztree节点的增加和获取
zTree.js
JQuery-zTree.js使用范例
easyui常用方法
zTree.js的使用
layer+zTree实现弹出框+树形图
手把手教你使用Ztree插件

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

<div class="form-group">
    <input id="selectActionType" class="form-control" onfocus="showActionTypeTree()" onclick="showActionTypeTree()" readonly="readonly" style="border-radius:5px;background-color: white;cursor: default;"/>
    <input type="hidden" name="actionTypeId" id="actionTypeId"/>
    <div id="actionTreeContent" class="menuContent" style="border-radius:5px;display: none; z-index:9999;position: absolute; border: 1px #CCC solid; background-color:#f9f9f9;">
        <ul id="actionTypeTree" class="ztree" style="margin-top:0;height: 200px;overflow: auto"></ul>
    </div>
</div>

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

前端代码：

<div class="form-group">
    <input id="actionTypeId2" name="actionTypeId2" class="form-control" />
</div>

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);
                }
            }
        }
    });

没有退出啊