EasyUI adds the ComboTree field to a form

@ Author YHC

ComboTree is a ComboBox and a drop-down tree. You can use the most form field and submit it to the remote server.

In this tutorial, we will create a registered form with a name, address, city field, and city field as a combotree field, you can drop down the tree panel and select a specific city.

 

View Demo

 

Create Form
[Html]
<Div id = "dlg" class = "easyui-dialog" style = "width: 500px; height: 250px; padding: 10px 30px ;"
Title = "Register" buttons = "# dlg-buttons">
<H2> Account Information <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 '). dicel ('close') "> Cancel </a>
</Div>

<Div id = "dlg" class = "easyui-dialog" style = "width: 500px; height: 250px; padding: 10px 30px ;"
Title = "Register" buttons = "# dlg-buttons">
<H2> Account Information <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 '). dicel ('close') "> Cancel </a>
</Div> based on the above Code, we set a url attribute for the name of a combotree field, which can be retrieved from the remote server, note that this field has a style named 'easyui-combotree', so we do not need to write any js Code. The combotree field will be automatically rendered.
 

 

Author: yhc13429826359