Version chinoise de l'API Bootstrap Table (document de traduction)-Tutoriel d'amorçage-php.cn

Version chinoise de l'API Bootstrap Table (document de traduction)

Il existe des versions chinoises en ligne, mais certaines sont traduites littéralement et d'autres ne sont pas traduites, j'ai donc l'intention de les traduire à nouveau moi-même et je ferai de mon mieux pour combiner chacune d'elles. Traduisez autant d'informations que possible. Si vous constatez que le contenu traduit est plus qu'en anglais, ajoutez une description plus détaillée. Le nom, les attributs, les types et les valeurs par défaut du tableau ne seront pas traduits. ", "id", etc. ne seront pas traduits. Veuillez signaler toute erreur et elle sera corrigée à temps, merci.

Tutoriels recommandés : tutoriel bootstrap

Le "Nom" peut être écrit en $('. # table').bootstrapTable({}); entre accolades, vous pouvez définir certaines valeurs souhaitées, telles que :

$("#realTime_Table").bootstrapTable({
		       search: true,
	            pagination: false,
	            pageSize: 15,
	            pageList: [5, 10, 15, 20],
	            showColumns: true,
	            showRefresh: false,
	            showToggle: true,
	            locale: "zh-CN",
	            striped: true
        });

Copier après la connexion

2. Les "Attributs" sont placés dans la table de déclaration , tel que :

<!--例子应该很好看懂Table options和Column options 所放的位置不同，随便写的，主要为了懂得如何用--!>

 <table id="realTime_Table" data-click-to-select="true" class="table table-bordered" data-page-size="20">
      <thead>
          <tr >
              <th data-sortable="true" data-field="realTimeDate">日期</th>
              <th data-sortable="true" data-field="newPlayerNum">新增用户</th>
              <th data-sortable="true" data-field="activePlayerNum">活跃用户</th>
          </tr>
      </thead>
      <tbody>
      </tbody>
</table>

Copier après la connexion

3. Si le nom et la fonction d'attribut sont similaires, alors n'importe quel endroit suffit. Il n'est pas nécessaire de répéter la définition. Certains attributs sont écrits. en js plutôt que le nom dans l'instruction. Le tableau est plus simple, ou vice versa (certains attributs doivent être écrits, le nom correspondant indique simplement s'il faut activer cet attribut)

Les options de table

sont définies dans le fichier jQuery.fn.bootstrapTable.defaults

. falseLa valeur par défaut est false. Lorsqu'elle est définie sur true, l'arrière-plan de chaque ligne du tableau affichera du gris et du blanc sortNamedata-sort. -nameStringundefined définit les valeurs de la colonne qui seront triées. Écrivez le nom personnalisé du champ de données. S'il n'est pas défini, il le sera. ne pas être triée par défaut. Comme ci-dessous Utilisé en combinaison avec sortOrder, si elle n'est pas écrite, la colonne sera incrémentée par défaut (asc) sortOrderdata-. sort-orderStringascUtilisé en conjonction avec ce qui précède, la valeur par défaut est croissante (asc), elle peut également être définie sur décroissante (desc)sortStabledata-sort -stableBooleanfalse (Ne le lisez pas mal, c'est sortStable, sortable est ci-dessous) La valeur par défaut est false. S'il est défini sur true, c'est la même chose que la partie tri. La différence est : pendant le processus de tri, s'il y a des éléments égaux, l'ordre d'origine ne changera pas. Il y a une autre phrase dans le texte original : (Si vous définissez cet attribut sur true) nous ajouterons l'attribut '_position' à cette ligne iconsPrefixdata- icons-prefixStringglyphiconDéfinissez la bibliothèque de polices ('Glyphicon' ou 'fa' pour FontAwesome). Lorsque vous utilisez "fa", vous devez référencer FontAwesome). et coopérez avec l'attribut des icônes pour obtenir l'effet. Glyphicon est intégré à Bootstrap et peut être utilisé gratuitement iconSizedata-icon-sizeStringundefinedTaille de l'icône définie : - xs =>Taille du bouton ultra-petit (btn-xs)
- sm =>Taille du petit bouton (btn-sm)
- lg => Taille du gros bouton (btn-lg) <🎜. >data-search-on-enter-keyBooleanfalseLa valeur false par défaut n'est pas activée, définie sur true pour l'activer, la fonction est comparée à la ci-dessus, saisissez le contenu dans la zone de recherche et appuyez sur la touche Entrée pour lancer la recherchestrictSearchdata-strict-searchBooleanfalse Définir sur true pour activer une recherche précisesearchTextdata-search-textString"" Prérequis : la recherche est définie sur true et la fonction de recherche est activée . searchTimeOutdata- search-time-outNumber500Prérequis : la recherche est définie sur true et la recherche la fonction est activée.

Nom	Attributs	Type	Valeur par défaut	Description
-	data-toggle	String	table	Introduisez simplement les packages jquery, bootstrap, bootstrap-table, pas besoin de les ajouter en js Vous pouvez l'utiliser s'il est défini à l'intérieur de Par défaut, data-toggle="table" est écrit. Vous devez connaître les data-toggle couramment utilisés incluent "tooltip, popover, etc.", que je ne mentionnerai pas ici
classes	data-classes	String	table table-hover	L'attribut class de la table, s'il n'est pas défini par vous-même , a une bordure par défaut, et lorsque la souris est survolée pour cette ligne, l'arrière-plan deviendra gris clair.
sortClass	data-sort-class	String	undefined	Déclarez le nom de classe de la table td, qui représente le nom de classe des éléments de cette colonne qui seront triés
hauteur	hauteur des données	Nombre	undefined	Hauteur de la table
undefinedText	data-undefined-text	String	-	Quand aucun contenu n'est écrit, il affiche '-' par défaut >





