DataGrid dans Easyui affiche des données sous forme de tableau et fournit une prise en charge fonctionnelle riche pour la sélection, le tri, le regroupement et l'édition de données. Datagrid est conçu pour réduire le temps de développement et empêcher les développeurs d'avoir des connaissances spécifiques. Il est léger et riche en fonctionnalités. La fusion cellulaire, le titre multicolonne, les colonnes gelées et le pied de page ne sont que quelques-unes des fonctionnalités.
1. Passez en revue le contenu de la section 4
Dans la section 4, nous avons utilisé EasyUi pour construire la barre de menu à gauche, et l'onglet correspondant apparaît à droite en cliquant sur l'option de menu. Dans cette section, nous utiliserons DataGrid pour terminer la section Tab à droite. Examinons d'abord le dernier fichier Aindex.jsp dans la section 4 (voir également le contenu de la section 4):
2. Plusieurs façons de créer des contrôles de données
Les données d'affichage DataGrid sont au format JSON, nous devons donc d'abord emballer les données obtenues à partir de l'arrière-plan au format Jason, puis la transmettre à la réception pour laisser afficher DataGrid. Dans cette section, nous n'obtiendrons pas de données à partir de l'arrière-plan. Préparez d'abord un fichier .json, qui contient des données au même format. Ensuite, nous laisserons Datagird Afficher, faciliterons d'abord la fonction d'affichage, puis demanderons les données d'arrière-plan.
Examinons d'abord le format de l'affichage DataGrid à partir du document de référence d'EasyUi, comme indiqué dans la figure ci-dessous:
Nous regardons le document de référence et nous constatons que l'espace DataGrid est créé via <baling>, et il existe trois façons de la créer:
Le premier: créez un dataGrid à partir d'un élément de table existant, définissant des colonnes, des lignes et des données dans HTML.
Le deuxième type: créez un contrôle de dataGrid via la balise <Bile>. Utilisez la balise <h> pour définir les colonnes dans le tableau.
Le troisième type: utilisez JavaScript pour créer un contrôle DataGrid.
Nous adoptons le troisième type, en utilisant JS pour créer un contrôle DataGrid. Tout d'abord, nous devons préparer un fichier qui stocke les données de format JSON. Il existe plusieurs fichiers JSON sous webroot / jQuery-Easyui-1.3.5 / Demo / dataGrid /. Nous sélectionnons un dataGrid_data1.json, le copiez dans le répertoire WebRoot, modifions les paramètres et nous afficherons les données dans ce fichier JSON plus tard. comme suit:
{"Total": 10, "Rows": [{"Code": "Fi-SW-01", "ProductName": "Koi", "Price": 10.00}, {"Code": "K9-DL-01", "ProductName": "Dalmation", "Price": 12.00}, {"Code": "RP-SN-01", "ProductName": "RattlesNake", "Price": 12.00}, {"Code": "RP-LI-02", "ProductName": "Iguana", "Price": 12.00}, {"Code": "FL-DSH-01", "ProductName": "Manx", "Price": FL-DSH-01 "," ProductName ":" Manx "," Prix ": 12.00}", "ProductName": "Manx", "Prix": 12.00}}, ", ProductName": "Manx", "Prix": 12.00} "," ProductName ":" Manx "," Prix ": 12.00}", "ProductName": "Manx", "Prix": 12.00} "," ProductName ":" Manx "," Prix ": 12.00. {"Code": "FL-DSH-01", "ProductName": "Manx", "Price": 12.00}, {"Code": "FL-DLH-02", "ProductName": "Persian", "Price": 12.00}, {"Code": "FL-DLH-02", "ProductName": "Persian", "Price": 12.00}, " {"Code": "AV-CB-01", "ProductName": "Amazon Parrot", "Price": 92.00}, {"Code": "AV-CB-03", "ProductName": "Amazon Parrot", "Price": 92,00}]} Nous pouvons voir que le format de données JSON est: "Key1": Value1, "Key2": Value2. Chaque valeur peut être un tableau et les nouvelles données Jason sont enregistrées dans le tableau.
Avec le fichier JSON, nous pouvons concevoir le contrôle DataGrid ensuite. L'ensemble du dataGrid est conçu dans Query.jsp, car le contenu à afficher est le contenu de Query.jsp. Jetons un coup d'œil à la page Query.jsp:
<% @ Page Language = "Java" Import = "Java.util. *" Pageencoding = "UTF-8"%> <! DocType Html public "- // w3c // dtd html 4.01 transitional // en"> <html> <adread> <% @ incluse File = "/ public / head.jspf"%> <script = "Text / Javas"> ">"> ">"> ">"> javas ">"> kavas ">"> "> javas"> ">"> javas ">"> "> javas"> ">"> javas ">"> "> javas"> "> kavas "> $ (function () {$ ('# dg'). dataGrid ({// L'adresse URL des données de la demande sera modifiée pour demander notre propre URL: 'datagrid_data.json', chargemsg: 'Chargement ......', QueryParams: {Type: ''}, // Paramètres //wiset: 300, fitColums: true, true, honomouy. ne sera pas une barre de défilement horizontale. Console.info ("index" + index + "," + row) if (index% 2 == 0) {return 'background-Color: #ffff;';} else {return 'background-Color: # ff0;'; Lorsque la largeur est supérieure à 250, la barre de défilement s'affiche, mais la colonne Frozen n'est pas dans la barre de défilement FrozenColumns: [[{champ: 'Checkbox', à cocher: TRUE}, {Field: 'Code', Title: 'Number', Width: 200} Le titre de colonne, qui s'affiche pour que les gens puissent voir les colonnes: [[{champ: 'ProductName', titre: 'Nom de catégorie', Width: 100, // Utiliser pour formater la valeur de la colonne actuelle, le retour est le formateur de données final: fonction (valeur, ligne, index) {return "<span>" + valeur + "</span>";; }}, {Field: 'Price', Title: 'Price', Width: 100, Styler: Function (Value, Row, Index) {// Définissez le style de la cellule actuelle, et la chaîne renvoyée est directement remise à l'attribut de style // Console.info ("Val:" + Value + ", Row:" + Row + ", index:" + index) if (valeur <20) {return 'Color:;;;; }}}]]}); }); </ script> </ head> <body> <table id = "dg"> </ table> </ body> </html>3. Propriétés du contrôle de dataGrid
Nous pouvons voir que si vous utilisez JS pour créer un contrôle de dataGrid, vous n'avez besoin que d'une balise <Bile>, qui se fait principalement dans JS. Les contrôles de DataGrid sont très puissants. Ici, nous faisons principalement des écrans de base. Pour plus d'autres fonctions, veuillez vous référer aux documents de développement d'EasyUi. Nous effectuons maintenant une analyse sur le fichier query.jsp ci-dessus:
Tout d'abord, le contrôle DataGrid a deux propriétés: l'une est la propriété DataGrid et l'autre est la propriété de colonne . Comme son nom l'indique, la propriété DataGrid est un attribut ajouté à l'ensemble du contrôle DataGrid, et la propriété de colonne est pour une certaine colonne. Il existe de nombreux attributs dans chacun, et seuls certains attributs de base et couramment utilisés sont effectués ici.
La chose la plus importante dans la propriété DataGrid est la propriété Colonnes, qui est un tableau qui peut créer plusieurs colonnes, voir la capture d'écran ci-dessous:
Jetons un coup d'œil aux détails de l'attribut des colonnes:
Dans l'attribut de colonne, le champ représente le nom de champ, correspondant à la clé des données JSON, puis le titre est le titre à afficher pour l'utilisateur. Voir le fichier query.jsp. Il existe d'autres attributs de base qui peuvent être référés au document EasyUI. Les deux propriétés les plus importantes et couramment utilisées dans les propriétés des colonnes sont le formateur et le styler, qui sont utilisés pour formater la valeur de la colonne actuelle et définissent les styles de cellules. Examinons principalement ces deux propriétés:
Analysons en détail comment utiliser ces deux propriétés de colonne dans l'attribut des colonnes dans Query.jsp ci-dessus:
{Field: 'ProductName', Titre: 'Nom de la catégorie', largeur: 100, // Utiliser pour formater la valeur de la colonne actuelle, le retour est le formateur de données final: fonction (valeur, ligne, index) {return "<span>" + valeur + "</span>"; // set pour mettre la souris sur et afficher la valeur de la valeur}}, {Field: 'Price', Title: 'Prix', Width: 100, Stlotler: Field: 'Price', title: ' Fonction (valeur, ligne, index) {// Définissez le style de la cellule actuelle, et la chaîne renvoyée est directement transmise à l'attribut de style // console.info ("Val:" + Value + ", Row:" + Row + ", index:" + index) if (valeur <20) {// Si la valeur est inférieure à 20 RETOUR 'COLOR: RED;';; // montre la valeur en rouge}}}Jetons ensuite un coup d'œil à certaines propriétés du contrôle DataGrid:
L'URL représente la source de données à afficher. Définir en tant que dataGrid_data.json ici signifie que la source de données est ce fichier JSON et est placée dans le répertoire WebRoot;
LoadMSG représente les informations affichées lors du chargement des données;
QueryParams signifie les paramètres passés à l'arrière-plan et ne peut pas être utilisé ici, car nous n'avons pas encore associé à l'arrière-plan, mais affichez uniquement un fichier JSON, qui sera utilisé plus tard;
Une fois que FitColums est réglé sur True, cela signifie que l'extension horizontale sera automatiquement élargie horizontalement et que la largeur de la grille adaptative sera adaptée. De cette façon, il n'y aura pas de barres de défilement dans la direction horizontale, et il n'est pas nécessaire de régler la largeur;
La largeur est la largeur. Si les données sont trop longues et ne peuvent pas être affichées, une barre de défilement apparaîtra dans la direction horizontale;
Une fois que Striped est réglé sur true, cela signifie que la traversée du zèbre s'affiche. Ceci est un style d'affichage. Essayez-le simplement;
Si Nowrap est défini sur true, cela signifie que lorsqu'il y a trop de données, il ne sera pas enveloppé dans les lignes, sinon en cas de trop de données sur une certaine ligne, ce sera laid;
Lorsque la pagination est définie sur true, cela signifie que la fonction de pagination est activée;
Lorsque le singlelelect est défini sur true, seules les lignes simples peuvent être vérifiées. La fonction de sélection toutes les fonctions n'est pas valide et est principalement utilisée pour les cases à cocher dans la colonne avant;
Frozencolums est de définir des colonnes congelées, et les colonnes fixées dans Frozencolums ne changeront pas la taille. Si {champ: 'Checkbox', Checkbox: true} est défini, cela signifie qu'il s'agit d'une colonne de case à cocher, qui est sélectionnée pour l'utilisateur. Si le singlelelect ci-dessus est défini, alors un seul peut être sélectionné, pas tous;
Rowstyler est le style de toutes les lignes. Les deux paramètres sont l'index de ligne et la ligne. Ce qui précède est défini que même les lignes sont blanches et que les lignes étranges sont jaunes.
Attendez ... il existe d'autres propriétés de contrôles DataGrid, vous pouvez vous référer à la documentation technique d'EasyUi, et je ne les expliquerai pas ici.
4. Effet de l'affichage des données dataGrid
D'accord, après avoir terminé Query.jsp, nous redémarrons Tomcat, puis entrez l'arrière-plan, cliquez sur la gestion des catégories dans la barre de menu à gauche, et un onglet de gestion de catégorie apparaîtra à droite, puis les données JSON que nous avons spécifiées seront affichées. Ces données Jason sont nous-mêmes placées dans le répertoire WebRoot. Plus tard, nous intégrerons JSON et Struts pour obtenir dynamiquement les données JSON transmises à partir de l'arrière-plan.
(Remarque: En fin de compte, je fournirai le téléchargement du code source de l'intégralité du projet! Tout le monde est le bienvenu pour collecter ou partager)
Adresse originale: http://blog.csdn.net/eson_15/article/details/51322262
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.