Easyui和zTree两种方式分别实现树形下拉框
程序员文章站
2022-05-14 19:26:13
最近工作中需要用到树形下拉框,因为项目中树形结构使用的是ztree,然后就百度,结果出来效果不好看,后来就试着用了easyui的combotree,虽然比较好看,但是跟整体...
最近工作中需要用到树形下拉框,因为项目中树形结构使用的是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); } } } });
总结
以上所述是小编给大家介绍的easyui和ztree两种方式分别实现树形下拉框,希望对大家有所帮助