PropertyGrid

Extend from $.fn.datagrid.defaults. Override defaults with $.fn.propertygrid.defaults.

The propertygrid provides users an interface for browsing and editing the properties of an object. The property grid is an inline editing datagrid. It is fairly easy to use. Users can easily create a hierarchical list of editable properties and represent any data type of item. The property grid comes with a built-in sorting and grouping features.

Dependencies

Usage

Create a propertygrid in markup. Notice that the columns have been built-in and don't need to declare them again.

  1. <table id="pg" class="easyui-propertygrid" style="width:300px"
  2. data-options="url:'get_data.php',showGroup:true,scrollbarSize:0"></table>

Create a propertygrid using javascript.

  1. <table id="pg" style="width:300px"></table>
  1. $('#pg').propertygrid({
  2. url: 'get_data.php',
  3. showGroup: true,
  4. scrollbarSize: 0
  5. });

Append a new row to propertygrid.

  1. var row = {
  2. name:'AddName',
  3. value:'',
  4. group:'Marketing Settings',
  5. editor:'text'
  6. };
  7. $('#pg').propertygrid('appendRow',row);

Row Data

The propertygrid extend from datagrid. It's row data format is same as datagrid. 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 while editing property value.

Row data example:

  1. {"total":4,"rows":[
  2. {"name":"Name","value":"Bill Smith","group":"ID Settings","editor":"text"},
  3. {"name":"Address","value":"","group":"ID Settings","editor":"text"},
  4. {"name":"SSN","value":"123-456-7890","group":"ID Settings","editor":"text"},
  5. {"name":"Email","value":"bill@gmail.com","group":"Marketing Settings","editor":{
  6. "type":"validatebox",
  7. "options":{
  8. "validType":"email"
  9. }
  10. }}
  11. ]}

Properties

The properties extend from datagrid, below is the added properties for propertygrid.

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

Methods

The methods extend from datagrid, below is the added methods for propertygrid.

Name Parameter Description
expandGroup groupIndex Expand specified group. If the 'groupIndex' parameter is not assigned, expand all group.
collapseGroup groupIndex Collapse specified group. If the 'groupIndex' parameter is not assigned, collapse all group.