Bootstrap-Tabellen-Plug-in adaptive feste Tabellenheader (super nützlich)

Zunächst ist es eine einfache Seitenform. Sie können HTML -Tabellen auf die übliche Weise zum Zeichnen von Tabellen erstellen und dann spezielle Stile und andere Vorgänge über JS steuern (der Vorteil besteht darin, dass die Tabellen intuitiver sind und es bequem ist, die Tischstile usw. anzupassen, und die Geschwindigkeit schnell ist).

Natürlich können Sie einfach ein Tabellen -Tag auf die Seite setzen, und alle nachfolgenden Daten und Stile können über JS gesteuert werden. Ich werde später sagen (die Vorteile sind bequem, Daten zu steuern und zu ändern, insbesondere das von der Ajax -Methode erhaltene JSON -Format, aber das Anpassen des Stils ist lästiger).

PS: Dies ist die offizielle Website des Plug-Ins, die englische APIs und Beispiele enthält: http://bootstrap-table.wenzhixin.net.cn/zh-cn/

Bevor Sie verwenden, stellen Sie bitte die verwandten CSS-, JS-, JQuery- und Bootstab-Table-CSS-CSS-CSS von Bootstrap vor, mindestens diese 5 grundlegenden Dateien.

1. HTML -Formmethode

Beispiel 1: Anforderungen, einfache Tabellendatenpräsentation, der Header ist zwei Zeilen, und es gibt einen Pfeil, der auf und ab schwebt

Analyse: Es ist sehr einfach. Sie brauchen nur HTML, um es zu implementieren. Zeichnen Sie gemäß der regulären Tabelle und fügen Sie die eindeutigen benutzerdefinierten Attribute von Bootstrap-Table hinzu. Beachten Sie, dass wenn Sie JS nicht verwenden, bitte Daten zum Erstversand des ersten Tabellen-Tags hinzufügen.

