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": "[email protected]", "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.