jQuery EasyUI使用教程之创建树形下拉框

树形下拉框是一个带有下列树形结构的下拉框。它可以作为一个表单字段进行使用，可以提交给远程服务器。

在本教程中，我们将要创建一个注册表单，带有name、address、city字段。city字段是一个树形下拉框字段，在里面用户可以下拉树面板，并选择一个特定的城市。

jQuery EasyUI最新试用版下载请猛戳>>

点击查看示例

创建表单

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

< div id = "dlg" class = "easyui-dialog" style = "width:500px;height:250px;padding:10px 30px;" title = "Register" buttons = "#dlg-buttons" > < h2 >Account Information</ h2 > < form id = "ff" method = "post" > < table > < tbody >< 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;" ></ select ></ td > </ tr > </ tbody ></ 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 >

从上面的代码可以看到，我们为一个名为 'city' 的树形下拉框字段设置了一个url属性，这个字段可以从远程服务器检索树形结构数据。请注意，这个字段有一个样式名字叫 'easyui-combotree'，所以我们不需要写任何的js代码，树形下拉框字段将自动渲染。

下载EasyUI示例：easyui-form-demo.zip

有兴趣的朋友可以点击查看更多有关jQuery EasyUI的教程>>