communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Explication détaillée de la liaison des données d'arrière-plan de la table BootStrap JavaScript, du traitement des colonnes spéciales et des fonctions de tri

Explication détaillée de la liaison des données d'arrière-plan de la table BootStrap JavaScript, du traitement des colonnes spéciales et des fonctions de tri

黄舟
Libérer： 2017-05-28 10:29:35
original
2268 Les gens l'ont consulté

Cette section présente principalement la liaison de données d'arrière-plan, les fonctions spéciales de traitement des colonnes et de tri des colonnes de Bootstrap Le code est simple et facile à comprendre, très bon et a une valeur de référence. .C'est nécessaire Mes amis, veuillez vous y référer

Cette section présente principalement la liaison de données en arrière-plan de Bootstrap, le traitement spécial des colonnes et les fonctions de tri des colonnes

1. >

Généralement, lors de la programmation, il est rare d'utiliser des fichiers

json pour lier directement des données. Fondamentalement, nous utilisons le langage de programmation pour obtenir des données et effectuer la liaison de données.

Placer une Table

contrôle

<table id="table" ></table>
Copier après la connexion
Code pour appeler le

javascript

<script >
$(&#39;#table&#39;).bootstrapTable({
  url: &#39;tablejson.jsp&#39;,  //数据绑定，后台的数据从jsp代码
  search:true,      
  uniqueId:"Id",
  pageSize:"5",
  pageNumber:"1",
  sidePagination:"client",
  pagination:true,
  height:&#39;400&#39;,
  columns: [
  {
    field: &#39;Id&#39;,
    title: &#39;中文&#39;
  }, {
    field: &#39;Name&#39;,
    title: &#39;Name&#39;
  }
  , {
    field: &#39;Desc&#39;,
    title: &#39;Desc&#39;
  }
  ],
});
Copier après la connexion

2. Traitement des colonnes spéciales

Dans les applications pratiques, nous devons ajouter nos colonnes spéciales, telles que les colonnes d'opération, voir le code js suivant pour ajouter une colonne spéciale

. 
{
    field: &#39;#&#39;,
    title: &#39;control&#39;,formatter:function(value,row,index){
    var del=&#39;<a href="Delete!delete.action?Id=&#39;+row.Id+&#39;" rel="external nofollow" rel="external nofollow" >删除</a>&#39;;
    var updt=&#39;<a href="supdate.jsp?Id=&#39;+row.Id+&#39;" rel="external nofollow" rel="external nofollow" >修改</a>&#39;;
    var add=&#39;<a href="Include.jsp?Id=&#39;+row.Id+&#39;" rel="external nofollow" rel="external nofollow" >增加</a>&#39;
    return del+" "+updt+"&nbsp"+add;
    }
  }
Copier après la connexion
le code js est modifié en 


            

                
Derniers articles par auteur

                
            

            

                
Derniers numéros

                

                                        

                        

                            Case à cocher Bootstrap Vue <b-table> <b-form-checkbox>
                            J'essaie d'utiliser b-form-checkbox avec b-table. Essayez de récupérer l'ID du module séle...
                            

                                

                                     Depuis 2024-03-31 18:36:11
                                

                                

                                    
  0 

                                    
1

                                    
389

                                

                            

                        

                    

                    

                                    

            


            

                

                    
Rubriques connexes

                    Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal