Maison > Article > interface Web > Utilisez Bootstrap-Table pour obtenir des fonctions de table satisfaisantes en 3 minutes

Utilisez Bootstrap-Table pour obtenir des fonctions de table satisfaisantes en 3 minutes

青灯夜游avant: 2021-04-30 11:00:102610parcourir

Cet article partagera avec vous l'utilisation du plug-in de table Bootstrap-Table basé sur Bootstrap et jQuery. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

1. Introduction

Comme vous pouvez le constater d'après le nom du projet, il s'agit d'un plug-in de table Bootstrap. La forme d'affichage du tableau est presque toujours impliquée dans tout travail frontal. Bootstrap Table fournit une série de fonctions telles que la création rapide de tableaux, la requête, la pagination, le tri, etc. [Recommandations associées : "tutoriel bootstrap"]

Adresse du projet : https://github.com/wenzhixin/bootstrap-table

Peut-être Les technologies Bootstrap et jQuery sont quelque peu obsolètes, mais si vous utilisez toujours ces deux bibliothèques en raison d'une sélection technologique historique ou d'anciens projets, alors ce projet vous fera certainement sourire et il sera facile de répondre aux exigences d'affichage des tableaux !

2. Mode

Boostatrp Table est divisé en deux modes : le mode client et le mode serveur.

Client : affichez les données que le serveur doit charger en une seule fois via l'interface de données, puis convertissez-les en json et générez une table. Nous pouvons définir nous-mêmes le nombre de lignes affichées, de pagination, etc., et aucune requête ne sera envoyée au serveur pour le moment.
Serveur : Envoyez des données au serveur pour une requête en fonction du nombre défini d'enregistrements par page et de la page actuellement affichée.

3. Opérations pratiques

Conseils : Les explications sont affichées dans les commentaires dans le code. soigneusement.

Nous utilisons la méthode d'introduction CDN la plus simple et le code peut être exécuté directement. Copiez le code et configurez le chemin d'accès au fichier json pour voir l'effet.

3.1 Commencez vite

L'astérisque dans le commentaire indique que le paramètre doit être écrit, parlons donc du code sans trop en dire. Exemple de code :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello, Bootstrap Table!</title>
    // 引入 css
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
</head>
<body>
    // 需要填充的表格
    <table id="tb_departments" data-filter-control="true" data-show-columns="true"></table>
// 引入js
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
<script>
        window.operateEvents = {
            // 当点击 时触发
            &#39;click .delete&#39;: function (e,value,row,index) {
                // 在 console 打印出整行数据
                console.log(row);
            }
        };

        $(&#39;#tb_departments&#39;).bootstrapTable({
            url: &#39;/frontend/bootstrap-table/user.json&#39;,         //请求后台的 URL（*）
            method: &#39;get&#39;,                      //请求方式（*）
            // data: data,                      //当不使用上面的后台请求时，使用data来接收数据
            toolbar: &#39;#toolbar&#39;,                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为 true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: false,                    //是否启用排序
            sortOrder: "asc",                   //排序方式
            sidePagination: "client",           //分页方式：client 客户端分页，server 服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 6,                        //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以个人感觉意义不大
            strictSearch: true,                 //启用严格搜索。禁用比较检查。
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 500,                        //行高，如果没有设置 height 属性，表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                  //是否显示父子表
            showExport: true,                   //是否显示导出
            exportDataType: "basic",            //basic&#39;, &#39;all&#39;, &#39;selected&#39;.
            columns: [{
                checkbox: true     //复选框标题，就是我们看到可以通过复选框选择整行。
            }, {
                field: &#39;id&#39;, title: &#39;ID&#39;       //我们取json中id的值，并将表头title设置为ID
            }, {
                field: &#39;username&#39;, title: &#39;用户名&#39;         //我们取 json 中 username 的值，并将表头 title 设置为用户名
            },{
                field: &#39;sex&#39;, title: &#39;性别&#39;                //我们取 json 中 sex 的值，并将表头 title 设置为性别
            },{
                field: &#39;city&#39;, title: &#39;城市&#39;               //我们取 json 中 city 的值，并将表头 title 设置为城市
            },{
                field: &#39;sign&#39;, title: &#39;签名&#39;               //我们取 json 中 sign 的值，并将表头 title 设置为签名
            },{
                field: &#39;classify&#39;, title: &#39;分类&#39;           //我们取 json 中 classify 的值，并将表头 title 设置为分类
            },{
                //ormatter:function(value,row,index) 对后台传入数据 进行操作 对数据重新赋值 返回 return 到前台
                // events 触发事件
                field: &#39;Button&#39;,title:"操作",align: &#39;center&#39;,events:operateEvents,formatter:function(value,row,index){
                    var del = &#39;<button type="button" class="btn btn-danger delete">删除</button>&#39;
                    return del;
                }
            }
            ],
            responseHandler: function (res) {
                return res.data      //在加载远程数据之前，处理响应数据格式.
                // 我们取的值在data字段中，所以需要先进行处理，这样才能获取我们想要的结果
            }
        });
