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

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

方式一，使用zTree

前端代码：

<div class="form-group">    <label>点击事件：</label>    <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,            fontCss : {"font-weight":"400","font-size":"20px"}        },        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);    }

方式二：使用easyui

前端代码：

<div class="form-group">    <label>点击事件：</label>    <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);            }        }    }});