频道导航

Easyui和zTree两种方式分别实现树形下拉框

2019-01-07 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了Easyui和zTree两种方式分别实现树形下拉框，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

方式一，使用zTree

前端代码：

点击事件：

js代码：

函数 alert('请求失败'); },success: function (data) { //请求成功后处理函数 $.fn.zTree.init($("#actionTypeTree"),actionTypeSetting,data); } }); } /* * 展示点击事件SelectTree */ function showActionTypeTree() { $.ajax({ url: localStorage.getItem("adminPath") + '/touch/typeTable/getActionList?businessTypeId=2',async: false,success: function (data) { $.fn.zTree.init($("#actionTypeTree"),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

前端代码：

点击事件：

js代码：

关闭其他节点 */ if (node.state == "closed") { $(this).tree('expand',node.target); } else { var isLeaf = $(this).tree('isLeaf',node.target); if (!isLeaf) { $(this).tree("collapse",node.target); } } } });