EasyUI jQuery combotree widget

EasyUI是一个HTML5框架，用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能，为开发者节省大量时间。

在这篇文章中，我们将学习如何使用jQuery EasyUI设计一个梳状树。combotree结合了选择控件和下拉树。

EasyUI for jQuery的下载：

https://www.jeasyui.com/download/index.php

语法:

<input class="easyui-combotree">

属性:

editable。定义用户是否可以直接在该字段中输入文本。
textField。绑定到该ComboTree的基础数据字段名称。

方法:

options。返回选项对象。
clear: 清除组件的值。
setValues:设置组件的值阵列。
setValue。设置组件的值。
tree。返回树的对象。
loadData:加载locale树的数据。
reload。再次请求远程树数据。

CSN链接：首先，添加你的项目需要的jQuery Easy UI脚本。

<script type=”text/javascript” src=”jquery.min.js”> </script>
<!–jQuery libraries of EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min.js”></script>
<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”></script>

示例 1:

<html>
<head>
    <link rel="stylesheet" type="text/css"  
          href=
"https://www.jeasyui.com/easyui/themes/default/easyui.css">
  
    <link rel="stylesheet" type="text/css"  
          href=
"https://www.jeasyui.com/easyui/themes/icon.css">
  
    <script type="text/javascript" src="jquery.min.js">  
    </script>  
  
    <!--jQuery libraries of EasyUI -->
    <script type="text/javascript"
        src="jquery.easyui.min.js">  
    </script>  
  
    <!--jQuery library of EasyUI Mobile -->
  
    <script type="text/javascript"
        src="jquery.easyui.mobile.js">  
    </script> 
      
    <script type="text/javascript">
         $(document).ready(function (){$ ('#gfg').combotree({
                editable: false,
                dnd: false
            });
        });
          
    </script>
</head>
<body>
<h2>GeeksforGeeks</h2>
      
<p>EasyUI jQuery combotree widget</p>
  
    <div class="easyui-panel" style="padding:5px">
    <div id="gfg">
        <div style="margin-bottom:20px">
            <input class="easyui-combotree" style="width:100%">
        </div>
    </div>
      </div>
    
</body>
</html>

输出:

EasyUI jQuery combotree widget