L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Comment utiliser un composant d'interface utilisateur de la grille jQuery
Découvrez comment créer et manipuler une grille d'interface utilisateur Kendo à l'aide d'une source de données distante, lors de la création, de la lecture, de la mise à jour et de la destruction d'éléments de grille.
Dernier deux épisodes, vous avez appris à créer une grille d'interface utilisateur Kendo et à effectuer des opérations d'édition de base à l'aide d'une source de données locale. Dans cette dernière partie sur les grilles, vous apprendrez à créer et à manipuler une grille à l'aide d'une source de données distante.
La source de données distante que je vais utiliser est une API publique contenant une liste des collèges de New York. Pour faire des requêtes à cette API depuis la grille, vous devez faire trois choses. Configurez d'abord l'objet `transport` de la source de données pour effectuer l'action. Deuxièmement, définissez l'ID et les noms de champ du schéma de la source de données. Enfin, définissez l'option `editable` de la grille et ajoutez la commande pour créer l'interface utilisateur. Ces étapes seront expliquées plus en détail pour montrer comment créer, lire, mettre à jour et détruire des éléments de la grille.
Le composant DataSource
Le composant `DataSource` est un composant de l'interface utilisateur Kendo qui extrait les données des composants de son utilisateur interface. Nous l'avons déjà utilisé dans de nombreux composants, tels que TreeView et PanelBar . Les données d'un composant peuvent être codées en dur dans son modèle ou définies dans son paramètre `dataSource`. Il est conseillé de supprimer les données de la vue car cela rend le composant plus réutilisable. Le paramètre `dataSource` peut être défini sur un tableau, un objet ou une instance de` kendo.data.DataSource`. Pour cet exemple, nous utiliserons cette dernière méthode. Voici le code de départ pour créer la grille:
`` `html
= "utf-8" >
[19659002]
<div id = "grid" [19659017]>
[19659090]
Lecture des données
Ensuite, nous allons remplir les espaces pour que la grille fonctionne. Tout d'abord, nous définirons les paramètres de l'objet `transport` et` schema`. L'option `transport` définit le type de requête que nous allons faire. Nous allons utiliser `transport.read` pour charger et enregistrer les données de notre API. Ce paramètre inclut l'URL et le format du résultat.
`` `js
transport: {
lire : [
dataType: 'json'
[19659002] }
`` `
Le schéma définit la structure des données. J'ai utilisé l'option d'analyse pour prétraiter les données avant de les enregistrer. Étant donné que les données que j'utilise sont structurées sous la forme d'un tableau de tableaux, je l'ai transformé en un tableau d'objets et je n'ai inclus que quelques-uns de ses champs afin de pouvoir travailler plus facilement. Ensuite, le paramètre de modèle du schéma est ajouté pour définir les champs de chaque élément de données. Lier un `id` à l'un des champs de la collection est important pour que la grille fonctionne correctement.
`` `js
schéma: {
parse : fonction (réponse) {
return response.data.map (fonction (item) {
retour {
] SchoolID: item [1]
Nom: objet [9]
Ville: item [12]
Zip: article [13]
};
)
},
modèle: {
id: 'SchoolID'
] champs: {
SchoolID: {modifiable: false },
Nom: {},
Ville: {},
Code postal: {}
}
]}
`` `
Lorsque vous initialisez le composant, une grille sera automatiquement créée. Cela nous évite d'écrire du code supplémentaire pour créer les colonnes. Cependant, nos données renvoient 77 éléments et il n'est pas pratique pour l'utilisateur de charger tous ces éléments sur une seule page. Pour résoudre ce problème, nous pouvons ajouter l'option `pageSize` à l'instance de source de données et l'option` pageable` aux paramètres du composant. Cela ajoutera des boutons de navigation au bas de page de la grille pour que vous puissiez parcourir les données et passer à la fin ou au début de la grille.
`` `js
var dataSource = nouveau kendo.data.DataSource ({ [19659002]
transport: {...},
schéma: {...},
pageTaille: 5
] }
$ (document) .ready ( function () { [19659002]
$ ( '# grille' ). KendoGrid ({
dataSource: dataSource,
paginable: [
pageTaille: 5
[19659002]
))
)
`` `
Mise à jour et destruction de données
Pour activer la mise à jour des données, vous devez d'abord configurer l'option `transport.update` de l'instance de source de données. Pour activer la suppression des données, configurez l'option `transport.destroy`. Comme cette API n'autorise que la récupération de données, je réutiliserai la même URL à des fins de démonstration. En réalité, l'URL doit être définie sur le noeud final que vous avez conçu dans l'API pour mettre à jour et détruire les données. Vous pouvez également définir le type de requête en utilisant l'attribut `type`. La valeur par défaut est `get` mais pour les autres actions, vous utiliseriez` post.` En option, l'attribut `data` peut être configuré pour transmettre des paramètres supplémentaires à la requête.
`` `js
var dataSource = nouveau kendo.data.DataSource ({ [19659002]
transport: {
...
mise à jour: {
type de données: 'json'
},
destroy [{19459017]
dataType: 'json'
} [19659002]
},
...
}
`` `
Ensuite, vous devez définir l'option `editable` de la grille et définir les colonnes. Dans les colonnes, nous ajouterons les commandes edit et destroy et inclurons tous nos champs. Étant donné que le modèle désactive le champ ID, ce champ n'affichera pas de champ de texte en mode édition.
`` `js
$ ( '# grid' ). KendoGrid ({
...
modifiable: 'popup' [19659017]
colonnes: [
{command: [ 'edit' 'destroy' ]},
{field: 'SchoolID' },
{field: 'Name' },
{field: 'City' }, [19659002]
{field: 'Zip' }
]
)
`` `
Création de données
Pour ajouter de nouveaux enregistrements à la grille, vous devez définir l'option `transport.create` et ajouter une commande de barre d'outils. La barre d'outils est utilisée pour apporter des modifications ou effectuer des actions sur la grille entière, par opposition aux enregistrements individuels. Les commandes intégrées de la barre d’outils incluent create, cancel, save, excel et pdf. L'ajout de l'une de ces valeurs au tableau de la barre d'outils ajoutera un bouton à l'en-tête de votre grille. Vous pouvez personnaliser l'apparence de ces commandes en modifiant la classe d'icônes et le texte du bouton ou vous pouvez créer des commandes de barre d'outils personnalisées en spécifiant un modèle pour la commande. La commande de barre d'outils que nous allons utiliser est la commande `create`.
`` `js
var dataSource = nouveau kendo.data.DataSource ({ [19659002]
transport: {
...
créer: {
Type de données: 'json'
] },
...
] }),
$ ( '# grid' [19] 659017]). KendoGrid ({
..
] barre d'outils: [ 'create' ]
);
`` `
Conclusion
En résumé, vous avez vu comment configurer la grille pour effectuer toutes les opérations CRUD. en utilisant une source de données distante. Cela implique la définition de l'option `transport` de la source de données, la définition des champs dans le schéma et l'ajout de la commande aux paramètres column ou toolbar.
Le composant `DataSource` joue un rôle important dans la construction des grilles. Il existe d'autres moyens d'améliorer le comportement de la grille à l'aide de `DataSource ', par exemple en ajoutant du filtrage, en triant et en effectuant des calculs agrégés sur les données. Par exemple, si vous utilisez une grille de données pour afficher une liste de commandes, vous pouvez ajouter une fonction d'agrégation pour trouver le prix moyen des commandes. Ces fonctionnalités peuvent être utilisées dans n'importe quel composant qui utilise une source de données.
Essayez la grille pour vous-même
Vous voulez commencer à tirer parti de la interface utilisateur Kendo jQuery Grid + Composants d'interface utilisateur Kendo prêts à l'emploi, comme le Graphiques ou Planificateur ? Vous pouvez commencer un essai gratuit du Kendo UI aujourd'hui et commencer à développer vos applications plus rapidement.
Lancer mon test de l'interface utilisateur Kendo
Versions angulaire, réactive et vue
Vous recherchez des composants d'interface utilisateur pour prendre en charge des infrastructures spécifiques? Consultez la grille dans l'interface utilisateur Kendo pour Angular la grille dans l'interface utilisateur Kendo pour React ou la grille dans l'interface utilisateur Kendo pour Vue .
19659388] Les commentaires sont désactivés en mode prévisualisation.
Source link