Plugins de formulaire jQuery EasyUI -Combogrid

jQuery EasyUI 插件Plugins jQuery EasyUI

Hérite de $.fn.combo.defaults et $.fn.datagrid.defaults. Surchargez les valeurs par défaut via $.fn.combogrid.defaults.

Le combogrid combine une zone de texte modifiable avec un panneau de grille de données déroulant, permettant aux utilisateurs de rechercher et sélectionner rapidement depuis le panneau de grille de données déroulant. Le combogrid offre une prise en charge de la navigation au clavier pour sélectionner un élément.

Dépendances

  • combo
  • datagrid

Utilisation

Créer un combogrid

1. Créer un combogrid à partir du balisage.

<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. Créez-le à partir d'un élément <select> ou <input> existant à l'aide de 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}
    ]]
    });

Fonctionnalité d'autocomplétion

Ajoutons une fonctionnalité d'autocomplétion au combogrid. La grille de données déroulante affichera les résultats possibles en fonction de la saisie de l'utilisateur.

$('#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}
    ]]
});

Côté serveur, le paramètre 'q' doit d'abord être récupéré. Les utilisateurs peuvent interroger la base de données, puis renvoyer un résultat SQL au format JSON au navigateur.

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(...);

Propriétés

Ces propriétés héritent de combo et datagrid. Vous trouverez ci-dessous les propriétés ajoutées pour le combogrid.

Name Type Description Valeur par défaut
loadMsg string Le message affiché lorsque le datagrid charge des données distantes. null
idField string Le nom du champ de l'id. null
textField string Le nom du champ du texte affiché dans la zone de texte. null
mode string Définit comment charger les données du datagrid lorsque le texte change. Définissez-le sur 'remote' si le combogrid charge depuis le serveur. Lorsqu'il est défini sur le mode 'remote', la valeur saisie par l'utilisateur sera envoyée comme paramètre de requête HTTP nommé 'q' au serveur pour obtenir de nouvelles données. local
filter function(q, row) Définit comment sélectionner les données locales lorsque 'mode' est défini sur 'local'. Retournez true pour sélectionner cette ligne.
Exemple de code :
$('#cc').combogrid({
    filter: function(q, row){
        var opts = $(this).combogrid('options');
        return row[opts.textField].indexOf(q) == 0;
    }
});
100

Événements

Ces événements sont hérités de combo et datagrid.

Méthodes

Ces méthodes étendent combo. Les méthodes suivantes sont ajoutées ou redéfinies pour le combogrid.

Name Parameters Description
options none Renvoie l'objet options.
grid none Retourne l'objet datagrid. L'exemple ci-dessous montre comment obtenir la ligne sélectionnée :
var g = $('#cc').combogrid('grid');    // get datagrid object
var r = g.datagrid('getSelected');    // get the selected row
alert(r.name);
setValues values Définit le tableau des valeurs des composants.
Exemple de code :
$('#cc').combogrid('setValues', ['001','007']);
setValue value Définit la valeur du composant.
Exemple de code :
$('#cc').combogrid('setValue', '002');
clear none Efface la valeur du composant.
jQuery EasyUI 插件Plugins jQuery EasyUI Autres extensions