Plugins Dt Propertygrid

jQuery EasyUI DataGrid and Tree Plugins – PropertyGrid

Extends from $.fn.datagrid.defaults. Override defaults by using $.fn.propertygrid.defaults.

The property grid provides users with an interface for browsing and editing object properties. The property grid is an inline-editing data grid. It is quite easy to use. Users can easily create an editable hierarchical list of 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 markup. Note that the 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:

name: The field name.
value: The field value to be edited.
group: The group field value.
editor: The editor for editing the property value.

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":"bill@gmail.com","group":"Marketing Settings","editor":{
        "type":"validatebox",
        "options":{
            "validType":"email"
        }
    }}
]}

Properties

The properties extend from the data grid. The following properties are added for the property grid.

Name	Type	Description	Default
showGroup	boolean	Defines if to show property groups.	false
groupField	string	Defines the group field name.	group
groupFormatter	function(group,rows)	Defines how to format the group value. This function includes the following parameters: `group`: The group field name. `rows`: The rows belonging to the group.

Methods

The methods extend from the data grid. The following methods are added for the property grid.

Name	Parameter	Description
expandGroup	groupIndex	Expand the specified group. If the 'groupIndex' parameter is not assigned, all groups are expanded.
collapseGroup	groupIndex	Collapse the specified group. If the 'groupIndex' parameter is not assigned, all groups are collapsed.

YouTip