jQuery EasyUI Data Grid und Tree-Plugin -Propertygrid-Eigenschaftsraster

jQuery EasyUI 插件jQuery EasyUI Plugins

Erweitert von $.fn.datagrid.defaults. Überschreiben Sie die Standardvorgaben über $.fn.propertygrid.defaults.

Das propertygrid bietet Benutzern eine Schnittstelle zum Durchsuchen und Bearbeiten von Objekteigenschaften. Das propertygrid ist ein Datenraster mit Inline-Bearbeitung. Es ist recht einfach zu verwenden. Benutzer können ganz einfach eine hierarchische Liste bearbeitbarer Eigenschaften und Elemente erstellen, die jeden Datentyp darstellen. Das propertygrid verfügt über integrierte Sortier- und Gruppierungsfunktionen.

Abhängigkeiten

  • datagrid

Nutzung

Erstellen Sie ein propertygrid im Markup. Beachten Sie, dass die Spalten integriert sind und nicht erneut deklariert werden müssen.

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

Erstellen Sie ein propertygrid mit JavaScript.

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

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

Eine neue Zeile an das propertygrid anhängen.

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

Zeilendaten

Das propertygrid erweitert das datagrid. Sein Zeilendatenformat entspricht dem des datagrid. Als Eigenschaftszeile sind die folgenden Felder erforderlich:
name: Der Feldname.
value: Der zu bearbeitende Feldwert.
group: Der Gruppenfeldwert.
editor: Der Editor, der zum Bearbeiten des Eigenschaftswerts verwendet wird.

Beispiel für Zeilendaten:

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

Eigenschaften

Diese Eigenschaften erweitern das datagrid. Die folgenden Eigenschaften wurden für das propertygrid hinzugefügt.

Name Type Beschreibung Standardwert
showGroup boolesch Legt fest, ob Eigenschaftsgruppen angezeigt werden. false
groupField string Legt den Namen des Gruppenfelds fest. group
groupFormatter function(group,rows) Definiert, wie der Gruppenwert formatiert wird. Diese Funktion enthält die folgenden Parameter:
group: Der Name des Gruppenfelds.
rows: Die Zeilen, die zur Gruppe gehören.

Methoden

Diese Methoden erben vom datagrid. Die folgenden Methoden wurden für das propertygrid hinzugefügt.

Name Parameters Beschreibung
expandGroup groupIndex Die angegebene Gruppe aufklappen. Wenn der Parameter 'groupIndex' nicht zugewiesen ist, alle Gruppen aufklappen.
collapseGroup groupIndex Die angegebene Gruppe zuklappen. Wenn der Parameter 'groupIndex' nicht zugewiesen ist, alle Gruppen zuklappen.
jQuery EasyUI 插件jQuery EasyUI Plugins Weitere Erweiterungen