- undefined =>Default indique la taille du bouton par défaut (btn)
buttonsClass	data-buttons-class	String	default	La classe du bouton, la valeur par défaut est default. - Les options sont : primaire, danger, avertissement, etc. - Après écriture, il sera automatiquement converti en btn-primary (bleu), btn-danger (rouge), btn-warning (jaune) et autres formats, donc le devant N'ajoutez pas "btn-", la valeur par défaut est btn-default (blanc) - Référez-vous au tutoriel novice : Bouton Bootstrap
icônes	icônes de données	Objet	{ paginationSwitchDown : 'glyphicon-collapse-down icon-chevron-down', paginationSwitchUp : 'glyphicon-collapse-up icône-chevron-up', rafraîchir : 'glyphicon-rafraîchir icône-rafraîchir', bascule : 'glyphicon-list-alt icône-list-alt', colonnes : 'glyphicon-th icône-th', détailOuvrir : 'glyphicon-plus icône-plus', detailClose : 'glyphicon-minus icon-minus' }	Définir les icônes utilisées dans les barres d'outils, la pagination et les vues détaillées - Il n'y a aucun moyen d'expliquer, merci de vous référer aux icônes du tutoriel novice : Icône de police Bootstrap
colonnes	-	Array	[]	La valeur par défaut est un tableau vide, défini dans JS, le champ est le champ de données, le titre est le nom d'en-tête de chaque colonne, etc. - Veuillez vous référer à : Vérifier l'utilisation de la table Bootstrap
données	-	Array	>[ ]	Les données en cours de chargement. - Autrement dit, les données obtenues à partir du serveur sont obtenues via l'opérateur ".", tel que "data.date/data.anything", suivi du nom du champ envoyé par le serveur
dataField	data-data-field	String	rows	- Nommez le nom du champ de chaque colonne que vous définissez, qui est la clé, via Key, peut attribuer une valeur à une colonne d'une ligne. - Texte original : Obtenez la clé dans chaque ligne de données json - Par exemple : {"name": "zz", "age": 20}, le nom et l'âge sont les clés, si cela est demandé du serveur json, cela peut être différent des champs définis dans chaque colonne, mais ils sont tous uniques
ajax	data-ajax	Fonction	non défini	- méthode ajax, similaire à la méthode ajax de 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;} Copier après la connexion	当请求数据时，你可以通过修改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;} Copier après la connexion	在加载服务器发送来的数据之前，处理数据的格式，参数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，启用了分页功能。 - Par défaut, 10 enregistrements sont affichés par page, ce qui permet de définir le nombre initial d'enregistrements affichés sur chaque page
pageList	data-page-list	Array	[10, 25, 50, 100]	Prérequis : la pagination est définie sur true et la fonction de pagination est activée. - La valeur par défaut est [10, 25, 50, 100], c'est-à-dire que vous pouvez sélectionner "Afficher 10/25/50/100 enregistrements par page" pour définir le nombre d'enregistrements affichés par page
selectItemName	data-select-item-name	String	btSelectItem	radio (bouton radio) ou case à cocher (complexe nom du champ de la zone de sélection
smartDisplay	data-smart-display	Boolean	true	La valeur par défaut est vraie, ce qui avec tact (<_<) affichera la pagination ou la vue de la carte en fonction de la situation
échappera	données- escape	Booléen	false	Ignorer la chaîne insérée en HTML et remplacer les caractères spéciaux (pas de virgules dans les symboles suivants) : &, <, >," ,`,'
search	data-search	Boolean	false	La valeur false par défaut n'affiche pas le champ de recherche dans le coin supérieur droit du tableau. Il peut être défini sur true. Entrez simplement le contenu dans le champ de recherche pour lancer la recherche
searchOnEnterKey

				- Le contenu initialement affiché dans le champ de recherche, la chaîne vide par défaut
				-Définir le délai d'expiration pour la recherche de fichiers (texte original : définir le délai d'expiration pour le feu de recherche, je ne sais pas si je l'ai mal écrit ou si mes connaissances sont trop étroites. Que signifie "feu de recherche" ? L'API officielle est-elle erronée ?Je suis tellement confus)
