Easyui和zTree兩種方式分別實現(xiàn)樹形下拉框

<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> 

/* 
 * 點擊事件下拉樹的設(shè)置 
 */ 
 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 () {//請求失敗處理函數(shù) 
 alert('請求失敗'); 
 }, 
 success: function (data) { //請求成功后處理函數(shù) 
 $.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鼠標(biāo)按下事件回調(diào)函數(shù) 
 */ 
 function onBodyDownByActionType(event) { 
 if (event.target.id.indexOf('switch') == -1) { 
 hideActionTypeMenu(); 
 } 
 } 
 /* 
 * 隱藏點擊事件Tree 
 */ 
 function hideActionTypeMenu() { 
 $("#actionTreeContent").fadeOut("fast"); 
 $("body").unbind("mousedown", onBodyDownByActionType); 
 } 

<div class="form-group"> 
 <label>點擊事件：</label> 
 <input id="actionTypeId2" name="actionTypeId2" class="form-control" /> 
</div> 

$("#actionTypeId2").combotree({
 url: localStorage.getItem("adminPath") + '/touch/typeTable/getActionList?businessTypeId=2',
 textField:'name',
 onClick: function (node) {
 $("#actionTypeId").val(node.id);
 },
 onSelect: function (node) {
 /**
 * 當(dāng)選中該節(jié)點時展開該節(jié)點，同時關(guān)閉其他節(jié)點
 */
 if (node.state == "closed") {
 $(this).tree('expand', node.target);
 }
 else {
 var isLeaf = $(this).tree('isLeaf', node.target);
 if (!isLeaf) {
 $(this).tree("collapse", node.target);
 }
 }
 }
});