jQuery EasyUI DataGrid and Tree Plugin - PropertyGrid Property Grid
Extends from $.fn.datagrid.defaults. Overrides the default defaults with $.fn.propertygrid.defaults.
The property grid provides users with an interface to browse and edit object properties. The property grid is an inline-editing data grid. It is quite easy to use. Users can easily create a hierarchical list of editable properties and items representing any data type. The property grid comes with built-in sorting and grouping features.
Dependencies
- datagrid
Usage
Create a property grid in the markup. Note that columns are built-in and do not need to be declared again.
<table id="pg" class="easyui-propertygrid" style="width:300px"
data-options="url:'get_data.php',showGroup:true,scrollbarSize:0"></table>
Create a property grid using JavaScript.
<table id="pg" style="width:300px"></table>
$('#pg').propertygrid({
url: 'get_data.php',
showGroup: true,
scrollbarSize: 0
});
Append a new row to the property grid.
var row = {
name:'AddName',
value:'',
group:'Marketing Settings',
editor:'text'
};
$('#pg').propertygrid('appendRow',row);
Row Data
The property grid extends from the data grid. Its row data format is the same as the data grid. As a property row, the following fields are required:
Row data example:
{"total":4,"rows":[
{"name":"Name","value":"Bill Smith","group":"ID Settings","editor":"text"},
{"name":"Address","value":"","group":"ID Settings","editor":"text"},
{"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"
}
}}
]}
Properties
This property extends from the data grid. The following properties are added for the property grid.
| Name | Type | Description | Default Value |
|---|---|---|---|
| showGroup | boolean | Defines whether to show property groups. | false |
| groupField | string | Defines the field name for the group. | group |
| groupFormatter | function(group,rows) | Defines how to format the group value. The function includes the following parameters: <br>group: The field name of the group. <br>rows: The rows belonging to the group. |
Methods
This method extends from the data grid. The following methods are added for the property grid.
| Name | Parameters | Description |
|---|---|---|
| expandGroup | groupIndex | Expands the specified group. If the 'groupIndex' parameter is not assigned, all groups are expanded. |
| collapseGroup | groupIndex | Collapses the specified group. If the 'groupIndex' parameter is not assigned, all groups are collapsed. |