Introduction à la mise en œuvre des compétences combogrid search box_javascript de l'éditeur de grille de données EasyUI

Nous avons d'abord besoin de l'extension de l'éditeur de grille de données à combogrid, qui a été implémentée par d'autres :

$.extend($.fn.datagrid.defaults.editors, {
combogrid: {
init: function (container, options) {
var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
input.combogrid(options);
return input;
},
destroy: function (target) {
$(target).combogrid('destroy');
},
getValue: function (target) {
return $(target).combogrid('getValue');
},
setValue: function (target, value) {
$(target).combogrid('setValue', value);
},
resize: function (target, width) {
$(target).combogrid('resize', width);
}
}
});

Ensuite, écrivez le champ de recherche à l'intérieur du div

<div id="Marketer_ID_Member_bar">
<table cellpadding="0" cellspacing="0" style="width: 100%;">
<tr>
<td style="text-align: right; padding-right: 15px">
<input id="userName_Member" placeholder="姓名/用户名" style="width: 100px; border: 0;" />
<input type="button" value="查询" onclick="sy.memberInfo.userSearch_Member();" />
</td>
</tr>
</table>
</div>

Lier via la barre d'outils : "#Marketer_ID_Member_bar"

L'étape suivante consiste à suivre la façon dont nous appliquons combogrid à d'autres endroits. La méthode de recherche spécifique sy.memberInfo.userSearch_Member est la suivante :

$('#Marketer_ID_Member').combogrid('grid').datagrid('options').queryParams.Name = $("#userName_Member").val();
$('#Marketer_ID_Member').combogrid('grid').datagrid('reload');

Cependant, il n'y a pas d'identifiant clair dans l'éditeur pour trouver des éléments. À ce moment-là, ma première réaction a été d'ajouter un identifiant moi-même, j'ai donc essayé d'ajouter un attribut "id" à l'éditeur, mais cela n'a pas été fait. travail.

Ensuite, essayez de trouver son parent via Marketer_ID_Member_bar lorsque la combogrid est chargée (l'idée est qu'il s'agit de la barre d'outils de la combogrid, et la combogrid doit être trouvée à travers elle) et attribuez l'identifiant. Le résultat est que l'affectation. réussit, mais le Marketer_ID_Member_bar Le parent n'est pas une grille combinée a échoué.

À ce moment-là, j'ai pensé à envisager l'utilisation de combogrid ailleurs, et j'ai finalement découvert que si je convertis une entrée en combogrid via $('#txtInputID').combogrid({});, la classe de ceci input sera Cela devient easyui-validatebox combogrid-f combo-f validatebox-text. Par comparaison, on constate que lorsque l'éditeur l'utilise, le style de la zone de saisie de cette colonne est : datagrid-editable-input combogrid-f. combo-f,

Ceci devrait être le vrai propriétaire. Il n'est pas non plus pratique de définir l'identifiant, nous utilisons donc le sélecteur de style, donc la méthode finale sy.memberInfo.userSearch_Member ressemble à ceci :

$('.combogrid-f').combogrid('grid').datagrid('options').queryParams.Name = $("#userName_Member").val();
$('.combogrid-f').combogrid('grid').datagrid('reload');

C'est aussi assez tortueux. J'ai fait quelques recherches pendant le développement et je ne l'ai pas résolu, donc je l'ai ignoré car il existe un autre moyen de l'éviter, qui est de ne pas utiliser l'éditeur et de modifier via la boîte contextuelle. , il n'y a donc pas lieu de trop s'inquiéter. Après avoir eu un peu de temps libre aujourd'hui, j'ai jeté un autre coup d'oeil et j'ai finalement trouvé une solution qui fonctionne.

Le contenu ci-dessus est une brève introduction à la mise en œuvre du champ de recherche combogrid de l'éditeur de grille de données EasyUI. J'espère qu'il sera utile à tout le monde !

Comment utiliser combogrid dans EasyUI

Utilisation de ComboGrid et configuration des paramètres

1. Class=" "easyui-combogrid" doit être introduit, qui doit être appliqué dans l'élément d'entrée ou de sélection

2. Les paramètres doivent être définis dans les options de données

3. Configuration des paramètres d'attribut :

loadMsg : Charger les données distantes, les informations affichées

idField : sélectionnez la valeur soumise dans select

textField : Afficher la valeur sélectionnée dans select

mode : Définissez comment charger le texte de données du DataGrid. Lorsqu'il est défini en mode "'remote'", quel type d'utilisateur sera envoyé au serveur avec le paramètre de requête http nommé 'q' pour obtenir de nouvelles données

filtre : lorsque les données sont chargées, "mode" est défini sur "local", comment sélectionner la source de données locale et renvoyer true pour sélectionner la ligne

4. Méthode

options() : renvoie l'objet de sélection

grid() : renvoie l'objet dataGrid sélectionné

setValues(values) : Définir le tableau de valeurs d'élément

setValue(value) : Définir la valeur du composant

clear() : efface la valeur du composant