Einführung in die Implementierung der Fähigkeiten des EasyUI-Datagrid-Editors Combogrid Search Box_Javascript

Zuerst benötigen wir die Datagrid-Editor-Erweiterung für Combogrid, die von anderen implementiert wurde:

$.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);
}
}
});

Dann schreiben Sie das Suchfeld in das 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>

Binden über Symbolleiste: „#Marketer_ID_Member_bar“

Der nächste Schritt besteht darin, der Art und Weise zu folgen, wie wir Combogrid an anderen Stellen anwenden. Die spezifische Suchmethode sy.memberInfo.userSearch_Member lautet wie folgt:

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

Allerdings gibt es im Editor keine eindeutige ID, um Elemente zu finden. Zu diesem Zeitpunkt war meine erste Reaktion, selbst eine ID hinzuzufügen, also habe ich versucht, dem Editor ein Attribut „id“ hinzuzufügen, aber das gelang nicht arbeiten.

Versuchen Sie als Nächstes, beim Laden des Combogrids das übergeordnete Element über Marketer_ID_Member_bar zu finden (die Idee ist, dass es sich um die Symbolleiste des Combogrids handelt und das Combogrid darüber gefunden werden sollte) und weisen Sie die ID zu. Das Ergebnis ist die Zuweisung ist erfolgreich, aber die Marketer_ID_Member_bar Das übergeordnete Element ist kein Combogrid, fehlgeschlagen.

Zu diesem Zeitpunkt dachte ich darüber nach, die Verwendung von Combogrid an anderen Stellen zu untersuchen, und fand schließlich heraus, dass, wenn ich eine Eingabe über $('#txtInputID').combogrid({}); in Combogrid konvertiere, die Klasse davon ist Die Eingabe wird zu easyui-validatebox Combogrid-f Combo-f Validatebox-Text. Durch Vergleich wird festgestellt, dass der Stil des Eingabefelds dieser Spalte lautet: datagrid-editable-input Combogrid-f Combo-f,

Dies sollte der eigentliche Besitzer sein. Es ist auch unpraktisch, die ID festzulegen, daher verwenden wir den Stilselektor, sodass die endgültige Methode sy.memberInfo.userSearch_Member so aussieht:

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

Es ist auch ziemlich umständlich. Ich habe während der Entwicklung ein wenig recherchiert und es nicht gelöst, also habe ich es ignoriert, weil es eine andere Möglichkeit gibt, es zu vermeiden, nämlich nicht den Editor zu verwenden und über das Popup-Fenster zu bearbeiten , es besteht also kein Grund zur Sorge, nachdem ich heute etwas Freizeit hatte, habe ich noch einmal nachgeschaut und schließlich eine Lösung gefunden, die funktioniert.

Der obige Inhalt ist eine kurze Einführung in die Implementierung des Combogrid-Suchfelds des EasyUI-Datagrid-Editors. Ich hoffe, dass er für alle hilfreich ist!

So verwenden Sie Combogrid in EasyUI

ComboGrid-Nutzung und Parameterkonfiguration

1. Class=" "easyui-combogrid" muss eingeführt werden, das im Eingabe- oder Auswahlelement

angewendet werden muss

2. Parametereinstellungen müssen in den Datenoptionen festgelegt werden

3. Attributparameterkonfiguration:

loadMsg: Remote-Daten laden, angezeigte Informationen

idField: Wählen Sie den übermittelten Wert in select

aus

textField: In select ausgewählter Anzeigewert

Modus: Definieren Sie, wie der Datentext des DataGrid geladen wird. Welche Art von Benutzer wird im „Remote“-Modus mit dem HTTP-Anforderungsparameter „q“ an den Server gesendet, um neue Daten zu erhalten

Filter: Wenn die Daten geladen werden, wird „Modus“ auf „lokal“ gesetzt. So wählen Sie die lokale Datenquelle aus und geben „true“ zurück, um die Zeile auszuwählen

4. Methode

Optionen(): Gibt das Auswahlobjekt zurück

grid(): Gibt das ausgewählte dataGrid-Objekt

zurück

setValues(values): Elementwert-Array festlegen

setValue(value): Legt den Wert der Komponente fest

clear(): löscht den Wert der Komponente