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.
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 !
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.
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.
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 = {
// 当点击 时触发
'click .delete': function (e,value,row,index) {
// 在 console 打印出整行数据
console.log(row);
}
};
$('#tb_departments').bootstrapTable({
url: '/frontend/bootstrap-table/user.json', //请求后台的 URL（*）
method: 'get', //请求方式（*）
// data: data, //当不使用上面的后台请求时，使用data来接收数据
toolbar: '#toolbar', //工具按钮用哪个容器
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', 'all', 'selected'.
columns: [{
checkbox: true //复选框标题，就是我们看到可以通过复选框选择整行。
}, {
field: 'id', title: 'ID' //我们取json中id的值，并将表头title设置为ID
}, {
field: 'username', title: '用户名' //我们取 json 中 username 的值，并将表头 title 设置为用户名
},{
field: 'sex', title: '性别' //我们取 json 中 sex 的值，并将表头 title 设置为性别
},{
field: 'city', title: '城市' //我们取 json 中 city 的值，并将表头 title 设置为城市
},{
field: 'sign', title: '签名' //我们取 json 中 sign 的值，并将表头 title 设置为签名
},{
field: 'classify', title: '分类' //我们取 json 中 classify 的值，并将表头 title 设置为分类
},{
//ormatter:function(value,row,index) 对后台传入数据 进行操作 对数据重新赋值 返回 return 到前台
// events 触发事件
field: 'Button',title:"操作",align: 'center',events:operateEvents,formatter:function(value,row,index){
var del = '<button type="button" class="btn btn-danger delete">删除</button>'
return del;
}
}
],
responseHandler: function (res) {
return res.data //在加载远程数据之前，处理响应数据格式.
// 我们取的值在data字段中，所以需要先进行处理，这样才能获取我们想要的结果
}
});
</script>
</body>
</html>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 ~
Voici les points clés. Ils sont expliqués pour permettre aux amis de comprendre plus facilement l'utilisation du plug-in.
选择需要初始化表格。
$('#tb_departments').bootstrapTable({})
这个就像table的入口一样。
<table id="tb_departments" data-filter-control="true" data-show-columns="true"></table>columns:[{field: 'Key', title: '文件路径',formatter: function(value,row,index){} }]events:operateEvents
window.operateEvents = {
'click .download': 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.
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 :
<script src="js/bootstrap-table-export.js"></script> showExport: true, //是否显示导出 exportDataType: basic, //导出数据类型，支持：'基本'，'全部'，'选中' exportTypes:['json', 'xml', 'csv', 'txt', 'sql', 'excel'] //导出类型
<script src="extensions/auto-refresh/bootstrap-table-auto-refresh.js"></script> autoRefresh: true, //设置 true 为启用自动刷新插件。这并不意味着启用自动刷新 autoRefreshStatus: true, //设置 true 为启用自动刷新。这是表加载时状态自动刷新 autoRefreshInterval: 60, //每次发生自动刷新的时间（以秒为单位） autoRefreshSilent: true //设置为静默自动刷新
<script src="extensions/copy-rows/bootstrap-table-copy-rows.js"></script> showCopyRows: true, //设置 true 为显示复制按钮。此按钮将所选行的内容复制到剪贴板 copyWithHidden: true, //设置 true 为使用隐藏列进行复制 copyDelimiter: ', ', //复制时，此分隔符将插入列值之间 copyNewline: '\n' //复制时，此换行符将插入行值之间
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
