bootstrap-table官方文档常用项总结 (持续更新中)

最新推荐文章于 2022-11-10 15:12:34 发布
giveMe_Five
最新推荐文章于 2022-11-10 15:12:34 发布
阅读量1.4k
点赞数 1
分类专栏： bootstrap-table 文章标签： bootstrap-table
本文链接：https://blog.csdn.net/giveMe_Five/article/details/79869704
版权
bootstrap-table 专栏收录该内容
2 篇文章 0 订阅
订阅专栏
 
  <!DOCTYPE html> 
 
 
  < 
  html 
  > 
 
 
  < 
  meta 
   
  charset 
  = 
  "utf-8" 
  > 
 
 
  < 
  head 
  > 
 
 
  < 
  meta 
   
  http-equiv 
  = 
  "Content-Type" 
   
  content 
  = 
  "text/html; charset=utf-8" 
  > 
 
 
  < 
  title 
  >行事件绑定</ 
  title 
  > 
 
 
  < 
  link 
   
  href 
  = 
  "css/bootstrap.min.css" 
   
  rel 
  = 
  "stylesheet" 
  > 
 
 
  < 
  link 
   
  rel 
  = 
  "stylesheet" 
   
  href 
  = 
  "css/bootstrap-table.css" 
  > 
 
 
  < 
  link 
   
  href 
  = 
  "css/bootstrap-table-fixed-columns.css" 
   
  rel 
  = 
  "stylesheet" 
  > 
 
 
  <!--引入jquery --> 
 
 
  < 
  script 
   
  src 
  = 
  "js/jquery-1.11.3.min.js" 
  ></ 
  script 
  > 
 
 
  <!--引入bootstrap --> 
 
 
  < 
  script 
   
  src 
  = 
  "js/bootstrap.js" 
  ></ 
  script 
  > 
 
 
  <!--引入表格可拖动列插件 --> 
 
 
  < 
  script 
   
  src 
  = 
  "js/colResizable-1.6.js" 
  ></ 
  script 
  > 
 
 
  < 
  script 
   
  src 
  = 
  "js/bootstrap-table.js" 
  ></ 
  script 
  > 
 
 
  < 
  script 
   
  src 
  = 
  "js/bootstrap-table-zh-CN.js" 
  ></ 
  script 
  > 
 
 
  < 
  script 
   
  src 
  = 
  "js/bootstrap-table-fixed-columns.js" 
  ></ 
  script 
  > 
 
 
  </ 
  head 
  > 
 
 
  < 
  body 
  > 
 
 
  < 
  table 
   
  data-show-fullscreen 
  = 
  "true" 
   
  data-show-pagination-switch 
  = 
  "true" 
   
  data-show-toggle 
  = 
  "true" 
   
  data-show-refresh 
  = 
  "true" 
   
  data-search 
  = 
  "true" 
   
  data-striped 
  = 
  "true" 
   
  id 
  = 
  "goods" 
   
  data-sort-stable 
  = 
  "true" 
   
  data-classes 
  = 
  "table table-hover" 
  > 
 
 
  < 
  thead 
  > 
 
 
  < 
  tr 
  > 
 
 
  < 
  th 
   
  data-title 
  = 
  "列标题" 
   
  data-checkbox 
  = 
  "true" 
   
  data-align 
  = 
  "center" 
  ></ 
  th 
  > 
 
 
  < 
  th 
   
  data-field 
  = 
  "Code" 
   
  data-sortable 
  = 
  "true" 
   
  data-align 
  = 
  "center" 
  >序号</ 
  th 
  > 
 
 
  < 
  th 
   
  data-field 
  = 
  "TuanGouName" 
   
  data-align 
  = 
  "center" 
  >商品名称</ 
  th 
  > 
 
 
  < 
  th 
   
  data-field 
  = 
  "StartDate" 
   
  data-sortable 
  = 
  "true" 
   
  data-align 
  = 
  "center" 
  >开始时间</ 
  th 
  > 
 
 
  < 
  th 
   
  data-field 
  = 
  "EndTime" 
   
  data-align 
  = 
  "center" 
  >结束时间</ 
  th 
  > 
 
 
  </ 
  tr 
  > 
 
 
  </ 
  thead 
  > 
 
 
  </ 
  table 
  > 
 
 
  < 
  script 
  > 
 
 
   
  /*数据json*/ 
 
 
   
  var 
   json 
  = 
   [{ 
  "Code" 
  : 
  "1" 
  , 
  "TuanGouName" 
  : 
  "豆干" 
  , 
  "StartDate" 
  : 
  "2016/10/9 10:15:00" 
  , 
  "EndTime" 
  : 
  "2016/12/25 11:30:00" 
  }, 
 
 
  { 
  "Code" 
  : 
  "" 
  , 
  "TuanGouName" 
  : 
  "薯片" 
  , 
  "StartDate" 
  : 
  "2016/10/9 10:15:00" 
  , 
  "EndTime" 
  : 
  "2016/12/25 11:30:00" 
  }, 
 
 
  { 
  "Code" 
  : 
  "3" 
  , 
  "TuanGouName" 
  : 
  "香肠" 
  , 
  "StartDate" 
  : 
  "2016/10/9 10:15:00" 
  , 
  "EndTime" 
  : 
  "2016/12/25 11:30:00" 
  }, 
 
 
  { 
  "Code" 
  : 
  "4" 
  , 
  "TuanGouName" 
  : 
  "大蒜" 
  , 
  "StartDate" 
  : 
  "2016/10/9 10:15:00" 
  , 
  "EndTime" 
  : 
  "2016/12/25 11:30:00" 
  }, 
 
 
  { 
  "Code" 
  : 
  "5" 
  , 
  "TuanGouName" 
  : 
  "鸡腿" 
  , 
  "StartDate" 
  : 
  "2016/10/9 10:15:00" 
  , 
  "EndTime" 
  : 
  "2016/12/25 11:30:00" 
  }, 
 
 
  { 
  "Code" 
  : 
  "6" 
  , 
  "TuanGouName" 
  : 
  "饼干" 
  , 
  "StartDate" 
  : 
  "2016/10/9 10:15:00" 
  , 
  "EndTime" 
  : 
  "2016/12/25 11:30:00" 
  }]; 
 
 
   
  /*初始化table数据*/ 
 
 
  $( 
  function 
  (){ 
 
 
  $( 
  "#goods" 
  ) 
  . 
  bootstrapTable({ 
 
 
   
  data 
  : 
  json , 
 
 
   
  /* onClickRow:function(){ 
 
 
  //单击触发的事件 
 
 
  alert("触发了消息") 
 
 
  }, */ 
 
 
   
  onDblClickRow 
  : 
  function 
  (){ 
 
 
   
  //双击触发的事件 
 
 
   
  console 
  . 
  dir 
  ($(this)) 
 
 
  alert( 
  "双击触发的事件" 
  ) 
 
 
  } 
 
 
  }); 
 
 
  }); 
 
 
   
 
 
  < 
  / 
  script 
  > 
 
 
  </ 
  body 
  > 
 
