Section No. 225, jQuery Easyui,propertygird (attribute table) components

JQuery Easyui,propertygird (attribute table) component

Learning Essentials:

1. Loading mode

2. List of properties

3. Method List

This lesson focuses on the use of the Propertygird (attribute table) component in Easyui, which relies on the DataGrid (data table) component.

A Load mode

Class Load Mode

<id= "box"  class= "Easyui-propertygrid"  style= " width:300px "  data-options=" url: ' Content.json ', showgroup:true "></  Table>

Content.json

 [{ "name": "PHP Version"  "value": "5.4"  "group": "System Information"  "editor": "text"  "name": "CPU core"  "value": "Dual core four thread"  "group": "System Information"  "editor": "Text" }, {" name ":" Super Administrator "" value ":" Admin " "group": "Management Information"  "editor": "Text" }, { "name": "Manage Password"  "value": "******"  "group": "Management Information"  "editor": "Text" }]  pre>

The attribute table is extended from the DataGrid (data table). It has the same row data format as the data table. As an attribute row, the following fields are required:

　　Name: Field names.

　　Value: Field value.

　　Group: the Group field value.

　　Editor: The editing object to use when editing property values.

JS Load Mode

<id= "box"  style= "width:300px"></  table>

PropertyGrid () executes a TABLE element (attribute table) component

$ (function  () {    $ (' #box '). PropertyGrid ({        ' Content.json ',    });});

Section No. 225, jQuery Easyui,propertygird (attribute table) components