HTML -Code:

 <div><table data-toggle="table" data-height="268" id="tableL01"><thead><tr><th data-field="lhc" data-rowspan="2" data-align="center" data-valign="middle">to consume</th><th data-field="dr" data-colspan="3" data-align="center" data-valign="middle">this Tag </th> <th data-field = "bz" data-colspan = "3" data-align = "center" data-valign = "Middle"> Diese Woche </th> <th data-field = "von" data-colspan = "3" data-Align = "center" data-valign = "Middle"> In diesem Monat </th> </tR> <tR> <TR> <TR> <TR> <TR> <TR> <TR> <TR> <TR> <TR> <TR> <TR> <TR> <TR> <TR> <TR> </TR> </TR> </TR> <-TR> <-TR> <-TR> <-TR> <-TR> <-TR> <-TR> <-TR> <-TR> <-TR> data-valign="middle">This issue</th><th data-field="drtb" data-align="center" data-valign="middle">Year-year</th><th data-field="drhb" data-align="center" data-valign="middle">Moon-month</th><th data-field="bzbq" data-align="center" data-Valign = "Middle"> Dieses Problem </Th> <th data-field = "BZTB" data-Align = "Center" data-Valign = "Middle"> Jahrjahr </th> <th Data-Field = "bzhb" data-align = "center" Data-Valign = "Middle"> Moon-month </th> <Th> <Th> <Th> <Th> <Th> <th Data-field = "bybQ" Data-Aligna "-Daten-Align-" -Daten-Align-Align-Mond-Field. data-Valign = "Middle"> Dieses Problem </Th> <th data-field = "bytb" data-align = "center" data-Valign = "Middle"> Jahr-Jahr </th> <th data field volume</td><td>21341</td><td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td><td><i class='glyphicon glyphicon-arrow-up'></i>0.21</td><td>334322</td><td><i class = 'glyphicon glyphicon-arrow-down'> </i> 1.13 </td> <td> <i class = 'glyphicon glyphicon-arrow-up'> </i> 4.21 </td> <td> 3125113 </td> <td> <i class = 'glyphe glyphicon-arrow-down'></i>2.21</td><td><i class='glyphicon glyphicon-arrow-up'></i>2.94</td></tr><tr><td>Incoming coal volume</td><td>76573</td><td><i class='glyphicon glyphicon-arrow-down'></i>4.21</td><td><i class='glyphicon glyphicon-arrow-down'></i>4.21</td><td><i class='glyphicon glyphicon-arrow-up'></i>1.45</td><td>234534</td><td><i class = 'glyphicon glyphicon-arrow-down'> </i> 4.35 </td> <td> <i class = 'glyphicon glyphicon-arrow-up'> </i> 2.75 </td> <td> 44225 </td> <td> <i class = 'glyphe Glyphicon-Arrow-Down '> </i> 0,74 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-up '> </i> 3.45 </td> </tr> <tr> <td> Kohlekonsum </td> <Td> 43363 </td> <td> <icly =' glyphicon </td> <td> <icly = 'klassist Glyphicon-Arrow-Down '> </i> 0,31 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-up '> </i> 0,21 </td> <td> 32422 </td> <i class =' glyphicon-glyphicon-arrow-down ' class = 'glyphicon glyphicon-arrow-down'> </i> 1.13 </td> <td> <i class = 'Glyphicon Glyphicon-arrow-up'> </i> 4.21 </td> <td> 13345 </td> <td> <i class = 'glyphicon Glyphicon-Arrow-Down '> </i> 2.21 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-up '> </i> 2,94 </td> </tr> <tr> <Td> Kohlevolumen </td> <Td> 34624 </td> </td> <td> </td> <td> 34624 </td> <td> </td> </td> <td> <td> 34624 </td> <td> </td> </td> <iclyphicon </td> <td> <iclyphicon </td> <td> <iclyphicon </td> </td> <td> <i Clyphicon </td> <td> <I. Glyphicon-Arrow-Down '> </i> 4.35 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-up '> </i> 1,23 </td> <td> 452346 </td> <i class =' glyphicon-illyphicon-arrow-down ' class = 'glyphicon glyphicon-arrow-up'> </i> 0.05 </td> <td> 94524 </td> <td> <i class = 'glyphicon glyphicon-arrow-down'> </i> 2.21 </td> <td> <i class = 'glyphocon-down glyphicon-arrow-up'></i>2.94</td></tr><tr><td>Coal consumption</td><td>21341</td><td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td><td><i class='glyphicon Glyphicon-Arrow-up '> </i> 0.21 </td> <td> 334322 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Down '> </i> 1,13 </td> <i class =' glyphicon-illyphicon-arrow-down ' class = 'glyphicon glyphicon-arrow-up'> </i> 4.21 </td> <td> 3125113 </td> <td> <i class = 'glyphicon glyphicon-arrow-down'> </i> 2.21 </td> <td> <i class = 'glyphocon-down glyphicon-arrow-up'></i>2.94</td></tr><tr><td>Coal consumption</td><td>21341</td><td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td><td><i class='glyphicon Glyphicon-Arrow-up '> </i> 0.21 </td> <td> 334322 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Down '> </i> 1.13 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-up '> </i> 4,21 </td> <td> 3125113 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Down '> </i> 2,21 </td> <td> <i class =' Glyphicon glyphicon-arrow-down ' class='glyphicon glyphicon-arrow-up'></i>2.94</td></tr><tr><td>Coal consumption</td><td>21341</td><td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td><td><i class='glyphicon Glyphicon-Arrow-up '> </i> 0.21 </td> <td> 334322 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Down '> </i> 1,13 </td> <i class =' glyphicon-illyphicon-arrow-down ' class = 'glyphicon glyphicon-arrow-up'> </i> 4.21 </td> <td> 3125113 </td> <td> <i class = 'glyphicon glyphicon-arrow-down'> </i> 2.21 </td> <td> <i class = 'glyphocon-down glyphicon-arrow-up'></i>2.94</td></tr><tr><td>Coal consumption</td><td>21341</td><td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td><td><i class='glyphicon Glyphicon-Arrow-up '> </i> 0.21 </td> <td> 334322 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Down '> </i> 1.13 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-up '> </i> 4,21 </td> <td> 3125113 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Down '> </i> 2,21 </td> <td> <i class =' Glyphicon glyphicon-arrow-down ' class='glyphicon glyphicon-arrow-up'></i>2.94</td></tr><tr><td>Coal consumption</td><td>21341</td><td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td><td><i class='glyphicon Glyphicon-Arrow-up '> </i> 0.21 </td> <td> 334322 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Down '> </i> 1,13 </td> <i class =' glyphicon-illyphicon-arrow-down ' class = 'glyphicon glyphicon-arrow-up'> </i> 4.21 </td> <td> 3125113 </td> <td> <i class = 'glyphicon glyphicon-arrow-down'> </i> 2.21 </td> <td> <i class = 'glyphocon-down glyphicon-arrow-up'></i>2.94</td></tr><tr><td>Coal consumption</td><td>21341</td><td><i class='glyphicon glyphicon-arrow-down'></i>0.31</td><td><i class='glyphicon Glyphicon-Arrow-up '> </i> 0.21 </td> <td> 334322 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Down '> </i> 1.13 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-up '> </i> 4.21 </td> <td> 3125113 </td> <td> <i class =' Glyphicon Glyphicon-Arrow-Down '> </i> 2.21 </td> <td> <i class =' Glyphiconcicon Glyphicon-Arrow-up '> </i> 2.94 </td> </tbody> </table> </div>

