最近工作中需要用到樹形下拉框，因為項目中樹形結構使用的是zTree，然后就百度，結果出來效果不好看，后來就試著用了easyui的comboTree，雖然比較好看，但是跟整體的bootstrap風格有點兒不搭?，F在貼出來兩種方式及效果，以后備用。
方式一，使用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兩種方式分別實現樹形下拉框，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
