communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > le corps du texte

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
2229 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 


        

            

                
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