Beispiel 2: Anforderungen: Es gibt eine benutzerdefinierte Zelle, die nach der zweiten Tabelle den Fortschritt anzeigt, und die erste Zeile erfordert eine statistische Gesamtanzeige. Diese beiden Funktionen erfordern die Verwendung von JS, um benutzerdefinierte Zeilen und Spalten festzulegen.

HTML -Code:

 <Div> <Tabelle data-toggle = "table" data-height = "268" id = "tabel02"> <thead> <tr> <th data-field = "id" data-align = "zentrum" data-Valign = "Middle"> Seriennummer </th> <th Data-Field = "gys" data-align = "center" data-valign = "middle". data-align="center" data-valign="middle">Variety</th><th data-field="rz" data-align="center" data-valign="middle">Carbon value</th><th data-field="mj" data-align="center" data-valign="middle">Coal price</th><th data-field="bmdj" data-align="center" data-valign="middle">Unit coal</th><th data-field="drlm" data-align="center" data-valign="middle">Cumulative coal</th><th data-field="ljlm" data-align="center" data-valign="middle">Cumulative coal</th><th data-field="yjhl" data-align="center" data-valign="middle">monthly planned volume</th><th data-field="yjhjd" data-align="center" data-valign="middle" data-formatter="progress">monthly planned completion progress</th></tr></thead><tbody><tr><td>2</td><td>Shuangxin Mining </td> <td> Low-Sulfur Kohle </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> 30000 </td> <td> 22%</td> </tr> <Td> </td> </td> </tr> <td> 3 </td> </td> </tr> <td> 3 </td> </yitai Ltd. sulfur coal</td><td></td><td></td><td></td><td>20041.86</td><td>90000</td><td>100%</td></tr><td>5</td><td>Aidi Energy</td><td>Low sulfur coal</td><td></td><td></td><td></td><td>5191.08</td><td>30000 </td><td>0%</td></tr><tr><td>6</td><td>Hengtai Coal</td><td>Medium and high sulfur coal</td><td></td><td></td><td></td><td></td><td>18265.56</td><td>0</td><td>22%</td></tr><tr><td>7</td><td>Shuangxin Mining</td><td>Low Schwefelkohle </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> 30000 </td> <td> </td> </tr> </tr> </td> 8 </td> </td> </td> </tr> </td> 8 </td> </td> </td> </tr> </td> 8 </td> </td> </td> </tr> </td> 8 </td> </td> </td> </tr> </td> 8 </td> </td Mining </td> <td> Low-Sulfur coal</td><td></td><td></td><td></td><td></td><td></td><td>6686.08</td><td>30000</td><td>22%</td></tr><tt><td>9</td><td>Shuangxin Mining</td><td>Low-sulfur coal</td><td></td><td></td><td></td><td></td><td>6686.08</td><td>30000</td><td>22%</td></tr></tbody></table></div>