trimOnSearch	data-trim-on-search	Boolean	true	Vrai par défaut, ignore automatiquement les espaces
showHeader	data-show-header	Boolean	true	La valeur par défaut est true pour afficher l'en-tête, définie sur false pour masquer
showFooter	data-show-footer	Boolean	false	La valeur par défaut est false pour masquer la fin du tableau, définie sur true pour afficher
showColumns	data-show-columns	Booléen	false	La valeur par défaut est false pour masquer un menu déroulant de colonne, définie sur true pour afficher
showRefresh	data-show-refresh	Booléen	false	La valeur par défaut est false pour masquer le bouton d'actualisation, définie sur true pour afficher
showToggle	data-show-toggle	Boolean	false	La valeur par défaut est false pour masquer le bouton de changement de vue , défini sur true pour afficher
showPaginationSwitch	data-show-pagination-switch	Boolean	false	La valeur par défaut est false pour masquer la sélection du nombre d'éléments de données par page, définie sur true pour afficher
minimumCountColumns	data-minimum-count-columns	Nombre	1	Le menu déroulant pour chaque colonne est au minimum Nombre
idField	data- id-field	String	undefined	indique quel champ est le champ d'identité
uniqueId	data- unique-id	String	undefined	indique que chaque ligne est unique L'identifiant de
cardView	data-card-view	Boolean	false	false par défaut, défini sur true pour afficher la vue de la carte (vue de la carte)
detailView	data-card-view	Boolean	false	La valeur par défaut est false, définie sur true pour afficher la vue détaillée
detailFormatter	data-detail-formatter	Fonction	fonction (index, ligne, élément){ return '';}	Prérequis : detailView est défini sur true et l'affichage de la vue détaillée est activé. - Pour le formatage de la vue détaillée - Renvoie une chaîne, qui est directement ajoutée à la cellule (une certaine grille) de la vue détaillée via le troisième élément de paramètre, où element est l'élément jQuery de la cellule cible
searchAlign	data-search-align	String	right	La position du champ de recherche, par défaut à droite (à l'extrême droite), en option à gauche
buttonsAlign	data-buttons-align	String	right	La position du bouton de la barre d'outils, par défaut à droite ( le plus à droite), facultatif left
toolbarAlign	data-toolbar-align	String	left	custom La position de la barre d'outils, par défaut à droite (à l'extrême droite), en option à gauche
paginationVAlign	data-pagination-v-align	String	bas	La position verticale de la barre de pagination, la valeur par défaut est en bas (en bas), en option en haut, les deux (le haut et le bas ont des barres de pagination)
paginationHAlign	data-pagination-h-align	String	right	La position horizontale de la barre de pagination, par défaut à droite (à l'extrême droite), facultatif si L'explication est trop longue. Par exemple, paginationDetail est "afficher le 1er au 8ème enregistrement, un total de 15 enregistrements et afficher 8 enregistrements par page". La valeur par défaut est à gauche (la plus à gauche) et la droite facultative
paginationPreText	data-pagination-pre-text	String	‹	Par exemple, si vous en avez trop contenu, Le coin le plus à droite en bas affichera : "‹ 1 2 3 4 5 ›" pour sélectionner le nombre de pages. La valeur par défaut est le symbole le plus à gauche, le même ci-dessous
paginationNextText.	data-pagination-next-text	String	›	Référez-vous à l'article ci-dessus
clickToSelect	data-click -to-select	Boolean	false	La valeur false par défaut n'est pas de réponse Si elle est définie sur true, lorsque vous cliquez quelque part. sur cette ligne, la case à cocher de cette ligne sera automatiquement sélectionnée (case à cocher) ou radiobox (bouton radio)
singleSelect	data-single-select	Booléen	false	La valeur par défaut est false, définie sur true pour permettre à la case à cocher de sélectionner une seule ligne
barre d'outils	data-toolbar	String \| Node	non défini	sélecteur jQuery, par exemple : #toolbar, .toolbar , ou nœud DOM
checkboxHeader	data-checkbox-header	Boolean	true	Si vous avez une case à cocher de déclaration, la case à cocher tout sélectionner de la ligne d'en-tête sera affichée par défaut. Définissez-la sur false pour la masquer (c'est-à-dire que la première ligne du tableau ne sera pas affichée, mais toutes les deuxièmes lignes seront affichées)
maintainSelected	data-maintain-selected	Boolean	false	Défini sur true pour conserver le statut de la ligne sélectionnée
sortable	data-sortable	Boolean	true	Vrai par défaut, défini sur false pour désactiver toute la disposition des lignes (c'est-à-dire que le bouton de tri ne sera pas affiché dans l'en-tête de chaque colonne. Cela doit être déclaré dans le data-sortable="true", écrit en js mais uniquement activé ou non)
slientSort	data-silent-sort	Boolean	true	Prérequis : sidePagination est défini sur serveur (serveur) - True par défaut, défini sur false triera silencieusement les données
rowStyle	data-row-style	Fonction	{}	Changer le format d'une ligne nécessite deux paramètres : - row : Les données de cette ligne - index : L'index de cette ligne supporte les classes et les css L'utilisation est la suivante : function rowStyle(ligne, index){ return { classes : 'text-nowrap another-class', css : {"color": "bleu", "font-size": "50px"} } ; >
rowAttributes	data-row-attributes	Fonction	{}	Modifier la valeur de a row Les attributs nécessitent deux paramètres : - row : les données de cette ligne - index : l'index de cette ligne prend en charge tous les attributs personnalisés.
customSearch	data-custom-search	Fonction	$.noop	Fonction de recherche personnalisée ( Utilisé pour remplacer la fonction de recherche intégrée), un paramètre est requis : - texte : le contenu que vous souhaitez rechercher s'utilise comme suit : fonction customSearch(text){ //Vous devez utiliser 'this.data' pour filtrer les données (filtrer les données, j'estime que ce mot n'a pas besoin d'être traduit), n'utilisez pas 'this.options.data' >
customSort	data-custom-sort	Fonction	$.noop	Fonction de tri personnalisée (utilisé pour remplacer la fonction de tri intégrée), nécessite deux paramètres (vous pouvez vous référer au précédent) : - sortName : la colonne qui doit être triée - sortOrder : méthode de tri Utilisation : comme ci-dessus, Ne vous inquiétez pas, les annotations sont exactement les mêmes
locale	data-locale	String	indéfini	localisation (verbe). Les fichiers localisés doivent être préchargés pour permettre une solution de secours (en termes simples, si le fichier à utiliser n'est pas disponible, vous pouvez le remplacer par autre chose, comme un remplaçant sur le terrain. S'il n'y a pas de remplaçant, si quelqu'un est blessé , le jeu ne s'arrêtera pas. (obsolète), s'il est chargé, ce sera dans l'ordre suivant : - La première chose à essayer de charger est le fichier "localisation" spécifié - Puis '_' (souligné ) s'écrit '-' (tiret), et la région Le code est en majuscule - puis le code court de la région (par exemple 'fr' au lieu de 'fr-CA') - et enfin le fichier de localisation restant est utilisé (la valeur par défaut est utilisée lorsqu'aucun fichier ne peut être chargé)) Si les caractères restants non définis ou vides sont utilisés, le dernier fichier utilisé sera utilisé (lorsqu'aucun fichier de localisation ne peut être chargé, le 'en_US' intégré sera utilisé)
footerStyle	data-footer-style	Fonction	{}	Changement le format du pied de page nécessite deux paramètres : - row : les données de cette ligne - index : l'index de cette ligne supporte les classes et les css, l'utilisation est la suivante : function rowStyle(value, row, index){ retour { css : { "font-weight": "gras" } } ; >

Options de colonne (Options de colonne)

Défini dans le fichier jQuery.fn.bootstrapTable.columnDefaults

<🎜. >valigndata-valignStringundefinedL'alignement de chaque grille de données, y compris : haut (haut), milieu (centré) ), bas (bas)largeurdata-widthNombre (unité : px ou %)undefined La largeur de chaque colonne. orderdata-orderStringascLa méthode de tri par défaut est "asc (croissant order)", qui peut également être défini sur "desc (ordre décroissant)". visibledata-visibleBooleantrueLa valeur par défaut est true pour afficher cette colonne , définissez Si faux, la colonne sera masquée. <. 🎜>cardVisibleswitchableclickToSelectformatteur La fonction de conversion de données d'une certaine grille nécessite trois paramètres : footerFormatternon définie - a : le premier nom du champ non défini pour expliquer des circonstances particulières : undefined -row : données de la ligne -FIELD : Le nom du champ de la ligne function cellStyle(value, row, index, field) { retour { classes : 'text-nowrap another-class', css : {"color": "bleu", "font-size": "50px"} } ; >trueVrai par défaut, indiquant cette colonne de les données peuvent être interrogéessearchFormatterdata-search-formatterBooleantruetrue par défaut , Vous pouvez utiliser une requête de données formatéesescapedata-escapeBooleanfalse jump Remplacez les caractères spéciaux en insérant des chaînes en HTML (pas de virgules dans les symboles suivants) : &, <, >, ", `, '

Événements

定义事件的格式：

$(’#table’).bootstrapTable({
onEventName: function (arg1, arg2, …) {
// …
} });

$(’#table’).on(‘event-name.bs.table’, function (e, arg1, arg2, …) {
// …
});

Copier après la connexion

Nom	Attributs	Type	Valeur par défaut	Description
radio	data-radio	Booléen	false	Faux par défaut n'affiche pas la radio (bouton radio), défini sur true Affichage, la largeur de la radio est fixe
checkbox	data-checkbox	Booléen	false	Faux par défaut ne pas afficher la case à cocher (checkbox), définie sur true pour afficher, la largeur de chaque colonne de la case à cocher a été corrigée
field	data-field	String	undefined	est le nom du champ de chaque colonne, pas le nom affiché dans l'en-tête du tableau. Vous pouvez lui attribuer une valeur via ce nom de champ, qui est équivalent à. la clé et est unique dans la table
title	data-title	String	undefined	C'est le nom affiché dans l'en-tête, il n'est pas unique. Si vous le souhaitez, vous pouvez définir tous les en-têtes avec le même nom
titleTooltip	data-title-. tooltip	String	undefined	Lorsque vous survolez un contrôle, une invite apparaît- Reportez-vous au plug-in Bootstrap Tooltip
class	class/data-class	String	undefined	Il n'y a rien à dire, juste la classe
rowspan	rowspan/data-rowspan	Number	non défini	Nombre de lignes par cellule
colspan	colspan/data-colspan	Nombre	undefined	Le nombre de colonnes occupées par chaque grille
align	data-align	String	non défini	L'alignement des données dans chaque cellule est : gauche (gauche), droite (droite), centre (centre)
halign	data-halign	String	undefined	L'alignement de l'en-tête du tableau (en-tête du tableau), y compris : gauche (gauche), droite (droite), centre (centré)
falign	data-falign	String	undefined	pied de table ( Pied de table, il suffit de traduire comme ça, faites ce que vous voulez, en fait, vous pouvez le traduire avec désinvolture, il suffit de le savoir). Les méthodes d'alignement sont : gauche (gauche), droite (droite), centre (centre)

				- S'il n'y a pas de largeur personnalisée, la largeur s'adaptera en fonction de la largeur du contenu. - Si le tableau reste réactif ou si la largeur définie est inférieure à la largeur du contenu, alors la largeur sera toujours adaptative (la largeur minimale ou la largeur maximale peuvent être utilisées en classe ou dans d'autres attributs). - Vous pouvez également utiliser "%" comme unité, dans ce cas, le bootstapTable sera divisé par des pourcentages. Si vous souhaitez utiliser "pixels (valeur du pixel)", vous pouvez simplement écrire des nombres (à condition de ne pas le faire). ajoutez "%", l'unité par défaut est "px", si cela ne vous dérange pas, ou si vous voulez que ce soit plus clair, vous pouvez également ajouter "px")
