-
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 Data Grid - Creating Property Grid
Property Grid (property grid) with a built-in expand (expand) / collapse (merge) button, it can simply be rows. You can simply create an editable hierarchical attributes (hierarchical) list.
HTML Settings
<Table id = "tt" class = "easyui-propertygrid" style = "width: 300px"
url = "propertygrid_data.json"
showGroup = "true" scrollbarSize = "0"
> </ Table>
Prepare json data
[
{ "Name": "Name", "value": "Bill Smith", "group": "ID Settings", "editor": "text"},
{ "Name": "Address", "value": "", "group": "ID Settings", "editor": "text"},
{ "Name": "Age", "value": "40", "group": "ID Settings", "editor": "numberbox"},
{ "Name": "Birthday", "value": "01/02/2012", "group": "ID Settings", "editor": "datebox"},
{ "Name": "SSN", "value": "123-456-7890", "group": "ID Settings", "editor": "text"},
{ "Name": "Email", "value": "bill@gmail.com", "group": "Marketing Settings", "editor": {
"Type": "validatebox",
"Options": {
"ValidType": "email"
}
}}
{ "Name": "FrequentBuyer", "value": "false", "group": "Marketing Settings", "editor": {
"Type": "checkbox",
"Options": {
"On": true,
"Off": false
}
}}
]
As you can see, the property grid (property grid) does not require the creation of any javascript code. You can simply inherit extension editor type.