JS -Code:

 // die Variable deklarieren, die verwendet wird, um die Gesamtsumme (akkumulierter Kohle, monatlicher Plan) zu zählen, var yjharr = []; var ljlMarr = []; // Custom Spalte Function Progress (Wert, Zeile) {var width = parseInt (row.yjhjd); var red = '#e63737'; Blue = ' #b6ccf4'; yjharr.push (row.yjhl); (Breite> = 100? Rot: blau)+"; '>"+Wert+"</span> </div>"} // Methode zur Berechnung der Gesamtwertfunktion yjhtotal () {var subyjh = 0; var subljlm = 0; var row = []; für (var (var i = 0; i <yjharr.length; i ++) {if (yjharr [i] == "") {yjharr [i] = 0;} subyjh+= parsefloat (yjharr [i]);} für (var i = 0; i <yjharr.length; i ++) {if (yjharr [i] == "") {yjharr [i] = 0;} subyjh+= parsefloat (yjharr [i]);} für (var J = 0; 1, Gys: 'Total', PZ: '', Rz: '', MJ: '', Bmdj: '', Drlm: '', Ljlm: Subljlm. Reihe}

Analyse: Benutzerdefinierte Zeilen und Spalten müssen data-formatter = 'Methodame' hinzufügen, wobei die Parameterzeile in der Progress () -Methode ausgeführt wird, sobald jede Zeile generiert wird und das Objekt der Zeile in die Tabelle übergeben wird.

Zwei: JS -Methode

Mit dieser Methode ist es sehr bequem, Parameter für die Tabelle festzulegen, was sehr bequem zu verarbeiten ist, insbesondere bei der Festlegung der Anforderungsmethode und -adresse. Dieses Projekt ist jedoch vorerst nur eine statische Seite. Bitte schreiben Sie die Daten in Zukunft.

Beispiel 1: Gleich wie oben

HTML:

 <Div> <table id = "tabel01"> </table> </div>

JS:

 // Tabellen -Plugin (Tabelle 1) startet $ ('#Tablel01'). 'Day', colspan: 3}, {Align: 'Center', Valign: 'Middle', Field: 'Bz', Titel: 'Diese Woche', Colspan: 3}, {Align: 'Center', Valign: 'Middle', Field: 'By', Titel: 'This Month', Colspan: 3}], [{{{{{{{{Align “, 'Middle', 'Middle', Field:: issue'}, {align:'center',valign:'middle',field: 'drtb',title: 'year-on-year',formatter:trend},{align:'center',valign:'middle',field: 'drhb',title: 'momentum',formatter:trend}, {align:'center',valign:'middle',field: 'bzbq',title: 'this issue'}, {align:'center',valign:'middle',field: 'bztb',title: 'Year-on-year',formatter:trend},{align:'center',valign:'middle',field: 'bzhb',title: 'Moon-month',formatter:trend},{align:'center',valign:'middle',field: 'bybq',title: 'This issue'},{align:'center',valign:'middle',field: 'bytb',title: 'Year-on-year',formatter:trend},{align:'center',valign:'middle',field: 'bytb',title: 'Year-on-year',formatter:trend},{align:'center',valign:'middle',field: 'byhb', title: 'Mono-monat', Formatter: Trend}], Daten: [{ID: 1, LHC: 'Coming stock',drbq:'21341',drtb:'0.21',drhb:'0.33',bzbq:'35624',bztb:'1.62',bzhb:'3.16',bybq:'42613',bytb:'2.78',byhb:'1.59'},{id:2,lhc:'coming stock ', drbq:' 21341 ', drtb:' 0,21 ', d rhb:' 0,33 ', bzbq:' 35624 ', BZTB:' 1,62 ', Bzhb:' 3.16 ', Bybq:' 42613 ', Bytb: 2,78', Byhb: 1,59 '}, {Id stock ', drbq:' 21341 ', drtb:' 0,21 ', drhb:' 0,33 ', bzbq:' 35624 ', bZtb:' 1,62 ', bzhb:' 3.16 ', bybq:' 42613 ', bytb: 2,78', byhb: '1,59'}, {{{{{{{{{{{{{{{{{{{{{{° C. stock ', drbq:' 21341 ', drtb:' 0,21 ', drhb:' 0,33 ', bzbq:' 35624 ', bZtb:' 1,62 ', bzhb:' 3,16 ', bybq:' 42613 ', bytb: 2,78', byhb: '1.59'}, {{{{° C. stock ', drbq:' 21341 ', drtb:' 0,21 ', drhb:' 0,33 ', bzbq :::' 35624 ', BZTB:' 1,62 ', Bzhb:' 3.16 ', Bybq:' 42613 ', Bytb:' 2,78 ', Byhb:' 1,59 ',' Idtb: '2,78', BYHB: stock ', drbq:' 21341 ', drtb:' 0,21 ', drhb:' 0,33 ', bzbq:' 35624 ', BZTB:' 1,62 ', Bzhb:' 3.16 ', Bybq:' 42613 ', Bytb: 2,78', by '1,59'}, stock ', drbq:' 21341 ', drtb:' 0,21 ', drhb:' 0,33 ', bzbq:' 35624 ', bZtb:' 1,62 ', bzhb:' 3.16 ', bybq:' 42613 ', bytb: 2,78', byhb: '1.59'}, {{{{° C. stock ', drbq:' 21341 ', drtb:' 0,21 ', drhb:' 0,33 ', bzbq:' 35624 ', BZTB:' 1 stock ', drbq:' 21341 ', drtb:' 0,21 ', drhb:' 0,33 ', bzbq:' 35624 ', bZtb:' 1,62 ', bzhb:' 3,16 ', bybq:' 42613 ', bytb: 2,78', byhb: '1.59'}, {id ', lhc: b stock ', d rbq:' 21341 ', drtb:' 0,21 ', drhb:' 0,33 ', bzbq:' 35624 ', bZtb:' 1,62 ', bzhb:' 3,16 ', Bybq: 42613', Bytb: 2,78 ', Byhb:' 1,59 '},', BYHB: stock ', drbq:' 21341 ', drtb:' 0,21 ', drhb:' 0,33 ', bzbq:' 35624 ', bZtb:' 1,62 ', bzhb:' 3.16 ', bybq:' 42613 ', bytb: 2,78', byhb: 1,59 '}, {{{12,', byhb: '1,59'}, {{{{{12, ', byhb:' 1,59 '}, {{{{{12,', byhb: '1,59'}, {id ', b stock ', drbq:' 21341 ', drtb:' 0,21 ', drhb:' 0,33 ', bzbq:' 35624 ', BZTB:' 1,62 ', BzHB:' 3.16 ', BYBQ:' 42613 ', Bytb: 2,78'. Der auf und ab schwimmende Pfeilstil-Trend (Wert, Zeile) {var trendicon = row.id%2 === 0? 'Glyphicon Glyphicon-Arrow-Down': 'Glyphicon Glyphicon-Arrow-up';

Analyse: $ ('#Tablel01'). Die repräsentative Sache an diesem Element ist, dass der Tischkopf in zwei Teile unterteilt ist, sodass zwei Arrays zu den Spalten [{}] und [{}] hinzugefügt werden müssen. Alle wurden zuvor in einem Array geschrieben, und der Quellcode durchquerte die Länge der Spalten

Beispiel 2:

Das gleiche HTML erfordert nur ein Tabellen -Tag mit ID

JS:

 // Tabellen -Plugin (Tabelle 2) startet // die Variablen deklarieren, die zum Zählen der Gesamtsumme (akkumulierter Kohle, monatlicher Plan) var yjharr = []; var ljlmarr = []; $ ('#Tabl02'). {align:'center',valign:'middle',field: 'gys',title: 'supplier'}, {align:'center',valign:'middle',field: 'pz',title: 'Variety'},{align:'center',valign:'middle',field: 'rz',title: 'caloric value'},{align:'center',valign:'middle',field: 'mj',title: 'coal price'},{align:'center',valign:'middle',field: 'bmdj',title: 'standard coal unit price'},{align:'center',valign:'middle',field: 'drlm',title: 'coal coming to the day'},{align:'center',valign:'middle',field: 'ljlm',title: 'coal coming to the day'},{align:'center',valign:'middle',field: 'ljlm',title: 'Cumulative coal coming'},{align:'center',valign:'middle',field: 'yjhl',title: 'monthly planned volume'},{align:'center',valign:'middle',field: 'yjhjd',title: 'Monthly Geplanter Abschluss Fortschritt ', Formatierer: Fortschritt}], Daten: [{ID: 2, GYS:' Shuangxin Mining ', PZ:' niedriger Schwefel Coal ', Rz:' ', MJ:' ', Bmdj:' ', Drlm:' ', Ljlm:' 6686.08 ', Yjhl:' 30000 ', Yjhjd: '22%'}, {Id: 3, Gys: 'Yitai Co., Ltd coal',rz:'',mj:'',bmdj:'',d rlm:'',ljlm:'51888.72',yjhl:'70000',yjhjd:'74%'},{id:4,gys:'Jiayuan Company',pz:'Medium and high sulfur Coal ', Rz:' ', MJ:' ', Bmdj:' ', Drlm:' ', LJLM:' 20041.86 ', YJHL:' 90000 ', Yjhjd: 100%'}, {id: 5, Gys: 'Aidi Energy', pz: 'niedriger Sulfur Coal', ' J: '', bmdj: '', drlm: '', ljlm: '5191.08', yjhl: '', yjhjd: '0%'}, {id: 6, gys: 'hingtai coal', pz: 'mittlerer hoher Schwefel Coal ', Rz:' ', MJ:' ', Bmdj:' ', Drlm:' ', Ljlm:' 18265,56 ', Yjhl:' ', Yjhjd:' 0%'}, {id: 6, Gys:' Hengtai Coal ', Pz:' Medium-High-High-Schwefel-Kohlenstoff ', " mj: ' Kohle ', rz:' ', mj:' ', bmdj:' ', drlm:' ', ljlm:' 18265.56 ', yjhl:' ', yjhjd:' 0%'})}); // Simulationsdaten end // benutzerdefinierte Spaltefunktion des Fortschritts der Progress (Value) {var var breiten (var var breiten rot = '#e63737'; var blue = '#b6ccf4'; yjharr.push (row.yjhl); ljlmarr.push (row.ljlm); style = 'display: block; float: links; width: "+width+"%; Höhe: 100%; Hintergrundfarbe: "+(Breite> = 100? Rot: Blau)+";'> "+Wert+" </span> </div> "} // Methode zur Berechnung der Gesamtwertfunktion Yjhtotal () {var subyjh = 0; i = 0; i <yjharr.length; i ++) {if (yjharr [i] == "") {yjharr [i] = 0;} subyjh+= parsefloat (yjharr [i]);} für (var i = 0; J = 0; H ({id: 1, gys: 'Total', pz: '', rz: '', mj: '', bmdj: '', drlm: '', ljlm: subljlm, yjhl: subyjh, yjhjd: '107%'}); Reihe}

Dies unterscheidet sich eigentlich nicht viel von der ersten Methode, sondern nur, dass Sie die benutzerdefinierten Spalten in die Daten einfügen und festlegen. Es ist einfacher zu verstehen. Weitere Parameter finden Sie auf der offiziellen Website. Die Daten sind dynamisch und wie Sie sie online hinzufügen. Es gibt viele Beispiele, solange sie in.

Das obige ist der adaptive feste Header des vom Editor eingeführten Plug-In-Plug-in (super nützlich). Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!