| Name | Attribute | Typ | Standardwert | Beschreibung |
|---|
| - | data-toggle | String | table | Führen Sie einfach JQuery-, Bootstrap- und Bootstrap-Table-Pakete ein, Sie müssen sie nicht hinzufügen in js Sie können es verwenden, wenn es in
definiert istStandardmäßig wird data-toggle="table" geschrieben. Zu den häufig verwendeten Begriffen gehören „Tooltip, Popover usw.“, die ich hier nicht erwähnen werde | classes
data-classes | String | table table-hover | Das Klassenattribut der Tabelle, wenn es nicht von Ihnen selbst definiert wurde , hat standardmäßig einen Rand, und wenn die Maus über diese Linie bewegt wird, wird der Hintergrund hellgrau. | | sortClass
data-sort-class | String | undefiniert | Deklarieren Sie den Klassennamen der Tabelle td, der den Klassennamen der Elemente in dieser Spalte darstellt, die sortiert werden sollen | | Höhe
Datenhöhe | Zahl | undefiniert | Höhe der Tabelle | | undefinierter Text
data-undefined-text | String | - | Wenn kein Inhalt geschrieben wird, wird standardmäßig „-“ angezeigt >false | Der Standardwert ist „false“. Wenn er auf „true“ gesetzt ist, wird der Hintergrund jeder Zeile der Tabelle grau und weiß angezeigt. |
| sortName | data-sort -name | String | undefiniert | definiert, welche Spaltenwerte sortiert werden. Wenn es nicht definiert ist, wird es sortiert Wird standardmäßig nicht sortiert. Dasselbe wie unten. Wird in Kombination mit sortOrder verwendet. Wenn nicht geschrieben, wird die Spalte standardmäßig inkrementiert (asc) |
| sortOrder | data- Sortierreihenfolge | String | asc | In Kombination mit dem Obigen verwendet, ist die Standardeinstellung aufsteigend (asc), sie kann auch auf absteigend (absteigend) eingestellt werden |
| sortStable | data-sort -stable | Boolean | false | (Verwechseln Sie es nicht, es ist sortStable, sortable ist unten) Der Standardwert ist false. Wenn er auf true gesetzt ist, ist er derselbe wie der Sortierteil. Der Unterschied besteht darin, dass sich die ursprüngliche Reihenfolge während des Sortiervorgangs nicht ändert. Es gibt einen weiteren Satz im Originaltext: (Wenn Sie dieses Attribut auf true setzen) fügen wir dieser Zeile das Attribut „_position“ hinzu |
| iconsPrefix | data- Icons-Präfix | String | glyphicon | Definieren Sie die Schriftartenbibliothek („Glyphicon“ oder „fa“ für FontAwesome). und kooperieren Sie mit dem Symbolattribut, um den Effekt zu erzielen.
Glyphicon ist in Bootstrap integriert und kann kostenlos |
| iconSize | data-icon-size | String | undefiniert< verwendet werden 🎜> | Definierte Icongröße:
- undefiniert =>Standard gibt die Standard-Schaltflächengröße (btn) an | - xs =>Größe der ultrakleinen Schaltfläche (btn-xs)
- sm =>Größe der kleinen Schaltfläche (btn-sm)
- lg => Größe der großen Schaltfläche (btn-lg)
| buttonsClass | data-buttons-class | String | Standard | Die Klasse der Schaltfläche, der Standardwert ist Standard.
- Die Optionen sind: Primär, Gefahr, Warnung usw.
- Nach dem Schreiben wird es automatisch in BTN-Primär (blau), BTN-Gefahr (Rot), BTN-Warnung (Gelb) und andere Formate konvertiert. Fügen Sie also vorne nicht „btn-“ hinzu. Der Standardwert ist btn-default (weiß). Symbole
Datensymbole | Objekt
{
paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',|
paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up', |
Refresh: 'glyphicon-refresh icon-refresh',
umschalten: 'glyphicon-list-alt icon-list-alt', |
Spalten: 'glyphicon-th icon-th',
detailOpen: 'glyphicon-plus icon-plus', |
detailClose: 'glyphicon-minus icon-minus'}
Definieren Sie Symbole, die in Symbolleisten, Seiten und Detailansichten verwendet werden
- Es gibt keine Möglichkeit, dies zu erklären. Bitte beachten Sie die Symbole im Anfänger-Tutorial:
Bootstrap-Schriftsymbol
| Spalten
- | Array
[] | Der Standardwert ist ein leeres Array, definiert in JS, Feld ist das Datenfeld, Titel ist der Kopfzeilenname jeder Spalte usw.
- Bitte beachten Sie: | Überprüfen Sie die Verwendung der Bootstrap-Tabelle | | Daten
- | Array
[ ] | Die Daten, die geladen werden. – Das heißt, die vom Server erhaltenen Daten werden über den „.“-Operator abgerufen, z. B. „data.date/data.anything“, gefolgt vom vom Server gesendeten Feldnamen | | dataField | data-data-field
| String
rows | – Benennen Sie den Feldnamen jeder Spalte, die Sie definieren Der Schlüssel kann über den Schlüssel einer Spalte einer Zeile einen Wert zuweisen. – Originaltext: Holen Sie sich den Schlüssel in jeder Datenzeile im JSON-Format. | – Beispiel: {„name“: „zz“, „age“:20}, Name und Alter sind die Schlüssel, falls dies angefordert wird vom Server-JSON, das sich möglicherweise von den in jeder Spalte definierten Feldern unterscheidet, aber sie sind alle eindeutig | | ajax
data-ajax
| Funktion
undefiniert | – Ajax-Methode, ähnlich der Ajax-Methode von jQuery |
| method | data-method | String | get | 向服务器请求远程数据的方式，默认为'get'，可选'post' |
| url | data-url | String | undefined | 向服务器请求的url。
- 例如：server + "get_app_player"和server + 'get_channel_list'，两者都是向server（server是自己定义的，例如"http://kanshakan.nichousha.com/"）请求数据，只是接口不同，一个是请求该游戏玩家信息，一个是请求渠道信息
下面看看原文：
- 向远程站点请求数据的URL
- 请记住，如果服务端分页选项使用了自定义的，那么请求的服务器响应格式是不同的，参考下面两个数据格式：
Without server-side pagination（没有启用服务端分页 - data1.json）
With server-side pagination（启用服务端分页 - data2.json） |
| cache | data-cache | Boolean | true | 默认缓存ajax请求，设为false则禁用缓存 |
| contentType | data-content-type | String | application/json | 请求数据的contentType（内容类型），用于定义文件的类型，决定接收方以什么形式读取这个文件。
- 默认application/json，用来告诉接收端从服务器发来的消息是序列化后的json字符串 |
| dataType | data-data-type | String | json | 期望从服务器获取的数据的类型，默认为json格式字符串 |
| ajaxOptions | data-ajax-options | Object | {} | 向服务器请求ajax时的附加项，默认无附加
- 参考 jQuery.ajax() |
| queryParams | data-query-params | Function | function(params){
return params;}Nach dem Login kopieren | 当请求数据时，你可以通过修改queryParams向服务器发送其余的参数。
- queryParamsType="limit"，它的参数包括：limit，offset，search，sort，order Else
- params包括：pageSize，pageNumber，searchText，sortName，sortOrder
- 当return false，请求则终止 |
| queryParamsType | data-query-params-type | String | limit | 默认"limit"，设置该属性用来发送符合RESTful格式的参数 |
| responseHandler | data-response-handler | Function | function(res){
return res;}Nach dem Login kopieren | 在加载服务器发送来的数据之前，处理数据的格式，参数res表示the response data（获取的数据） |
| pagination | data-pagination | Boolean | false | 默认为false，表格的底部工具栏不会显示分页条（pagination toolbar），可以设为true来显示 |
| paginationLoop | data-pagination-loop | Boolean | true | 默认true，分页条无限循环 |
| onlyInfoPagination | data-only-info-pagination | Boolean | false | 前提：pagination设为true，启用了分页功能。
- 默认false，设为true显示总记录数 |
| sidePagination | data-side-pagination | String | client | 设置在哪进行分页，默认"client"，可选"server"，如果设置 "server"，则必须设置url或者重写ajax方法
- 请记住，如果服务端分页选项使用了自定义的，那么请求的服务器响应格式是不同的，参考下面两个数据格式：
Without server-side pagination（没有启用服务端分页）
With server-side pagination（启用服务端分页） |
| pageNumber | data-page-number | Number | 1 | 前提：pagination设为true，启用了分页功能。
- 默认第1页，用于设置初始的页数 |
| pageSize | data-page-size | Number | 10 | 前提：pagination设为true，启用了分页功能。
- Standardmäßig werden 10 Datensätze pro Seite angezeigt. Dies wird verwendet, um die anfängliche Anzahl der auf jeder Seite angezeigten Datensätze festzulegen |
| pageList | data-page-list | Array | [10, 25, 50, 100] | Voraussetzung: Paginierung ist auf true gesetzt und die Paging-Funktion ist aktiviert.
– Der Standardwert ist [10, 25, 50, 100], d. h. Sie können „10/25/50/100 Datensätze pro Seite anzeigen“ auswählen, um die Anzahl der pro Seite angezeigten Datensätze festzulegen |
| selectItemName | data-select-item-name | String | btSelectItem | Radio (Radio-Button) oder Kontrollkästchen (komplex Feldname der Auswahlbox |
| smartDisplay | data-smart-display | Boolean | true | Der Standardwert ist „true“, wodurch taktvoll (<_<) Paginierung oder Kartenansicht je nach Situation angezeigt wird |
| escape | Daten- escape | Boolean | false | Überspringen Sie die in HTML eingefügte Zeichenfolge und ersetzen Sie die Sonderzeichen (keine Kommas in den folgenden Symbolen): &, <, >," ,`,' |
| search | data-search | Boolean | false | Die Standardeinstellung „false“ tut dies Das Suchfeld wird nicht in der oberen rechten Ecke der Tabelle angezeigt. Es kann auf „true“ gesetzt werden. Geben Sie einfach den Inhalt in das Suchfeld ein, um mit der Suche zu beginnen |
searchOnEnterKey| data-search-on-enter-key | Boolean | false | Der Standardwert „false“ ist nicht aktiviert. Setzen Sie ihn auf „true“, um ihn zu aktivieren. Die Funktion wird mit dem verglichen Geben Sie oben den Inhalt in das Suchfeld ein und drücken Sie die Eingabetaste, um die Suche zu starten | |
strictSearch| data-strict-search | Boolean | false | Auf true setzen, um eine präzise Suche zu ermöglichen | |
searchText| data-search-text | String | "" | Voraussetzung: Suche ist auf true gesetzt und die Suchfunktion ist aktiviert | - Der Inhalt wird zunächst im Suchfeld angezeigt, die standardmäßige leere Zeichenfolge
|
searchTimeOut| data- search-time-out | Anzahl | 500 | Voraussetzung: Suche ist auf true gesetzt und die Suche Funktion ist aktiviert. | -Legen Sie das Timeout für Suchdateien fest (Originaltext: Setze Timeout für Suchfeuer, ich weiß nicht, ob ich es falsch geschrieben habe oder mein Wissen zu eng ist. Was bedeutet „Suchfeuer“? Ist die offizielle API falsch?Ich bin so verwirrt)
| trimOnSearch | data-trim-on-search | Boolean | true | Standard true, Leerzeichen automatisch ignorieren |
| showHeader | data-show-header | Boolean | true | Der Standardwert ist true, um die Kopfzeile anzuzeigen, auf false gesetzt, um |
| showFooter | data-show-footer | Boolean | auszublenden false | Der Standardwert ist „false“, um das Ende der Tabelle auszublenden, auf „true“ gesetzt, um anzuzeigen |
| showColumns | data-show-columns | Boolescher Wert | false | Der Standardwert ist „false“, um ein Spalten-Dropdown-Menü auszublenden, auf „true“ gesetzt, um es anzuzeigen |
| showRefresh | data-show-refresh | Boolean | false | Der Standardwert ist „false“, um die Aktualisierungsschaltfläche auszublenden, und auf „true“ gesetzt, um ihn anzuzeigen |
| showToggle | data-show-toggle | Boolean | false | Der Standardwert ist false, um die Schaltfläche zum Umschalten der Ansicht auszublenden , auf true setzen, um |
| showPaginationSwitch | data-show-pagination-switch | Boolean | false | < anzuzeigen 🎜>Der Standardwert ist „false“, um die Auswahl der Anzahl der Datenelemente pro Seite auszublenden, auf „true“ gesetzt, um |
minimumCountColumns | data-minimum-count-columns anzuzeigen | Nummer | 1 | Das Dropdown-Menü für jede Spalte ist die Mindestanzahl |
idField | Daten- id-field | String | undefiniert | gibt an, welches Feld ein Identitätsfeld ist |
uniqueId | data- unique-id | String | undefiniert | gibt an, dass jede Zeile eindeutig ist. Die Kennung von |
cardView | data-card-view | Boolean | false | default false, Auf true setzen, um die Kartenansicht (Kartenansicht) anzuzeigen |
detailView | data-card-view | Boolean | false | Standard ist false, wird auf true gesetzt, um die Detailansicht anzuzeigen |
| detailFormatter | data-detail-formatter | Function | function(index, row, element){
return '';} | Voraussetzung: detailView ist auf true gesetzt und die Anzeige der Detailansicht ist aktiviert.
– Zur Formatierung der Detailansicht
– Gibt eine Zeichenfolge zurück, die über das dritte Parameterelement direkt zur Zelle (einem bestimmten Raster) der Detailansicht hinzugefügt wird, wobei element das jQuery-Element der Zielzelle ist |
| searchAlign | data-search-align | String | right | Die Position des Suchfelds, standardmäßig rechts (ganz rechts), optional links |
| buttonsAlign | data-buttons-align | String | right | Die Position der Symbolleistenschaltfläche, standardmäßig rechts ( ganz rechts), optional links |
| toolbarAlign | data-toolbar-align | String | left | custom Die Position der Symbolleiste, standardmäßig rechts (ganz rechts), optional links |
| paginationVAlign | data-pagination-v-align | String | unten | Die vertikale Position der Seitenleiste, die Standardeinstellung ist unten (unten), optional oben, beides (sowohl oben als auch unten haben Seitenleisten) |
| paginationHAlign | data-pagination-h-align | String | right | Die horizontale Position der Seitenleiste, standardmäßig rechts (ganz rechts), optional Wenn die Erklärung zu lang ist, lautet paginationDetail beispielsweise „Anzeige des 1. bis 8. Datensatzes, insgesamt 15 Datensätze und Anzeige von 8 Datensätzen pro Seite“. 🎜> |
paginationPreText| data-pagination-pre-text | String | ‹ | Zum Beispiel, wenn Sie zu viel haben Inhalt: In der rechten Ecke unten wird Folgendes angezeigt: „‹ 1 2 3 4 5 ›“, um die Anzahl der Seiten auszuwählen. Standardmäßig ist das Symbol ganz links, dasselbe wie unten | |
paginationNextText | data- pagination-next-text | String | › | Siehe den obigen Artikel | |
clickToSelect| data-click -to-select | Boolean | false | Der Standardwert „false“ ist keine Antwort, wenn Sie irgendwo klicken In dieser Zeile wird das Kontrollkästchen dieser Zeile automatisch ausgewählt (Checkbox) oder Radiobox (Radio-Button) | |
singleSelect| data-single-select | Boolean | false | Standard ist false, auf true setzen, damit das Kontrollkästchen nur eine Zeile auswählen kann | |
| toolbar | data-toolbar | String |. Knoten | undefiniert | jQuery-Selektor, zum Beispiel: #toolbar, .toolbar , oder DOM-Knoten |
| checkboxHeader | data-checkbox-header | Boolean | true | Falls ja Wenn Sie ein Kontrollkästchen für die Deklaration verwenden, wird das Kontrollkästchen „Alle auswählen“ der Kopfzeile standardmäßig angezeigt. Setzen Sie es auf „false“, um es auszublenden (d. h. die erste Zeile der Tabelle wird nicht angezeigt, aber alle zweiten Zeilen werden angezeigt) |
| maintainSelected | data-maintain-selected | Boolean | false | Auf true setzen, um den Status beizubehalten der ausgewählten Zeile |
| sortierbar | datensortierbar | Boolean | true | Standard true, gesetzt auf false, um die gesamte Zeilenanordnung zu deaktivieren (d. h. die Sortierschaltfläche wird nicht in der Kopfzeile jeder Spalte angezeigt. Dies muss in data-sortable="true" deklariert werden, in js geschrieben, aber nur aktiviert oder nicht) |
| slientSort | data-silent-sort | Boolean | true | Voraussetzung: sidePagination ist auf Server eingestellt (Server)
– Standardwert „true“, auf „false“ gesetzt, sortiert Daten stillschweigend > | {}
Zum Ändern des Formats einer Zeile sind zwei Parameter erforderlich:
| – Zeile: Die Daten dieser Zeile | – Index: Der Index dieser Zeile unterstützt Klassen und CSS. Die Verwendung ist wie folgt:
Funktion rowStyle(row, index){ | return {
Klassen: 'text-nowrap another-class',
css: {"color": "blue", "font-size": "50px"} |
};
} |
rowAttributes
data-row-attributes
Funktion
| {}
Ändern Sie den Wert von Ein Zeilenattribut erfordert zwei Parameter: | – Zeile: die Daten dieser Zeile | – Index: der Index dieser Zeile unterstützt alle benutzerdefinierten Attribute. | | customSearch | data-custom-search
Funktion
| $.noop
Benutzerdefinierte Suchfunktion ( Wird verwendet, um die integrierte Suchfunktion zu ersetzen. Ein Parameter ist erforderlich: | – Text: Der Inhalt, nach dem Sie suchen möchten | wird wie folgt verwendet: function customSearch(text){ | //Sie müssen „this.data“ verwenden, um die Daten zu filtern (filtern Sie die Daten, ich bin der Meinung, dass dieses Wort nicht übersetzt werden muss), verwenden Sie nicht „this.options.data“
}
| customSort | data-custom-sort | Funktion | $.noop | Benutzerdefinierte Sortierfunktion (wird verwendet, um die integrierte Sortierfunktion zu ersetzen), erfordert zwei Parameter (Sie können sich auf die vorherigen beziehen):
- sortName: die Spalte, die sortiert werden muss
- sortOrder: Sortiermethode
Verwendung: das Gleiche wie oben. Keine Sorge, die Anmerkungen sind genau die gleichen |
| locale | data-locale | String | undefiniert | Lokalisierung (Verb).
Lokalisierte Dateien müssen vorab geladen werden, um einen Fallback zu ermöglichen (einfach ausgedrückt: Wenn die zu verwendende Datei nicht verfügbar ist, können Sie sie durch etwas anderes ersetzen, z. B. durch einen Ersatzspieler auf dem Spielfeld. Wenn es keinen Ersatz gibt, wenn jemand verletzt ist , das Spiel wird nicht gestoppt (veraltet), wenn es geladen wird, erfolgt es in der folgenden Reihenfolge:
– Das erste, was versucht wird, die angegebene „Lokalisierungsdatei“ zu laden
– Dann „_“ (Unterstrich). ) wird als „-“ (Bindestrich) geschrieben, und der Regionscode wird groß geschrieben
– dann der kurze Gebietsschemacode (z. B. „fr“ anstelle von „fr-CA“)
– und schließlich die verbleibende Lokalisierungsdatei wird verwendet (Standard wird verwendet, wenn keine Datei geladen werden kann) )
Wenn die verbleibenden undefinierten oder leeren Zeichen verwendet werden, wird die zuletzt verwendete Datei verwendet (wenn keine Lokalisierungsdatei geladen werden kann, wird das integrierte „en_US“ verwendet. wird verwendet) |
| footerStyle | data-footer-style | Function | {} | Changing Das Fußzeilenformat erfordert zwei Parameter:
– Zeile: die Daten dieser Zeile
– Index: der Index dieser Zeile
unterstützt Klassen und CSS, die Verwendung ist wie folgt:
Funktion rowStyle(value, row, index){
zurück {
css: { "font-weight": "bold" }
};
} |
