表单中增加树形下拉框字段

使用教程 » 表单中增加树形下拉框字段

ComboTree是一个带有下拉树的组合框。它可以用作可以发布到远程服务器的表单字段.

在本教程中，我们将创建一个具有名称、地址和城市字段的注册表单。 city字段是一个combotree字段，用户可以在下拉树面板中选择指定的城市.

Create Form

<div id="dlg" class="easyui-dialog" style="width:500px;height:250px;padding:10px 30px;" title="Register" buttons="#dlg-buttons"> <h2>账户信息</h2> <form id="ff" method="post"> <table> <tr> <td>Name:</td> <td><input type="text" name="name" style="width:350px;"/></td> </tr> <tr> <td>Address:</td> <td><input type="text" name="address" style="width:350px;"/></td> </tr> <tr> <td>City:</td> <td><select class="easyui-combotree" url="data/city_data.json" name="city" style="width:156px;"/></td> </tr> </table> </form> </div> <div id="dlg-buttons"> <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="savereg()">Submit</a> <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a> </div>

请看上面的代码，我们为combotree字段设置了一个名为“city”的url属性，该字段可以使用该属性从远程服务器检索树数据。 注意，该字段有一个名为“easyui-combotree”的类，因此我们不需要编写任何js代码，combotree字段将被自动呈现。

下载 EasyUI 实例: