Bootstrap Table Print

Die Print-Erweiterung der Bootstrap Table.

Auf dieser Seite

Fügt der Symbolleiste einen Button hinzu, um die Tabelle in einem vordefinierten konfigurierbaren Format zu drucken.

Verwendung

<script src="extensions/print/bootstrap-table-print.js"></script>

Beispiel

Optionen

showPrint

Attribut: data-show-print
Typ: Boolean
Detail:

Setzen Sie true, um den Druck-Button auf der Symbolleiste anzuzeigen.
Standard: false

printAsFilteredAndSortedOnUI

Attribut: data-print-as-filtered-and-sorted-on-ui
Typ: Boolean
Detail:

Setzen Sie true, um die Tabelle so zu drucken, wie sie in der UI sortiert und gefiltert ist. Wenn true gesetzt ist, gelten explizit vordefinierte Druckoptionen für Filterung und Sortierung (printFilter, printSortOrder, printSortColumn). Sie werden auf Daten angewendet, die bereits durch UI-Steuerelemente gefiltert und sortiert wurden. Um Daten so zu drucken, wie sie in der UI gefiltert und sortiert sind, setzen Sie diese drei Optionen nicht: printFilter, printSortOrder, printSortColumn.
Standard: true

printPageBuilder

Attribut: data-print-page-builder
Typ: Function
Detail:

Empfängt das HTML <table>-Element als Zeichenkettenparameter, gibt HTML-Zeichenkette für den Druck zurück. Diese Option wird zum Styling und Hinzufügen eines Headers oder Footers verwendet.
Standard:

printPageBuilder: function(table, styles) {
  return `
    <html>
    <head>
    ${styles}
    <style type="text/css" media="print">
    @page {
      size: auto;
      margin: 25px 0 25px 0;
    }
    </style>
    <style type="text/css" media="all">
    table {
      border-collapse: collapse;
      font-size: 12px;
    }
    table, th, td {
      border: 1px solid grey;
    }
    th, td {
      text-align: center;
      vertical-align: middle;
    }
    p {
      font-weight: bold;
      margin-left:20px;
    }
    table {
      width: 94%;
      margin-left: 3%;
      margin-right: 3%;
    }
    div.bs-table-print {
      text-align: center;
    }
    </style>
    </head>
    <title>Print Table</title>
    <body>
    <p>Printed on: ${new Date} </p>
    <div class="bs-table-print">${table}</div>
    </body>
    </html>
  `
}

printSortColumn

Attribut: data-print-sort-column
Typ: String
Detail:

Legen Sie den Spaltenfeldnamen fest, nach dem die gedruckte Tabelle sortiert werden soll.
Standard: undefined

printSortOrder

Attribut: data-print-sort-order
Typ: String
Detail:

Gültige Werte: ‘asc’, ‘desc’. Nur relevant, wenn printSortColumn gesetzt ist.
Standard: 'asc'

printStyles

Attribut: data-print-styles
Typ: Array
Detail:

Fügen Sie dem gedruckten Seiten Stile hinzu, wie z. B. benutzerdefinierte Icons.
Standard: []

Icons

print: 'fa-print'

Spaltenoptionen

printFilter

Attribut: data-print-filter
Typ: String
Detail:

Legen Sie den Wert fest, um die gedruckten Daten nach dieser Spalte zu filtern.
Standard: undefined

printFormatter

Attribut: data-print-formatter
Typ: Function
Detail:

Eine benutzerdefinierte function(value, row, index) - gibt einen String zurück. Formatiert die Zellwerte für diese Spalte in der gedruckten Tabelle. Das Verhalten der Funktion ähnelt der ‘formatter’-Spaltenoption.
Standard: undefined

printIgnore

Attribut: data-print-ignore
Typ: Boolean
Detail:

Setzen Sie true, um diese Spalte auf der gedruckten Seite auszublenden.
Standard: false

Lokalisierungen

formatPrint

Typ: Function
Standard: function () { return "Print" }