Résumé de l'utilisation de la table bootstrap
Bootstrap-Table est un plug-in de table écrit sur la base de Bootstrap-Table, spécialement utilisé pour afficher des données. Bootstrap est de Twitter et est actuellement le cadre frontal le plus populaire. Bootstrap est basé sur HTML, CSS et JavaScript, et présente les avantages d'un développement frontal simple, flexible et rapide. Je ne décrirai pas la même chose que Bootstrap ici. Cet article se concentrera sur l'explication d'une partie de ma compréhension de l'utilisation de la table bootstrap dans mon projet et de la façon de l'apprendre.
Tout d'abord, permettez-moi d'expliquer la relation entre jQuery, bootstrap et bootstrap-table. De nombreuses parties du code bootstrap impliquent jQuery, c'est-à-dire que Bootstrap dépend de jQuery, et la table Bootstrap que nous voulons utiliser est créée sur la base de bootstrap, donc avant d'utiliser Bootstrap-Table, vous devez vous référer aux fichiers JS et CSS associés de jQuery et Bootstrap.
Ensuite, les caractéristiques de la table bootstrap: avec jQuery-UI, JQGrid et autres plug-ins de table, la table bootstrap est plate et légère. Il est plus que suffisant pour un affichage de données léger, et le support pour les tables père-fils et ainsi de suite est également très bon. La chose la plus importante est qu'elle peut être combinée de manière transparente avec d'autres balises bootstrap.
D'accord, c'est tout pour l'introduction. Je téléchargerai directement le code et les rendus, puis je donnerai des discussions supplémentaires.
<! Doctype html public "- // w3c // dtd xhtml 1.0 strict // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <read> <titre> Bootsstrap-Table </ title> <meta http-équiet " contenu = "text / html; charset = utf-8" /> <meta name = "Description" content = "" /> <meta name = "keywords" contenu = "" /> <script type = "text / javascript" src = "./ js / javascript" src = "./ bootstrap / js / bootstrap.min.js"> </ script> <script type = "text / javascript" src = "./ bootstrap-table / bootstrap-table-all.js"> </ script> <script type = "text / javascript" src = "./ bootstrap-table / locale / bootstrap-table-zh-cn.js"> </ script> <link rel = "stylesheet" type = "text / css" href = "./ bootstrap / css / bootstrap.min.css"> <ling href = "./ bootstrap-table / bootstrap-table.min.css"> </ head> <script linguisse = "javascript"> </ script> <body> <v> <div> <div> <div> <h3> Ajout du compte enseignant </h3> </ div> <div> <div id = "Buttonbar"> <bouton ID = "btn_edit" Type = "Button"> <panderbar "> <bouton ID =" btn_edit " aria-hidden = "true"> </ span> modifier </ bouton> <button id = "btn_delete" type = "Button"> <span aria-hidden = "true"> </ span> delete </ button> </ div> <table id = "enseign_table" data-toggle = "table" data-url = "./ data.php" data-method = "post" data-query-params = "QueryParams" data-toolbar = "# toolbar" data-pagination = "true" data-search = "true" data-show-reh = "true" data-show-toggle = "tr> data-show-columns =" true "data-page-size =" 5 "> <tr> <th data-field =" name "> User le compte utilisateur </ th> Mot de passe </ th> <th data-field = "t_name"> Nom du professeur </th> </tr> </s table> </div> </div> </div> </ody>
Image de reproduction:
Ok ensuite, analysons la signification du code ci-dessus dans les étapes.
1. Tout d'abord, nous devons télécharger le package de table bootstrap jQuery correspondant. Il y a des tutoriels en ligne, et nous ne décrirons pas comment le télécharger ici.
D'après la référence aux noms de fichiers JS et CSS dans la balise <A-Head> ci-dessus, nous pouvons voir que nous devons introduire ces fichiers.
Remarque Bootstrap, il n'y a que trois dossiers dans le package comprimé compilé.
1.JQUERY-2.2.1.js --- Le dernier fichier jQuery
2.bootstrap.min.js --- Le dernier fichier compressé bootstrap.min.js dans bootstrap / js
3.bootstrap.min.css --- Le dernier fichier compressé bootstrap.min.css dans bootstrap / css
4. Bootstrap-Table-all.js --- Le dernier fichier JS sous Bootstrap-Table
5.bootstrap-table-zh-cn.js --- Le dernier fichier initial chinois sous bootstrap-table / local
6.bootstrap-table.min.css --- Le dernier fichier compressé CSS sous Bootstrap-Table
Ces six doivent être configurés, parmi lesquels Bootstrap-Table-Zh-Cn.js est un fichier JS qui prend en charge le chinois. Ce n'est que lorsque ce fichier sera chargé que certaines de nos informations d'affichage de table seront définies sur chinois.
Expérimentons l'effet d'affichage après avoir retiré le bootstrap-table-zh-cn.js.
Bien sûr, nous pouvons également définir les informations d'affichage sur d'autres langues, il suffit de remplacer Bootstrap-Table-Zh-cn.js par des fichiers JS dans d'autres langues. Il y a une prise en charge dans le package bootstrap-table.
Nous pouvons également consulter le code source de ce fichier. Jetons un coup d'œil et vous saurez ce que fait ce fichier.
/ ** * TABLE BOOTSTRAP Traduction chinoise * Auteur: Zhixin Wen <[email protected]> * / (fonction ($) {'Utiliser Strict'; $ .fn.bootstraptable.locales ['zh-cn'] = {formatloadingMessage: function () {return 'works pour charger les données, veuillez vous faire (PageNumber) {return 'afficher par page' + pageNumber + 'enregistrement'; {return 'Aucun enregistrement de correspondance a été trouvé'; 'Refresh';}, FormAtToggle: Fonction
Vous pouvez voir en un coup d'œil qu'après avoir cité le fichier JS, lors du chargement, vous priez pour l'effet d'initialisation. Convertissez certaines informations affichées en contenu moyen correspondant.
2. Ensuite, parlons du code HTML pertinent. En fait, il s'agit de la seule partie du code HTML lié à Bootstrap-Table.
<table id="teacher_table" data-toggle="table" data-url="./data.php" data-method="post" data-query-params="queryParams" data-toolbar="#toolbar" data-pagination="true" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" Data-Page-Size = "5"> <Thead> <Tr> <th Data-Field = "Name"> Compte d'utilisateur </th> <th data-field = "pwd"> Mot de passe utilisateur </t> <th data-field = "t_name"> Nom du professeur </th> </tr> </phead> </plow>
Oui, il n'y a qu'une seule balise de table, plus beaucoup de paramètres, et la forme de la table est implémentée via ces paramètres. Vous devez savoir quels styles et fonctions sont là. Juste en les énumérant, ce sera certainement une goutte dans le seau. Il est préférable d'enseigner aux gens comment pêcher que d'enseigner aux gens comment pêcher. Je vais vous dire où trouver ces catégories. Le sens de la classe. Nous pouvons aller sur le site Web professionnel de Bootstrap-Table pour trouver un lien que j'utilise. Cliquez pour ouvrir le lien. S'il n'est pas valide, vous pouvez dire directement http://bootstrap-table.wenzhixin.net.cn/documentation
Bien sûr, vous pouvez également voir quelques exemples dans l'exemple
Comment vérifier la signification des paramètres correspondants? Lorsque vous voyez l'image ci-dessus, le côté droit est quelques options, vous pouvez choisir les attributs de table, les attributs de ligne et les événements de liaison que vous pouvez définir.
Cliquez sur les options de table d'attribut de table pour afficher la figure suivante. Tout d'abord, vous pouvez voir que le nom de titre est utilisé pour JS pour créer des tables, et l'attribut est utilisé pour HTML afin de créer des tables.
Pour donner quelques exemples, il y a plusieurs paramètres dans notre code ci-dessus. Ce qu'ils veulent dire, c'est:
Data-URL: L'URL pour demander des données.
Méthode des données: méthode de demande.
He-Height: Réglez la hauteur de la table
data-query-params = "queryparams": paramètres
Data-Toolbar = "# Toolbar": Définissez le conteneur auquel le bouton est ID est la barre d'outils.
data-pagination = "true": définissez s'il faut afficher le numéro de page
data-search = "true": définir la zone de recherche
data-show-rehred = "true": définissez le bouton de rafraîchissement
data-show-toggle = "true": définissez le format d'affichage des données
Maintenant, vous devez comprendre comment le vérifier!
Notez que le code suivant est le noyau, <tr> représente une grille dans une ligne, et Data-Field = "Name" représente le nom de données dans une grille d'affilée. Vous pouvez comprendre le champ de données comme ID, car les données transmises à partir de l'arrière-plan se distinguent en fonction du champ de données et qui est envoyée.
<tr> <th data-field = "name"> Compte d'utilisateur </th> <th data-field = "pwd"> mot de passe utilisateur </th> <th data-field = "t_name"> Nom du professeur </th> </tr> </thead>
Pour ceux qui ne veulent pas utiliser la génération statique HTML, vous pouvez également utiliser JS pour générer une génération dynamique. Pour donner une démo de code, pour définir les paramètres pertinents, vous n'avez qu'à utiliser le nom: Options mentionnées ci-dessus. Par exemple, définissez le fichier de destination Data-URL pour la demande de données dans HTML: "./data.php" dans js, il suffit de déclarer URL: "./data.php"
$ ('# Table'). Bootstraptable ({Columns: [{champ: 'id', titre: 'item id'}, {champ: 'name', titre: 'item name'}, {champ: 'Price', titre: 'Prix'}], données: [id: 1, name: 'item 1', '$ 1'}, {{id: 2, name: ' }]});3. De cette façon, que font les autres codes, une partie du code utilise le panneau de Boostrap pour formater, c'est-à-dire pour intégrer le tableau dans le panneau. L'effet de la table bootstrap après le code du panneau supprimé est comme ceci
C'est juste qu'il n'y a pas de panneau.
4. Le format de transmission de données, les données reçues par Bootstrap-Table sont au format JSON par défaut
Vous pouvez voir ci-dessus que l'adresse de fond demandée est: "./data.php", jetons un œil à son contenu
<? Php $ Résultats [0] = array ("name" => "aoze", "pwd" => "20132588", "t_name" => "zhang san"); $ résultats [1] = array ("name" => "lisi", "pwd" => "1234", "t_name" => "li si"); $ résultats [2] = array ("name" => "wangwu", "pwd" => "44455", "t_name" => "wang wu"); echo json_encode ($ résultats) ;?>C'est très simple! Bien sûr, ce ne sont que quelques données de test que j'ai écrites à la main, et bien sûr, elle est trouvée dans la base de données du projet.
5. Bien sûr, il ne suffit pas d'afficher des données. Nous devons interagir avec le tableau, tels que les fonctions de suppression et de modification. Pour le moment, nous devons utiliser certains événements de la table bootstrap. Dans le cas ci-dessus, j'ai intégré deux composants de deux bouton dans le tableau comme indiqué sur la figure
La méthode d'implémentation de cette mosaïque consiste à ajouter une telle ligne Data-Toolbar = "# Toolbar" aux propriétés du tableau.
Cela signifie ajouter une étiquette avec ID comme barre d'outils à une ligne dans la barre d'outils.
Dans ma mise en œuvre de ce projet, vous devez utiliser ces deux boutons pour effectuer des opérations correspondantes sur la ligne sélectionnée dans le tableau.
Écrivez l'événement correspondant, liez d'abord un événement de déclenchement sélectionné à la table, puis obtenez les données de la ligne sélectionnée via la fonction GetSelectrow.
$ ('# Teacher_Table'). On ('click-row.bs.table', fonction (e, row, élément) {$ ('. Success'). SuppeClass ('Success'); // supprimer la ligne précédemment sélectionnée, sélectionner le style $ (élément) .addClass ('Success'); // ajouter le style de réussite actuellement sélectionné pour la différence}); fonction getSelectedRow () {var index = $ ('# enseign_table'). find ('tr.success'). data ('index'); // obtenir la ligne sélectionnée return $ ('# enseignante_table'). BootStrapable ('GetData') [index]; // renvoie toutes les données dans la ligne sélectionnée}Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation de la table bootstrap
Tutoriel d'utilisation du plug-in bootstrap
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.