Ausführliche Erläuterung der Hintergrunddatenbindung der JavaScript-BootStrap-Tabelle, der speziellen Spaltenverarbeitung und der Sortierfunktionen-js-Tutorial-php.cn

Ausführliche Erläuterung der Hintergrunddatenbindung der JavaScript-BootStrap-Tabelle, der speziellen Spaltenverarbeitung und der Sortierfunktionen

黄舟

Freigeben： 2017-05-28 10:29:35

Original

2263 Leute haben es durchsucht

In diesem Abschnitt werden hauptsächlich die Hintergrundinformationen zur Datenbindung sowie die speziellen Spaltenverarbeitungs- und Spaltensortierungsfunktionen von Bootstrap vorgestellt. Der Code ist einfach und leicht zu verstehen, sehr gut und hat Referenzwert . Es wird benötigt Freunde, bitte lesen Sie es

In diesem Abschnitt werden hauptsächlich die Hintergrunddatenbindung, die spezielle Spaltenverarbeitung und die Spaltensortierung vorgestellt

1 >

Im Allgemeinen kommt es beim Programmieren selten vor,

json-Dateien zum direkten Binden von Daten zu verwenden. Grundsätzlich verwenden wir Programmiersprache, um Daten zu erhalten und Datenbindungen durchzuführen.

Platzieren Sie eine Tabelle

Steuerung

<table id="table" ></table>

Nach dem Login kopieren

Code zum Aufrufen von

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;
  }
  ],
});

Nach dem Login kopieren

2. Spezielle Spaltenverarbeitung

In praktischen Anwendungen müssen wir unsere speziellen Spalten hinzufügen, z. B. Operationsspalten. Sehen Sie sich den folgenden js-Code an, um eine spezielle Spalte hinzuzufügen

{
    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;
    }
  }

Nach dem Login kopieren

js-Code wurde geändert zu


            
                Neueste Artikel des Autors
                
                                            
                            
                                
                                Videomaterial zum Aufbau Ihres eigenen PHP-Frameworks von Grund auf
                            
                            2023-03-15 16:54:01
                        
                                            
                            
                                
                                Beispielanalyse, wie PHPMailer das QQ-Postfach verwendet, um die E-Mail-Versandfunktion abzuschließen
                            
                            2023-03-15 12:26:02
                        
                                            
                            
                                
                                Einführung in den Empfang von E-Mails in IMAP in PHP
                            
                            2023-03-14 18:58:01
                        
                                            
                            
                                
                                Beispiel für die schnelle Implementierung der Array-Deduplizierung in PHP
                            
                            2023-03-14 11:30:01
                        
                                            
                            
                                
                                Zusammenfassung der Verwendung aller Attribute des -Tags in HTML
                            
                            1970-01-01 08:00:00
                        
                                            
                            
                                
                                Zusammenfassung der PHP-Grundkenntnisse (notwendig für Anfänger zum Einstieg)
                            
                            2023-03-16 15:20:01
                        
                                            
                            
                                
                                Einführung in die Verwendung von typeof in JavaScript
                            
                            1970-01-01 08:00:00
                        
                                            
                            
                                
                                Einführung in die Verwendung der Bestätigungsmethode () in JavaScript
                            
                            1970-01-01 08:00:00
                        
                                            
                            
                                
                                Eine detaillierte Einführung in das HTML5-Platzhalterattribut
                            
                            1970-01-01 08:00:00
                        
                                            
                            
                                
                                So implementieren Sie Einzelauswahl, Mehrfachauswahl und Rückwärtsauswahl in Formularen in ReactJS
                            
                            1970-01-01 08:00:00
                        
                                    
            
            
                Aktuelle Ausgaben
                
                                        
                        
                            Bootstrap Vue-Kontrollkästchen <b-table> <b-form-checkbox>
                            Ich versuche, die B-Form-Checkbox mit der B-Tabelle zu verwenden. Versuchen Sie, die ausge...
                            
                                
                                     Aus 2024-03-31 18:36:11
                                
                                
                                      0 
                                    1
                                    389
                                
                            
                        
                    
                    
                                    
            

            
                
                    verwandte Themen
                    Mehr>
                    
                
                
                    
                                                
                             
                            So erhalten Sie die Länge eines Arrays in js 
                        
                                                
                             
                            js aktuelle Seite aktualisieren 
                        
                                                
                             
                            js Rundung 
                        
                                                
                             
                            js-Methode zum Löschen des Knotens 
                        
                                                
                             
                            JavaScript-Escape-Zeichen 
                        
                                                
                             
                            So generieren Sie Zufallszahlen in js 
                        
                                                
                             
                            So aktivieren Sie JavaScript 
                        
                                                
                             
                            Detaillierte Erläuterung der Symbolklasse in JS