sortable	data-sortable	Boolean	false	Si faux, il sera affiché par défaut. S'il est défini sur true, il sera trié<. 🎜>
				- Utilisez-le en combinaison avec ce qui précède, sinon il ne sera pas trié, alors que pensez-vous d'autre du levage et de l'abaissement.
				- C'est toujours très utile. Par exemple, masquer une colonne d'index personnalisée provoquera une confusion après un tri selon un certain attribut. Vous pouvez lire l'index d'une ligne pour attribuer une valeur
data-card-visible	Boolean	true	La valeur par défaut est true pour afficher cette colonne, et définissez-la sur false pour la masquer il.
data-switchable	Boolean	true	La valeur par défaut est true pour afficher cette colonne , définir False désactive l'onglet de l'élément de colonne.
data-click-to-select	Boolean	true	True par défaut ne le fait pas répondre , défini sur false, lorsque vous cliquez quelque part dans cette ligne, la case à cocher (case à cocher) ou la radiobox (bouton radio) de cette ligne ne sera pas automatiquement sélectionnée
data-formatter	Fonction	non défini	Un objet qui nécessite cette colonne.	-value : champ (nom du champ) -row : données de ligne -index : index de ligne (index)
data-footer-formatter	Fonction	undefined	Un objet qui nécessite cette colonne. La fonction de conversion de données d'une certaine grille nécessite un paramètre : La fonction doit renvoyer (retourner) le format de la chaîne à afficher dans une certaine cellule du pied de page, et également inclure le contenu
événements	données- events	Objet	undefined	Lorsqu'une certaine grille utilise la fonction de formatage, l'écouteur d'événement répondra et nécessite quatre paramètres : -event : événement jQuery (voir aux événements). . 🎜>trieur trieur de données Fonction
Fonction de tri personnalisée, pour mettre en œuvre le tri local, nécessite deux paramètres :	- b : le noms des deuxièmes champs		sortName	data-sort-name String
sauf en-tête nom de champ du nom de tri ou de la colonne par défaut, et vous pouvez également utiliser le nom de tri personnalisé	-Le contenu affiché par une colonne peut être du code "html", tel que : & lt; b & gt; abc, mais le contenu dans le code html est organisé : abc		cellStyle	data-cell-style Fonction
Pour changer le style d'affichage (style) dans une certaine cellule, trois fonctions sont obligatoire : -Valeur : Nom du champ	-INDEX : Index	Prend en charge les classes et CSS, l'utilisation est la suivante :		interrogeable consultable dans les données Booléen

