Easyui和zTree如何实现树形下拉框

这篇文章给大家分享的是有关Easyui和zTree如何实现树形下拉框的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

方式一，使用zTree

前端代码：

<div class="form-group">    <label>点击事件：</label>    <input id="selectActionType" class="form-control" onfocus="showActionTypeTree()" onclick="showActionTypeTree()" readonly="readonly" />    <input type="hidden" name="actionTypeId" id="actionTypeId"/>    <div id="actionTreeContent" class="menuContent" >      <ul id="actionTypeTree" class="ztree" ></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如何实现树形下拉框”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！