-
jQuery EasyUI Tutorial
jEasyUI application
- jEasyUI Create a CRUD application
- jEasyUI Create a CRUD data grid
- jEasyUI Form CRUD application
- jEasyUI Create an RSS reader
jEasyUI Drag and drop
- jEasyUI Basic drag and drop
- jEasyUI Create a drag-and-drop shopping cart
- jEasyUI Create a school curriculum
jEasyUI Menus and buttons
- jEasyUI Create a simple menu
- jEasyUI Create a link button
- jEasyUI Create a menu button
- jEasyUI Create a split button
jEasyUI layout
- jEasyUI Create a border layout
- jEasyUI Create a complex layout
- jEasyUI Creates a fold panel
- jEasyUI Create a tab page
- jEasyUI Dynamically add a tab
- jEasyUI Add the AutoPlay tab
- jEasyUI Create the XP style left panel
jEasyUI Data grid
- jEasyUI Convert HTML tables to data grids
- jEasyUI Get the selected row data
- jEasyUI Add the query function
- jEasyUI Add a toolbar
- jEasyUI Create complex toolbars
- jEasyUI Sets the frozen column
- jEasyUI Dynamically change columns
- jEasyUI Format the column
- jEasyUI Set sort
- jEasyUI Custom sorting
- jEasyUI Create a column combination
- jEasyUI Add a check box
- jEasyUI Custom tab
- jEasyUI Enable in-line editing
- jEasyUI Extension editor
- jEasyUI Column operation
- jEasyUI Merge Cells
- jEasyUI Create a custom view
- jEasyUI Create a footer summary
- jEasyUI Condition Sets the line background color
- jEasyUI Create an attribute grid
- jEasyUI The extended line shows the details
- jEasyUI Create a subgrid
- jEasyUI Display massive data
- jEasyUI Add a paging component
jEasyUI window
- jEasyUI Create a simple window
- jEasyUI Customize the Window Toolbar
- jEasyUI Window and layout
- jEasyUI Create a dialog box
- jEasyUI Customize the dialog box
jEasyUI Tree menu
- jEasyUI Use the markup to create a tree menu
- jEasyUI Create an asynchronous tree menu
- jEasyUI Tree menu to add nodes
- jEasyUI Create a tree menu with check boxes
- jEasyUI Tree menu drag and drop control
- jEasyUI The Tree menu loads the parent / child nodes
- jEasyUI Create the base tree grid
- jEasyUI Create a complex tree grid
- jEasyUI Dynamic loading of tree
- jEasyUI The tree grid adds pagination
- jEasyUI Tree-lazy lazy-loading node
jEasyUI Form
- jEasyUI Create an asynchronous submission form
- jEasyUI Form validation
- jEasyUI Create a tree drop-down box
- jEasyUI Format the drop-down box
- jEasyUI Filter down the data grid
jEasyUI Reference Manual
jQuery EasyUI Form - Create a tree drop-down box (ComboTree)
Tree drop-down box (ComboTree) is a drop-down box below the tree (Tree) with the (ComboBox). It can act as a form field use, it can be submitted to a remote server.
In this tutorial, we will create a registration form with name, address, city fields. city field is a drop-down box tree (ComboTree) field, in which the user can drop down the tree panel (tree panel), and select a specific city.
Create a form (Form)
<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>
<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>
You can see from the above code, we called a 'city' tree drop-down box (ComboTree) set up a url attribute field, this field can be retrieved tree (Tree) data from the remote server. Please note that this field has a style called 'easyui-combotree', so we do not need to write any js code tree drop-down box (ComboTree) fields are automatically rendered.