jQuery EasyUI Data Grid et Tree Plugin -Propertygrid Grille de propriétés

jQuery EasyUI 插件Plugins jQuery EasyUI

Hérite de $.fn.datagrid.defaults. Remplacez les valeurs par défaut via $.fn.propertygrid.defaults.

Le propertygrid fournit aux utilisateurs une interface pour parcourir et modifier les propriétés d'un objet. Le propertygrid est une grille de données à édition en ligne. Il est assez facile à utiliser. Les utilisateurs peuvent facilement créer une liste hiérarchique de propriétés modifiables et d'éléments représentant n'importe quel type de données. Le propertygrid est livré avec des fonctionnalités intégrées de tri et de regroupement.

Dépendances

  • datagrid

Utilisation

Créer un propertygrid dans le balisage. Notez que les colonnes sont intégrées et n'ont pas besoin d'être déclarées à nouveau.

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

Créer un propertygrid avec JavaScript.

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

$('#pg').propertygrid({
    url: 'get_data.php',
    showGroup: true,
    scrollbarSize: 0
});

Ajouter une nouvelle ligne au propertygrid.

var row = {
    name:'AddName',
    value:'',
    group:'Marketing Settings',
    editor:'text'
};
$('#pg').propertygrid('appendRow',row);

Données de ligne

Le propertygrid hérite du datagrid. Son format de données de ligne est le même que celui du datagrid. En tant que ligne de propriété, les champs suivants sont requis :
name : Le nom du champ.
value : La valeur du champ à modifier.
group : La valeur du champ group.
editor : L'éditeur utilisé pour modifier la valeur de la propriété.

Exemple de données de ligne :

{"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"
        }
    }}
]}

Propriétés

Ces propriétés héritent du datagrid. Les propriétés suivantes sont ajoutées pour le propertygrid.

Name Type Description Valeur par défaut
showGroup booléen Définit s'il faut afficher les groupes de propriétés. false
groupField string Définit le nom du champ de groupe. group
groupFormatter function(group,rows) Définit comment formater la valeur du groupe. Cette fonction comprend les paramètres suivants :
group: Le nom du champ de groupe.
rows: Les lignes appartenant au groupe.

Méthodes

Ces méthodes héritent de la datagrid. Voici les méthodes ajoutées pour la propertygrid.

Name Parameters Description
expandGroup groupIndex Développe le groupe spécifié. Si le paramètre 'groupIndex' n'est pas défini, développe tous les groupes.
collapseGroup groupIndex Réduit le groupe spécifié. Si le paramètre 'groupIndex' n'est pas défini, réduit tous les groupes.
jQuery EasyUI 插件Plugins jQuery EasyUI Autres extensions