</script>
</body>
</html>

Utilisez Bootstrap-Table pour obtenir des fonctions de table satisfaisantes en 3 minutes

Le code ci-dessus montre comment implémenter des fonctions de base via des API de base. L'exemple de code ne répertorie pas toutes les API. Il y a de nombreuses fonctions intéressantes dans cette bibliothèque qui attendent que chacun les découvre. Comme dit le proverbe, c'est à soi d'amener le maître à pratiquer ~

3.2 Démontage et explication

Voici les points clés. Ils sont expliqués pour permettre aux amis de comprendre plus facilement l'utilisation du plug-in.

3.2.1 Partie initialisation

选择需要初始化表格。
$(&#39;#tb_departments&#39;).bootstrapTable({})
这个就像table的入口一样。
<table id="tb_departments" data-filter-control="true" data-show-columns="true"></table>

3.2.2 Partie lecture des données

columns:[{field: &#39;Key&#39;, title: &#39;文件路径&#39;,formatter: function(value,row,index){} }]

champ json clé du milieu Le titre Key
dans la paire de valeurs est le contenu affiché dans l'en-tête du tableau.
formatter est un type de fonction qui sera utilisé lorsque nous devrons modifier le contenu des données. Exemple : conversion d'encodage

3.2.3 Déclencheur d'événement

events:operateEvents
 window.operateEvents = {
        &#39;click .download&#39;: function (e,value,row,index) {
            console.log(row);
        }
   }

Parce que nous devons souvent traiter des tables, les déclencheurs d'événements sont un bon choix. Par exemple : il peut enregistrer nos données de ligne et utiliser des déclencheurs pour exécuter des fonctions personnalisées, etc.

4. Extensions

Présentation de plusieurs extensions qui nous permettent d'implémenter facilement plus de fonctions de table sans avoir à inventer nos propres roues pour rendre notre travail plus efficace (vous pouvez également vous rendre sur le site officiel pour voir les extensions Pour des méthodes d'utilisation spécifiques, le responsable a collecté un grand nombre d'extensions). Les anciennes règles vont directement au code :

4.1 Exportation de table

<script src="js/bootstrap-table-export.js"></script> 
showExport: true,                                           //是否显示导出
exportDataType: basic,								        //导出数据类型，支持：&#39;基本&#39;，&#39;全部&#39;，&#39;选中&#39;
exportTypes:[&#39;json&#39;, &#39;xml&#39;, &#39;csv&#39;, &#39;txt&#39;, &#39;sql&#39;, &#39;excel&#39;]   //导出类型

4.2 Actualisation automatique

<script src="extensions/auto-refresh/bootstrap-table-auto-refresh.js"></script>
autoRefresh: true, 							    //设置 true 为启用自动刷新插件。这并不意味着启用自动刷新
autoRefreshStatus: true,						//设置 true 为启用自动刷新。这是表加载时状态自动刷新
autoRefreshInterval: 60,						//每次发生自动刷新的时间（以秒为单位）
autoRefreshSilent: true							//设置为静默自动刷新

4.3 Copier les lignes

<script src="extensions/copy-rows/bootstrap-table-copy-rows.js"></script>
showCopyRows: true,									//设置 true 为显示复制按钮。此按钮将所选行的内容复制到剪贴板
copyWithHidden: true,								//设置 true 为使用隐藏列进行复制
copyDelimiter: &#39;, &#39;,								//复制时，此分隔符将插入列值之间
copyNewline: &#39;\n&#39;									//复制时，此换行符将插入行值之间

5. >

Cet article explique simplement comment utiliser Bootstrap-Table. Les amis qui s'inquiètent de l'implémentation de la fonction table peuvent utiliser ce plug-in recommandé par HelloGitHub. Vous constaterez que la création de formulaires sur le Web peut être très rapide et j'ai hâte que vos amis découvrent des fonctions plus intéressantes.

Remarque : la partie js ci-dessus n'utilise pas de formulaire fonctionnel. Il est recommandé d'utiliser le formulaire fonctionnel une fois que vous vous y êtes familiarisé. Cela facilitera également la réutilisation et rendra le code plus standardisé.

Pour plus de connaissances sur la programmation, veuillez visiter :

Introduction à la programmation ! !

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!

json jquery bootstrap 接口 JS 事件 table github https

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Une brève discussion sur la façon de vérifier la correspondance entre les versions bootstrap et jQueryArticle suivant：Une brève discussion sur la façon de vérifier la correspondance entre les versions bootstrap et jQuery

Articles Liés

Voir plus