DaiCuoBBs

 找回密码
 免费注册

QQ登录

只需一步,快速开始

[Bootstrap] bootstrap-table的基本用法

[复制链接]
admin 发表于 2019-11-23 21:50:01 | 显示全部楼层 |阅读模式
1、通过数据属性方式 https://examples.bootstrap-table.com/welcome.html
  1. <table
  2.   id="table"
  3.   data-toolbar="#toolbar"
  4.   data-search="true"
  5.   data-show-refresh="true"
  6.   data-show-toggle="true"
  7.   data-show-fullscreen="true"
  8.   data-show-columns="true"
  9.   data-show-columns-toggle-all="true"
  10.   data-detail-view="true"
  11.   data-show-export="true"
  12.   data-click-to-select="true"
  13.   data-detail-formatter="detailFormatter"
  14.   data-minimum-count-columns="2"
  15.   data-show-pagination-switch="true"
  16.   data-pagination="true"
  17.   data-id-field="id"
  18.   data-page-list="[10, 25, 50, 100, all]"
  19.   data-show-footer="true"
  20.   data-side-pagination="server"
  21.   data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data"
  22.   data-response-handler="responseHandler">
  23. </table>
复制代码
  1. <table
  2.   id="table"
  3.   data-toggle="table"
  4.   data-height="460"
  5.   data-url="json/data1.json">
  6.   <thead>
  7.   <tr>
  8.     <th data-field="id" data-title="Item-ID">ID</th>
  9.     <th data-field="name" data-title="other title">Item Name</th>
  10.     <th data-field="price">Item Price</th>
  11.   </tr>
  12.   </thead>
  13. </table>
复制代码
  1. <table
  2.   id="table"
  3.   data-toggle="table"
  4.   data-height="460"
  5.   data-pagination="true"
  6.   data-side-pagination="server"
  7.   data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data">
  8.   <thead>
  9.   <tr>
  10.     <th data-field="id">ID</th>
  11.     <th data-field="name" data-sortable="true" data-sort-name="id" data-sort-order="desc">Item Name</th>
  12.     <th data-field="price">Item Price</th>
  13.   </tr>
  14.   </thead>
  15. </table>
复制代码

2、JavaScript以表格格式显示数据

  1. <table id="table"></table>
复制代码
  1. $('#table').bootstrapTable({
  2.   columns: [{
  3.     field: 'id',
  4.     title: 'Item ID'
  5.   }, {
  6.     field: 'name',
  7.     title: 'Item Name',
  8.     formatter: 'test'
  9.   }, {
  10.     field: 'price',
  11.     title: 'Item Price'
  12.   }],
  13.   data: [{
  14.     id: 1,
  15.     name: 'Item 1',
  16.     price: '$1'
  17.   }, {
  18.     id: 2,
  19.     name: 'Item 2',
  20.     price: '$2'
  21.   }]
  22. });
  23. function test(value,row,index,field){
  24.         return '<b>'+value+'</b>';
  25. }
复制代码

您需要登录后才可以回帖 登录 | 免费注册

本版积分规则

QQ|Archiver|手机版|小黑屋|大错站长论坛

GMT+8, 2020-6-3 10:30 , Processed in 0.054297 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表