onUncheckuncheck.bs.tablerow, $element est déclenché lorsque cette ligne est décochée. Les paramètres requis sont les suivants : onCheckAllcheck-all.bs.tablerows Déclenchés lorsque toutes les lignes sont sélectionnées, les paramètres requis sont les suivants : - rows : un tableau de noms de champs des lignes nouvellement sélectionnées onUncheckAllonCheckSomeDéclenché lorsque certaines lignes (plusieurs lignes, lignes) sont sélectionnées (cocher). Les paramètres requis sont les suivants : onUncheckSomerows- rows : Tableau des noms de champs des lignes précédemment ou précédemment sélectionnées onLoadErroronColumnSwitchonColumnSearchonPageChangeonSearchonToggleonPreBodyonPostBody est chargé ou défini dans le DOM que vous utilisezonPostHeader est chargé ou est défini dans le DOM que vous utilisezonExpandRowonCollapseRowonRefreshOptions

事件名定义在jQuery中的事件名参数作用描述

onAll all.bs.table name, args 当所有触发器被触发时都执行此函数，就是所有的事件都会触发该事件，参数包括：
- name：事件名
- args：事件的数据

onClickRow click-row.bs.table row, $element, field 当单击此行的任意一处，就会触发该事件，所需参数如下（只是按原文译过来的，在bootstraptable的js中不需要这些参数，因为单击该行就会获得一个row，row中包括此行所有数据，只要通过此行某列的字段名即可取出）：
- row：哪一行（从0开始）
- $element：该行（tr）
- field：当点击该行，你想获取此行哪一格的数据，field就是此列字段名

onDblClickRow dbl-click-row.bs.table row, $element, field 和上面差不多，当双击（666）此行的任意一处，就会触发该事件，所需参数如下（只是按原文译过来的，在bootstraptable的js中不需要这些参数，因为双击该行就会获得一个row，row中包括此行所有数据，只要通过此行某列的字段名即可取出）：
- row：哪一行（从0开始）
- $element：该行（tr）
- field：当点击该行，你想获取此行哪一格的数据，field就是此列字段名

onClickCell click-cell.bs.table field, value, row, $element 当单击某一格，就会触发该事件，所需参数如下：
- field：此格所在列的字段名
- value：此格的数据
- $element：此行的此列，就是此格（td）

onDblClickCell dbl-click-cell.bs.table field, value, row, $element 当双击某一格，就会触发该事件，所需参数如下：
- field：此格所在列的字段名
- value：此格的数据
- $element：此行的此列，就是此格（td）

onSort sort.bs.table name, order 当对某列进行排序时触发该事件，所需参数如下：
- name：所排序的列的字段名
- order : la commande triée

onCheck check.bs.table row, $element lorsqu'elle est sélectionnée ( Déclenché lors de la vérification) de cette ligne, les paramètres requis sont les suivants : - row : le nom du champ de la ligne sélectionnée
- $element : l'élément DOM de cette ligne

