ホームページ > 記事 > ウェブフロントエンド > Bootstrap-Table を使用して満足のいくテーブル関数を 3 分で実現する
Bootstrap-Table を使用して満足のいくテーブル関数を 3 分で実現する
- 青灯夜游転載
- 2021-04-30 11:00:102670ブラウズ
この記事では、Bootstrap と jQuery に基づいたテーブル プラグイン Bootstrap-Table の使用方法を共有します。一定の参考値があるので、困っている友達が参考になれば幸いです。
1. はじめに
プロジェクト名からわかるように、これは Bootstrap テーブル プラグインです。テーブル表示の形式は、ほとんどの場合、すべてのフロントエンド作業に関係しており、Bootstrap Table は、迅速なテーブル作成、クエリ、ページング、並べ替えなどの一連の機能を提供します。 [関連する推奨事項: "bootstrap チュートリアル "]
プロジェクト アドレス: https://github.com/wenzhixin/bootstrap-table
可能Bootstrap と jQuery テクノロジはやや時代遅れですが、歴史的なテクノロジの選択や古いプロジェクトのせいでこれら 2 つのライブラリをまだ使用している場合、このプロジェクトは間違いなくあなたを笑顔にさせ、テーブル表示の要件を満たすのは簡単です。
2. モード
Boostatrp テーブルは、クライアント モードとサーバー モードの 2 つのモードに分かれています。
Client: サーバーがロードする必要があるデータをデータ インターフェイスを通じて一度に表示し、それを json に変換してテーブルを生成します。表示行数やページングなどを自分で定義でき、現時点ではリクエストはサーバーに送信されません。
サーバー: 設定されたページあたりのレコード数と現在表示されているページに基づいて、クエリのためにサーバーにデータを送信します。
3. 実際の操作
ヒント: 説明はすべてコード内のコメントに示されています。注意深く読んでください。
最も単純な CDN 導入方法を使用しており、コードを直接実行できます。コードをコピーし、json ファイルへのパスを構成して効果を確認します。
3.1 すぐに始めましょう
コメント内のアスタリスクは、パラメータを記述する必要があることを示しているため、多くを語らずにコードについて説明しましょう。サンプル コード:
<!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>上記のコードは、基本的な API を使用して基本的な機能を実装する方法を示しています。サンプル コードにはすべての API がリストされているわけではありません。このライブラリには興味深い機能がたくさんあり、皆さんに発見していただくのを待っています。諺にもあるように、マスターを実践に導くのは自分自身です~
3.2 逆アセンブルと説明
以下がポイントです 友達がプラグインを使いやすいように分かりやすく説明しています。
3.2.1 初期化部分
选择需要初始化表格。
$('#tb_departments').bootstrapTable({})
这个就像table的入口一样。
<table id="tb_departments" data-filter-control="true" data-show-columns="true"></table>3.2.2 データ読み取り部分
columns:[{field: 'Key', title: '文件路径',formatter: function(value,row,index){} }]- フィールド json 中間キー値ペアの Key
- title は、テーブル ヘッダーに表示されるコンテンツです。
- formatter は、データ コンテンツを変更する必要がある場合に使用される関数タイプです。例: エンコード変換
3.2.3 イベント トリガー
events:operateEvents
window.operateEvents = {
'click .download': function (e,value,row,index) {
console.log(row);
}
}テーブルを処理する必要があることが多いため、イベント トリガーが適しています。たとえば、行データを記録したり、トリガーを使用してカスタマイズされた関数を実行したりできます。
4. 拡張機能
作業を効率化するために独自のホイールを発明することなく、より多くのテーブル関数を簡単に実装できるようにするいくつかの拡張機能を紹介します (公式 Web サイトにアクセスして、拡張機能を見る 具体的な使用方法については、公式が多数の拡張機能をまとめています）。古いルールは次のコードに直接適用されます:
4.1 テーブルのエクスポート
<script src="js/bootstrap-table-export.js"></script> showExport: true, //是否显示导出 exportDataType: basic, //导出数据类型，支持：'基本'，'全部'，'选中' exportTypes:['json', 'xml', 'csv', 'txt', 'sql', 'excel'] //导出类型
4.2 自動更新
<script src="extensions/auto-refresh/bootstrap-table-auto-refresh.js"></script> autoRefresh: true, //设置 true 为启用自动刷新插件。这并不意味着启用自动刷新 autoRefreshStatus: true, //设置 true 为启用自动刷新。这是表加载时状态自动刷新 autoRefreshInterval: 60, //每次发生自动刷新的时间（以秒为单位） autoRefreshSilent: true //设置为静默自动刷新
4.3 行のコピー
<script src="extensions/copy-rows/bootstrap-table-copy-rows.js"></script> showCopyRows: true, //设置 true 为显示复制按钮。此按钮将所选行的内容复制到剪贴板 copyWithHidden: true, //设置 true 为使用隐藏列进行复制 copyDelimiter: ', ', //复制时，此分隔符将插入列值之间 copyNewline: '\n' //复制时，此换行符将插入行值之间
5。
#この記事ではBootstrap-Tableの使い方を簡単に解説していますので、テーブル関数の実装に悩んでいる方はHelloGitHubが推奨しているこのプラグインを利用すると良いでしょう。 Web ページ上でフォームを作成するのは非常に速いことがわかります。友人がさらに興味深い機能を発見することを楽しみにしています。 注: 上記の js 部分では関数形式を使用していません。慣れてきたら関数形式を使用することをお勧めします。これにより、再利用が容易になり、コードがより標準化されたように見えます。 プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！
以上がBootstrap-Table を使用して満足のいくテーブル関数を 3 分で実現するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。