Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Hauptteil

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

黄舟
Freigeben： 2017-05-28 10:29:35
Original
2230 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 


        

            

                
Beliebte Tutorials

                Mehr>
                
            

            

                

                    
Verwandte Tutorials 

                    
Beliebte Empfehlungen

                    
Aktuelle Kurse

                

                
                
                
            

            
        


        

            

                
Neueste Downloads

                Mehr>
                
            

                        
            

                

                    
Web-Effekte 

                    
Quellcode der Website

                    
Website-Materialien

                    
Frontend-Vorlage

Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！

Über uns Haftungsausschluss Sitemap

© php.cn All rights reserved