Combogrid in EasyUi implementiert Paging und dynamische Suche nach Remote-Data_Javascript-Fähigkeiten

Combogrid in jquery easyui ist eine Kombination aus Combo und Grid, die ein bearbeitbares Textfeld und ein Dropdown-Datenrasterfeld kombiniert, sodass Benutzer schnell finden und auswählen, suchen, anzeigen und aktuelle Eingaben vornehmen können. Die Zeichen stimmen mit den Daten überein. Wenn die Datenmenge groß ist, muss das Combogrid über eine Paging-Funktionalität verfügen. Lassen Sie mich Combogrid in EasyUi vorstellen, um Paging und dynamische Suche nach Remote-Daten zu implementieren.

$('#mallid').combogrid({ 
panelWidth:500, 
idField:'mallid', //ID字段 
textField:'mallname', //显示的字段 
url:"../global/datagrid.aspx?act=malllist", 
fitColumns: true, 
striped: true, 
editable:true, 
pagination : true,//是否分页 
rownumbers:true,//序号 
collapsible:false,//是否可折叠的 
fit: true,//自动大小 
pageSize: 10,//每页显示的记录条数，默认为10 
pageList: [10],//可以设置每页记录条数的列表 
method:'post', 
columns:[[ 
{field:'mallname',title:'商城名称',width:150,sortable:true}, 
{field:'url',title:'网址',width:150} 
]], 
keyHandler: { 
up: function() {}, 
down: function() {}, 
enter: function() {}, 
query: function(q) { 
//动态搜索 
$('#mallid').combogrid("grid").datagrid("reload", { 'keyword': q }); 
$('#mallid').combogrid("setValue", q); 
} 
} 
}); 

Ich habe kürzlich bei der Arbeit an einem Projekt jquery easyui verwendet, aber die bereitgestellte offizielle Demo war zu einfach und es gab viele Funktionen ohne relevante Beispiele. Da es im Internet nur sehr wenige Informationen gibt, kann ich die Demo nur selbst schreiben. Halten Sie es einfach hier kurz fest.

1.easyUi Combotree implementiert das dynamische Laden von Baumknoten

2.easyUi Combogrid implementiert Paging und dynamische Suche von Remote-Daten

Lassen Sie mich etwas Wissen hinzufügen:

1. Konfiguration allgemeiner ComboGrid-Attributparameter

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

2. Gängige Methoden von ComboGrid

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