jQuery EasyUI Formular-Plugins -Combogrid

jQuery EasyUI 插件jQuery EasyUI Plugins

Erweitert $.fn.combo.defaults und $.fn.datagrid.defaults. Überschreiben Sie die Standardvorgaben über $.fn.combogrid.defaults.

Die Combogrid kombiniert eine editierbare Textbox mit einem Dropdown-Datagrid-Panel, sodass Benutzer schnell suchen und aus dem Dropdown-Datagrid-Panel auswählen können. Die Combogrid bietet Unterstützung für die Tastaturnavigation zur Auswahl eines Elements.

Abhängigkeiten

  • combo
  • datagrid

Nutzung

Eine Combogrid erstellen

1. Erstellen Sie eine Combogrid aus Markup.

<select id="cc" class="easyui-combogrid" name="dept" style="width:250px;"
    data-options="
    panelWidth:450,
    value:'006',
    idField:'code',
    textField:'name',
    url:'datagrid_data.json',
    columns:[[
    {field:'code',title:'Code',width:60},
    {field:'name',title:'Name',width:100},
    {field:'addr',title:'Address',width:120},
    {field:'col4',title:'Col41',width:100}
    ]]
    "></select>

2. Erstellen Sie sie aus einem vorhandenen <select>- oder <input>-Element mit JavaScript.

<input id="cc" name="dept" value="01">

    $('#cc').combogrid({
    panelWidth:450,
    value:'006',
    idField:'code',
    textField:'name',
    url:'datagrid_data.json',
    columns:[[
    {field:'code',title:'Code',width:60},
    {field:'name',title:'Name',width:100},
    {field:'addr',title:'Address',width:120},
    {field:'col4',title:'Col41',width:100}
    ]]
    });

Autovervollständigungsfunktion

Fügen wir der Combogrid eine Autovervollständigungsfunktion hinzu. Das Dropdown-Datagrid zeigt mögliche Ergebnisse basierend auf der Benutzereingabe an.

$('#cc').combogrid({
    delay: 500,
    mode: 'remote',
    url: 'get_data.php',
    idField: 'id',
    textField: 'name',
    columns: [[
        {field:'code',title:'Code',width:120,sortable:true},
        {field:'name',title:'Name',width:400,sortable:true}
    ]]
});

Auf der Serverseite muss zuerst der Parameter 'q' abgerufen werden. Benutzer können die Datenbank abfragen und dann ein JSON-formatiertes SQL-Ergebnis an den Browser zurückgeben.

get_data.php: 

$q = isset($_POST['q']) ? $_POST['q'] : ''; // the request parameter
// query database and return JSON result data
$rs = mysql_query("select * from item where name like '$q%'");
echo json_encode(...);

Eigenschaften

Diese Eigenschaften erweitern combo und datagrid. Nachfolgend sind die Eigenschaften aufgeführt, die für die Combogrid hinzugefügt wurden.

Name Type Beschreibung Standardwert
loadMsg string Die Nachricht, die angezeigt wird, wenn das Datagrid Remote-Daten lädt. null
idField string Der Feldname der id. null
textField string Der Feldname des im Textfeld angezeigten Textes. null
mode string Legt fest, wie Datagrid-Daten geladen werden, wenn sich der Text ändert. Setzen Sie es auf 'remote', wenn das Combogrid vom Server lädt. Wenn der Modus auf 'remote' gesetzt ist, wird der Eingabewert des Benutzers als HTTP-Anforderungsparameter namens 'q' an den Server gesendet, um neue Daten abzurufen. local
filter function(q, row) Legt fest, wie lokale Daten ausgewählt werden, wenn 'mode' auf 'local' gesetzt ist. Geben Sie true zurück, um diese Zeile auszuwählen.
Codebeispiel:
$('#cc').combogrid({
    filter: function(q, row){
        var opts = $(this).combogrid('options');
        return row[opts.textField].indexOf(q) == 0;
    }
});
100

Ereignisse

Diese Events sind von combo und datagrid abgeleitet.

Methoden

Diese Methoden sind von combo abgeleitet. Die folgenden Methoden wurden für das Combogrid hinzugefügt oder überschrieben.

Name Parameters Beschreibung
options none Gibt das Optionsobjekt zurück.
grid none Gibt das Datagrid-Objekt zurück. Das folgende Beispiel zeigt, wie die ausgewählte Zeile abgerufen wird:
var g = $('#cc').combogrid('grid');    // get datagrid object
var r = g.datagrid('getSelected');    // get the selected row
alert(r.name);
setValues values Legt das Array der Komponentenwerte fest.
Codebeispiel:
$('#cc').combogrid('setValues', ['001','007']);
setValue value Legt den Wert der Komponente fest.
Codebeispiel:
$('#cc').combogrid('setValue', '002');
clear none Löscht den Wert der Komponente.
jQuery EasyUI 插件jQuery EasyUI Plugins Weitere Erweiterungen