- row : Le nom du champ. de la ligne désélectionnée
- $element : L'élément DOM de cette ligne

uncheck-all.bs.table rows Déclenché lorsque toutes les lignes sont désélectionnées. Les paramètres requis sont les suivants : - rows : Tableau des noms de champs des lignes précédemment ou précédemment sélectionnées.

uncheck-some.bs.table

Lors de la décoche de certaines lignes (déclenché lorsque plusieurs lignes, lignes) , les paramètres requis sont les suivants :

onLoadSuccess >data Déclenché lorsque toutes les données sont chargées

load-error.bs.table status, res Déclenché lorsqu'il y a une erreur lors du chargement de certaines données

column-switch.bs.table champ, coché Déclenché lorsqu'une colonne change si elle est visible ou non

column-search.bs.table champ, texte Déclenché lorsqu'une colonne est interrogée

page-change.bs.table number, size Déclenché lorsque le nombre d'éléments de données affichés sur cette page est modifié ou le numéro de page est modifié

search.bs.table texte Déclenché lors de l'interrogation de cette table

toggle.bs.table cardView Déclenché lors du changement de vue de la table

pre-body.bs.table data quand tbody> n'est pas affiché

post-body.bs.table data Déclenché lorsque le contenu dans < ;tbody>

post-header.bs.table none Déclenché lorsque le contenu de

expand-row.bs.table index, row, $detail Lors de l'affichage de la vue détaillée (cliquez pour afficher le déclencheur

collapse-row.bs.table index, ligne lorsque le détail est fermé

rafraîchir-options.bs.table options est déclenché lors de l'affichage (cliquez sur l'icône pour afficher à nouveau les détails) Déclenché après l'actualisation des éléments ou avant l'initialisation de la table (y compris la destruction et la réinitialisation)

onResetView reset-view.bs.table Déclenché lorsque la vue de la table est réinitialisée

onRefresh

pas le navigateur, mais le coin supérieur droit de le tableau

déclenché après le bouton d'actualisation)

Méthodes

Syntaxe de définition de la réponse de la méthode $('#table').bootstrapTable('method', parameter);

Getdata USECURRENTPAGE Obtenez les données de la table chargée, si vous définissez la page actuelle des données de la page actuelle (useCurrentPage ), puis renvoie les données de la page actuelle $table.bootstrapTable('getData');getRowByUniqueIdidObtenez les données d'une ligne souhaitée (définissez l'identifiant d'une ligne) $table.bootstrapTable('getRowByUniqueId', 1) ; Le 1 suivant est l'ID de la ligne que vous souhaitezloaddataChargez les données dans la table, les données d'origine seront supprimées$table.bootstrapTable('load', data);booléenRécupérez les lignes cachées (il y a beaucoup de mots officiels, mais en fait, la phrase précédente est le résumé)$table.bootstrapTable( 'getRowsHidden');mergeCellsoptionsFusionner~ (fusionner plusieurs cellules en une seule), les paramètres requis sont les suivants : - field : le nom du champ de la colonne - colspan : le nombre total de colonnes fusionnées paramsMettre à jour une certaine cellule de données. Les paramètres requis sont les suivants : - field : le nom du champ de la colonne Vous pouvez également définir {reinit:false} pour désactiver la réinitialisation de la table refreshparamsActualiser les données du serveur : secrètement (<_<) - Définissez {url:newUrl,pageNumber:pageNumber,optionsRegardez l'exemple - Veuillez consulter : textRéinitialiser le texte de recherche (texte) - Veuillez consulter : aucun Afficher le chargement... - Veuillez vérifier : aucun Masquer le chargement... - Veuillez vérifier : aucun Sélectionnez toutes les lignes de la page actuelle$table.bootstrapTable('checkAll');checkAll/uncheckAllaucunDésélectionner toutes les lignes de la page actuelle$table.bootstrapTable('uncheckAll');checkAll/uncheckAllaucunSélection inversée, ce n'est pas difficile à comprendre $ table.bootstrapTable('checkInvert');checkindexSélectionnez une ligne, l'index commence à 0$table.bootstrapTable('check', 1); - Reportez-vous à l'exemple ci-dessus, ce qui précède est la vue de l'expansion (réduction) d'une certaine ligne, c'est la vue de toutes les lignes est une sous-tableConditions d'utilisation : la vue détaillée est définie sur true

本地化，切换为另一种语言(Localizations)

默认显示英文，如果想使用中文，首先引入：

<script src="bootstrap-table-zh-CN.js"></script>

Copier après la connexion

然后是三种声明使用的方法（个人只使用第二、三种），如下：

第一种：