</html>
 
 Bootstrap-table使用情况
1. 表格参数(都是给table标签设置的样式)
主要是由一些自定义类名封装方法和样式
    1>对于table标签来说data-toggle=”table” (默认),这样数据不用json动态获取的时候
 
    不用写js直接给table加上改标签就可以启用表格了否则 不要加该类名;
    2>table的data-classes=”table table-hover”(默认有边框 鼠标经过每一行有颜色变化)
 
            table table-no-bordered(消除所有列边框)
    3>table的data-height=”500”可以设置table的高度
    4>table的data-striped=”false”(默认false设置为true时可实现隔行变色效果)
    5>table的几个排序的类名 基本没啥用处
    6>table的data-icons-prefix=”glyphicon” 设置字体可以使用bootstrap的字体图标(必须要引入字体图标的fonts
 
        不然实现不了)
    7>table的data-show-header (默认值true显示列头,设置为false后不显示列宽也不能拖动列宽了)
    8>对应着的data-show-footer(默认值false不显示列脚部,改为true以后 很难看底部)
    9>data-show-columns (默认false不显示内容下拉框,设置为true后需要字体图标配套文件)
    10>data-show-refresh(默认false不显示刷新按钮 设置为true可自动加载刷新按钮同样需要字体图标文件的加载)
    11>data-show-toggle(切换视图按钮,设置为true可以将表格切换为列表样式 同样是需要字体图标支持)
    12>data-show-search(显示搜索框 默认是全局自动搜索 也可以设置回车搜索)
    13>data-search-text(初始化搜索文字input框默认的搜索内容提示词)
    14>data-search-time-out  设置搜索超时时间
    15>data-trim-on-search(默认true自动去掉搜索字符前后的空格)
    16>data-show-pagination-switch(默认false不显示切换分页按钮 也需要字体图标文件)
    17>data-show-fullscreen(默认false 是否显示全屏按钮)
18>data-single-select(默认false设置true时复选框只能选择一个 跟单选按钮效果一样了)

2. 列参数
一般设置在表头上 th标签
    1>data-checkBox(复选功能,一般在表头第一列单独放一个td添加该类名并设置为true ) data-radio单选按钮 
 
    基本用不着 不说了
    2>data-field=”字段名” (对应着返回的数据的字段名来做渲染)
    3>data-rowspan/rowspan行合并data-colspan/colspan列合并
    4>data-align (三个选项”left””center””right”列内容对齐方向)
    5>data-width (列宽设置固定值)
    6>data-sortable (布尔值 可设置某一列的排序效果)

 