最近工作中需要用到树形下拉框,因为项目中树形结构使用的是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"#actionTypeTree"), actionTypeSetting, data); } }); } /* * 展示点击事件SelectTree */ function showActionTypeTree() { $.ajax({ url: localStorage.getItem("adminPath") + '/touch/typeTable/getActionList"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"#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); } } } });
总结
以上所述是小编给大家介绍的Easyui和zTree两种方式分别实现树形下拉框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年11月16日
2024年11月16日
- 第五街的士高《印度激情版》3CD [WAV+CUE][2.4G]
- 三国志8重制版哪个武将智力高 三国志8重制版智力武将排行一览
- 三国志8重制版哪个武将好 三国志8重制版武将排行一览
- 三国志8重制版武将图像怎么保存 三国志8重制版武将图像设置方法
- 何方.1990-我不是那种人【林杰唱片】【WAV+CUE】
- 张惠妹.1999-妹力新世纪2CD【丰华】【WAV+CUE】
- 邓丽欣.2006-FANTASY【金牌大风】【WAV+CUE】
- 饭制《黑神话》蜘蛛四妹手办
- 《燕云十六声》回应跑路:年内公测版本完成95%
- 网友发现国内版《双城之战》第二季有删减:亲亲环节没了!
- 邓丽君2024-《漫步人生路》头版限量编号MQA-UHQCD[WAV+CUE]
- SergeProkofievplaysProkofiev[Dutton][FLAC+CUE]
- 永恒英文金曲精选4《TheBestOfEverlastingFavouritesVol.4》[WAV+CUE]
- 群星《国风超有戏 第9期》[320K/MP3][13.63MB]
- 群星《国风超有戏 第9期》[FLAC/分轨][72.56MB]