$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales[&#39;zh-CN&#39;]);

Copier après la connexion

第二种：

<table data-toggle="table" data-locale="zh-CN"></table>

Copier après la connexion

第三种：

$(&#39;table&#39;).bootstrapTable({locale:&#39;zh-CN&#39;});

Copier après la connexion

以下说明除了数字外均为中文默认显示，本来不用写的，只要引入就显示中文了

Nom de la méthode	Paramètres	Description	Exemple
getOptions	aucun	Renvoyer l'objet de chaque élément	$table.bootstrapTable('getOptions'); - Veuillez vérifier : getOptions
getSelections	aucun	Renvoie les lignes sélectionnées Lorsqu'aucune ligne n'est sélectionnée, un tableau vide est renvoyé (mais il n'est pas indéfini ou nul, il l'est. la longueur Un tableau vide de 0, vous pouvez donc déterminer si la longueur est supérieure à 0 pour déterminer si une ligne est sélectionnée)	$table.bootstrapTable('getSelections'); - Veuillez vérifier : getSelections
getAllSelections	aucun	Renvoie toutes les lignes sélectionnées (texte original : contient une recherche ou un filtre, qui est en fait le données filtrées que vous choisissez), lorsqu'aucune ligne n'est sélectionnée, un tableau vide est renvoyé	$table.bootstrapTable('getAllSelections'); - Veuillez consulter : getAllSelections
showAllColumns	aucun	Afficher toutes les colonnes	$table.bootstrapTable('showAllColumns'); - Afficher simplement toutes les colonnes , rien à dire
hideAllColumns	aucun	Masquer toutes les colonnes	$table.bootstrapTable('hideAllColumns');<所有> -Suspendre toutes les colonnes
			- Veuillez vérifier : getData
			- Veuillez vérifier : getRowByUniqueId
			- Veuillez consulter : charger
append	data	Ajouter les données après la dernière ligne	$ table.bootstrapTable('append', data);data peut être un tableau - Veuillez consulter : append
prepend	data	est également ajouté, juste avant la première ligne	$table.bootstrapTable('prepend', data);data peut être un tableau - Veuillez vérifier : prepend
supprimer	params	Supprimer une ou plusieurs lignes de données que vous avez sélectionnées	$table.bootstrapTable(' supprimer ', {field : 'id', valeurs : ids}); - id : le champ de la ligne (lignes, une ou plusieurs lignes) à supprimer - valeurs : la ligne à supprimer Tableau de - Veuillez consulter : supprimer
removeAll	-	Supprimer toutes les données du tableau	$table.bootstrapTable('removeAll'); - Veuillez consulter : removeAll
removeByUniqueId	-	Supprimer une certaine ligne de données (définir l'identifiant d'une certaine ligne)	$table.bootstrapTable('removeByUniqueId', 1); Le 1 suivant est l'ID de la ligne que vous souhaitez supprimer ; - Veuillez vérifier : removeByUniqueId
insertRow	params	Ajouter une nouvelle ligne, les paramètres requis sont les suivants suit : - index : Où voulez-vous insérer (tant que vous le souhaitez, vous pouvez insérer où vous voulez, insérer qui vous voulez) - ligne : Les données que vous souhaitez insérer	$table.bootstrapTable(' insertRow', {index: 1, row: row}); - Veuillez consulter : insertRow
updateRow	params	Mettre à jour les données de la ligne, les paramètres requis sont les suivants : - index : l'index de la ligne à mettre à jour - row : les nouvelles données que vous souhaitez modifier	$table .bootstrapTable('updateRow', {index : 1, row: row}); - Veuillez vérifier : updateRow
updateByUniqueId	params	Mettre à jour une ligne de données, les paramètres requis sont les suivants : - id : Voulez-vous souhaitez mettre à jour cet identifiant de ligne (unique), (tant que vous le souhaitez, modifiez celui que vous voulez) - ligne : les nouvelles données que vous souhaitez modifier	$table.bootstrapTable('updateByUniqueId' , {id : 3, row : row}); - Veuillez consulter : updateByUniqueId
showRow	params	Afficher une ligne spécifique, Les paramètres requis incluent au moins un des éléments suivants : - id : l'index de la ligne à afficher - uniqueId : l'identifiant de cette ligne	$table .bootstrapTable('showRow ', {index:1}); - Veuillez consulter : showRow/hideRow
hideRow	params	Masquer une ligne spécifique Les paramètres requis incluent au moins l'un des éléments suivants : - id : l'index de la ligne à masquer - uniqueId : l'identifiant de cette ligne	$table.bootstrapTable('hideRow', {index:1}); > getRowsHidden

- index : l'index de la ligne où se trouve la cellule à fusionner localisé	- rowspan : le nombre total de lignes fusionnées	$table.bootstrapTable('mergeCells ', {index : 1, field : 'name', colspan : 2, rowspan : 3}); - Veuillez consulter : mergeCells	updateCell
- index : L'index de la ligne où se trouve la cellule à fusionner (index)	- value : les nouvelles données à remplacer	$ table.bootstrapTable('updateCell',{index:index,field:'id',value:value});
- Vous pouvez définir {silent:true} sur	Actualiser	pageSize:pageSize} pour modifier l'adresse demandée, le numéro de page et le nombre d'éléments affichés sur chaque page - Vous pouvez définir {query:{foo:'bar '}} pour augmenter les paramètres spécifiques$table.bootstrapTable('refresh'); - Veuillez consulter : refresh	refreshOptions
	refreshOptions		resetSearch
	resetSearch		showLoading
	showLoading/hideLoading		hideLoading
	showLoading/hideLoading		checkAll
	- Veuillez vérifier :		uncheckAll
	- Veuillez cocher :		checkInvert

	- Veuillez consulter : cocher/décocher
décocher	index	Désélectionner une ligne, l'index est à partir de 0 Début	$table.bootstrapTable('uncheck', 1); - Veuillez consulter : cocher/décocher
checkBy	params	Sélectionnez une ligne à travers un tableau. Les paramètres requis sont les suivants : - field : le nom du champ à sélectionner - values : les valeurs (tableau) à sélectionner. sélectionné	Officiellement, il y a un exemple : - $("#table").bootstrapTable("checkBy", { field:"field_name", valeurs:["value1","value2", " value3"]}); - Veuillez consulter : checkBy/uncheckBy
uncheckBy	params	pass array Pour sélectionner une ligne, les paramètres requis sont les suivants : - field : le nom du champ à désélectionner - values : les valeurs (tableau) à désélectionner	$ ("#table") .bootstrapTable("uncheckBy", { field:"field_name", valeurs:["value1","value2","value3"]}); - Veuillez vérifier : checkBy/ uncheckBy
resetView	params	Changer le style du tableau, par exemple en changeant la hauteur du tableau	$table.bootstrapTable('resetView '); - Veuillez vérifier : resetView
resetWidth	aucun	Modifier automatiquement la largeur de l'en-tête et du pied de page (traduit en pieds, arbitraire) pour s'adapter à la largeur de chaque colonne	$table.bootstrapTable('resetWidth');
détruire	aucun	Détruisez le formulaire A ! T! T! Ah ! C! K!	$table.bootstrapTable('destroy'); - Veuillez consulter : destroy
showColumn	field	Afficher des colonnes spécifiques	$table.bootstrapTable('showColumn', 'name'); - Veuillez consulter : showColumn/hideColumn
hideColumn	field	Masquer des colonnes spécifiques	$table.bootstrapTable('hideColumn', 'name'); - Veuillez vérifier : showColumn/hideColumn
getHiddenColumns	-	Obtenir toutes les colonnes masquées	$ table.bootstrapTable ('getHiddenColumns');
getVisibleColumns	-	Obtenir toutes les colonnes affichées	$table.bootstrapTable ('getVisibleColumns' );
scrollTo	value	Défilement... jusqu'à quelle position, l'unité est 'px', si elle est définie sur 'bottom', Wow, félicitations, vous avez atteint la fin du tableau	$table.bootstrapTable('scrollTo', 0); - Veuillez vérifier : scrollTo
getScrollPosition	aucun	Obtenir la position de défilement actuelle Vous savez que l'unité est 'px'	$table.bootstrapTable('getScrollPosition');
filterBy	aucun	ne peut être utilisé que côté client (côté client, par rapport au côté serveur) pour filtrer les données dans le tableau Par exemple : - Vous pouvez définir {age:10} pour afficher uniquement les données avec l'âge de 10 ans - Non seulement seul, vous pouvez également voler à deux, voire à plusieurs, en définissant {age : 10, hairColor : ["blue", "red", "green"]}, de manière à obtenir un groupe de 10 ans. -vieux avec des couleurs de cheveux bleu, rouge, vert...data	$table.bootstrapTable('filterBy', { identifiant : [1, 2, 3] }); - Veuillez vérifier : filterBy
selectPage	page	Aller à une page spécifique	$table.bootstrapTable('selectPage', 1); - Veuillez consulter : selectPage/prevPage/nextPage
prevPage	aucun	Aller à la page précédente	$table.bootstrapTable('prevPage'); - Veuillez vérifier : selectPage/prevPage/nextPage
page suivante	aucun	Passer à la page suivante	$table.bootstrapTable('nextPage'); - S'il vous plaît vérifiez : selectPage/prevPage/nextPage
togglePagination	aucun	Pour les mots, veuillez consulter l'exemple de papier	$table.bootstrapTable('togglePagination'); - Veuillez consulter : togglePagination
toggleView	aucun	Changer la vue	$table.bootstrapTable('toggleView'); - Veuillez consulter : toggleView
expandRow	index	Conditions d'utilisation : la vue détaillée est définie sur true, sinon la fonction de vue ne peut pas être utilisée, et cela ne sert à rien - Utilisez le paramètre index pour développer la vue détaillée de cette colonne	- Veuillez consulter : expandRow-collapseRow
collapseRow	index	Conditions disponibles : vue détaillée paramètre Pour true - fermez la vue détaillée de cette colonne via l'index des paramètres	- veuillez consulter : expandRow-collapseRow
expandAllRows Il y a des changements dans la nouvelle version (à l'origine "expandAllRow"), les mêmes ci-dessous Merci à @zhq449681061 Vue détaillée de	$table.bootstrapTable('expandAllRows'		collapseAllRows
- Fermez la vue détaillée de toutes les colonnes	$table.bootstrapTable ("collapseAllRows"); - reportez-vous à ce qui précède

名称	参数	默认	说明
formatLoadingMessage	-	'Loading, please wait…'	“加载中，请等待……”
formatRecordsPerPage	pageNumber	'%s records per page'	“每页显示 15 条记录”
formatShowingRows	pageFrom, pageTo, totalRows	'Showing %s to %s of %s rows'	“显示第 1 到第 15 条记录”
formatDetailPagination	totalRows	'Showing %s rows'	“总共 15 条记录”
formatSearch	-	'Search'	“搜索”（占位符）
formatNoMatches	-	'No matching records found'	“没有找到匹配的记录”
formatRefresh	-	'Refresh'	“刷新”（鼠标悬浮显示的文字，下同）
formatToggle	-	'Toggle'	“切换”
formatColumns	-	'Columns'	“列”

　　有错请留言，看到后会及时更改，如果像那种翻译的行写成列或漏字等低级错误，看英文名称就知道有没有错了，主要就是为了让你们知道怎么用，会持续检查哪有误、漏译，如果认为有译得不妥的地方，也可以留言一起讨论，谢谢

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：

bootstrap table

source：php.cn

Article précédent：Tutoriel détaillé sur la table dynamique de BootStrapTable [avec code] Article suivant：Utilisez Bootstrap-Table pour implémenter la pagination et le tri

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur