Tableexport

ブートストラップテーブルフォームプラグインの使用法とデータのエクスポート



Bootstrap Table Form Plugin Usage



記事のディレクトリ

1はじめに

2、ページ参照

  • 公式に推奨されている参照方法でブートストラップとブートストラップテーブルを容易にするために、ソースコードをダウンロードして自分でダウンロードしたいと思います。
  • Excelをエクスポートするために必要な追加の4jsは、次の2つのアドレスからこれらの4つのファイルを見つけることができますが、エクスポートせずに無視することができます。
  • アドレス1をダウンロード： https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/export
  • アドレス2をダウンロード： https://github.com/hhurz/tableExport.jquery.plugin
  • HTMLコード

3、簡単な例

  • HTMLで定義するtableラベル
  • bootstrapTableを使用するには、最初のパスdata Attributeメソッドの2つの方法があります。柔軟性がないため、デモをあまり行わないでください。
Item ID Item Name Item Price
  • JavaScriptを使用して、bootstrap-tableを学習し、そのAPIを学習し、一般的に使用される基本的なAPIを紹介します。詳細については公式ドキュメントを確認するか、このブロガーの翻訳を参照してください。 https://blog.csdn.net/rickiyeat/article/details/56483577
  • The page introduces the following JS
$('#table').bootstrapTable({ // corresponds to the id of the table tag Url: base_path + '/product/list', //AJAX gets the url of the table data Striped: true, // Whether to display the line spacing color (zebra crossing) Pagination: true, // whether to display pagination (*) sidePagination: 'server', //page mode: client client paging, server server paging (*) paginationLoop: false, / / ​​can continue to press when the current page is a boundary queryParams: function (params) { // Parameters sent when requesting server data, you can add additional query parameters here, return false to terminate the request return { Limit: params.limit, // number of data to display per page Offset: params.offset, // the starting line number of the data displayed per page //sort: params.sort, // the field to sort //sortOrder: params.order, // collation //dataId: $('#dataId').val() // additional parameters added } }, / / ​​pass parameters (*) pageNumber: 1, / / ​​Initialize the first page, the default first page pageSize: 10, //Number of rows per page (*) pageList: [10, 25, 50, 100, 'all'], //Number of rows per page (*) contentType: 'application/x-www-form-urlencoded', / / ​​an encoding. Need to be used in the post request. The get request used here, comment out this sentence can also get the data //search: true, // Whether to display the table search, this search is a client search, will not enter the server, so personal feelings are not meaningful strictSearch: false, //whether global match, false fuzzy match showColumns: true, //display all columns showRefresh: true, // whether to display the refresh button minimumCountColumns: 2, // minimum number of allowed columns clickToSelect: false, // whether to enable click to select the row //height: 500, //row height, if the height property is not set, the table automatically feels the height of the table according to the number of records. //uniqueId: 'id', //the unique identifier of each line, generally the primary key column showToggle: true, //Show toggle button for detail view and list view cardView: false, // whether to display the detailed view detailView: false, // whether to display the parent and child tables Cache: false, // set to false disable AJAX data cache, default is true Sortable: true, // whether to enable sorting sortOrder: 'asc', //sort by sortName: 'sn', // the field to sort columns: [ { Field: 'sn', // return the name in the json data Title: 'order number', // table header display text Align: 'center', // centered left and right Valign: 'middle' // centered up and down }, { field: 'productname', Title: 'product name', align: 'center', valign: 'middle' }, { field: 'cost', Title: 'price (¥)', align: 'center', valign: 'middle', sortable: true }, { field: 'brankname', Title: 'Brand', align: 'center', valign: 'middle', }, { field: 'specificationvalues', Title: 'Specification', align: 'center', valign: 'middle', }, { field: 'areaname', Title: 'Place of Origin', align: 'center', valign: 'middle', } ], onLoadSuccess: function () { //execute when loading successfully Console.info('Load successfully') }, onLoadError: function () { //execute when the load fails Console.info('Load data failed') }, //>>>>>>>>>>>>>>Export excel form settings showExport: phoneOrPc (), / / ​​whether to display the export button (this method is written to determine whether the terminal is a computer or a mobile phone, the computer returns true, the phone returns falsee, the phone does not display the button) exportDataType: 'basic', //basic', 'all', 'selected'. exportTypes: ['excel', 'xlsx'], //export type //exportButton: $('#btn_export'), // Export event for button btn_export binding Custom export button (can be used) exportOptions: { //ignoreColumn: [0,0], //Ignore the index of a column fileName: 'data export', //file name setting worksheetName: 'Sheet1', //Table workspace name tableName: 'Product data table', excelstyles: ['background-color', 'color', 'font-size', 'font-weight'], //onMsoNumberFormat: DoOnMsoNumberFormat } //Export excel table settings<<<<<<<<<<<<<<<<< })

4、場所に注意を払う

  • テスト時には、ページは最初に「クライアント」を選択します。ページはクライアントであるため、データをエクスポートすると、「基本」、「すべて」、「選択済み」を簡単に定義できます。ページがサーバーの場合、「すべて」を選択しても、現在のページが選択されます。 （ 'basic'）、すべてをエクスポートする場合は、最初にページのエントリ数を表示してから、現在のページをエクスポートするとすべてのデータになります。
  • ページが サーバ 返されるjson文字列には2つのデータが含まれている必要があります。1つはtotal 'これがすべてのデータ数です。別の「行」は「現在のページ」のコンテンツです。 （以下のjson文字列形式を参照してください）
    画像

5、デモマップ

画像

著者：川への小川
出典：CSDN
元の： https://blog.csdn.net/javayoucome/article/details/80081771
著作権表示：この記事はブロガーのオリジナル記事です。ブログ投稿リンクを添付してください。