Combogrid dans EasyUi implémente la pagination et la recherche dynamique de compétences data_javascript distantes

Combogrid dans jquery easyui est assez spécial. C'est une combinaison de combo et de grille. Combogrid combine une zone de texte modifiable et un panneau de grille de données déroulant, permettant aux utilisateurs de rechercher et de sélectionner, de rechercher, d'afficher et de saisir rapidement. Les caractères correspondent aux données. Si la quantité de données est importante, la grille combinée doit disposer d'une fonctionnalité de pagination. Permettez-moi de présenter Combogrid dans EasyUi pour implémenter la pagination et la recherche dynamique de données distantes.

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

J'ai récemment utilisé jquery easyui lorsque je travaillais sur un projet, mais la démo officielle fournie était trop simple et il y avait de nombreuses fonctions sans exemples pertinents. Il y a très peu d'informations sur Internet, je ne peux donc écrire la démo que moi-même. Enregistrez-le simplement brièvement ici.

1.easyUi combotree implémente le chargement dynamique des nœuds de l'arborescence

2.easyUi combogrid implémente la pagination et la recherche dynamique de données distantes

Laissez-moi vous ajouter quelques connaissances :

1. Configuration des paramètres d'attribut commun ComboGrid

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

2. Méthodes courantes de ComboGrid

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