bootstrap表格

原创 2016年05月31日 14:00:16

bootstrap实现表格功能:

1.下载导入需要的文件



2.<body></body>中的标签




3.bootstrap中的js

<script>
  var $table = $('#table'),
  $remove = $('#remove'),
  selections = [];
   
  function initTable() {
  $table.bootstrapTable({
  height: getHeight(),
  columns: [
  [
  {
  field: 'state',
  checkbox: true,
  rowspan: 2,
  align: 'center',
  valign: 'middle'
  }, {
  title: 'Item ID',
  field: 'id',
  rowspan: 2,
  align: 'center',
  valign: 'middle',
  sortable: true,
  footerFormatter: totalTextFormatter
  }, {
  title: 'Item Detail',
  colspan: 3,
  align: 'center'
  }
  ],
  [
  {
  field: 'name',
  title: 'Item Name',
  sortable: true,
  editable: true,
  footerFormatter: totalNameFormatter,
  align: 'center'
  }, {
  field: 'price',
  title: 'Item Price',
  sortable: true,
  align: 'center',
  editable: {
  type: 'text',
  title: 'Item Price',
  validate: function (value) {
  value = $.trim(value);
  if (!value) {
  return 'This field is required';
  }
  if (!/^\$/.test(value)) {
  return 'This field needs to start width $.'
  }
  var data = $table.bootstrapTable('getData'),
  index = $(this).parents('tr').data('index');
  console.log(data[index]);
  return '';
  }
  },
  footerFormatter: totalPriceFormatter
  }, {
  field: 'operate',
  title: 'Item Operate',
  align: 'center',
  events: operateEvents,
  formatter: operateFormatter
  }
  ]
  ]
  });
  // sometimes footer render error.
  setTimeout(function () {
  $table.bootstrapTable('resetView');
  }, 200);
  $table.on('check.bs.table uncheck.bs.table ' +
  'check-all.bs.table uncheck-all.bs.table', function () {
  $remove.prop('disabled', !$table.bootstrapTable('getSelections').length);
   
  // save your data, here just save the current page
  selections = getIdSelections();
  // push or splice the selections if you want to save all data selections
  });
  $table.on('expand-row.bs.table', function (e, index, row, $detail) {
  if (index % 2 == 1) {
  $detail.html('Loading from ajax request...');
  $.get('LICENSE', function (res) {
  $detail.html(res.replace(/\n/g, '<br>'));
  });
  }
  });
  $table.on('all.bs.table', function (e, name, args) {
  console.log(name, args);
  });
  $remove.click(function () {
  var ids = getIdSelections();
  $table.bootstrapTable('remove', {
  field: 'id',
  values: ids
  });
  $remove.prop('disabled', true);
  });
  $(window).resize(function () {
  $table.bootstrapTable('resetView', {
  height: getHeight()
  });
  });
  }
   
  function getIdSelections() {
  return $.map($table.bootstrapTable('getSelections'), function (row) {
  return row.id
  });
  }
   
  function responseHandler(res) {
  $.each(res.rows, function (i, row) {
  row.state = $.inArray(row.id, selections) !== -1;
  });
  return res;
  }
   
  function detailFormatter(index, row) {
  var html = [];
  $.each(row, function (key, value) {
  html.push('<p><b>' + key + ':</b> ' + value + '</p>');
  });
  return html.join('');
  }
   
  function operateFormatter(value, row, index) {
  return [
  '<a class="like" href="javascript:void(0)" title="Like">',
  '<i class="glyphicon glyphicon-heart"></i>',
  '</a> ',
  '<a class="remove" href="javascript:void(0)" title="Remove">',
  '<i class="glyphicon glyphicon-remove"></i>',
  '</a>'
  ].join('');
  }
   
  window.operateEvents = {
  'click .like': function (e, value, row, index) {
  alert('You click like action, row: ' + JSON.stringify(row));
  },
  'click .remove': function (e, value, row, index) {
  $table.bootstrapTable('remove', {
  field: 'id',
  values: [row.id]
  });
  }
  };
   
  function totalTextFormatter(data) {
  return 'Total';
  }
   
  function totalNameFormatter(data) {
  return data.length;
  }
   
  function totalPriceFormatter(data) {
  var total = 0;
  $.each(data, function (i, row) {
  total += +(row.price.substring(1));
  });
  return '$' + total;
  }
   
  function getHeight() {
  return $(window).height() - $('h1').outerHeight(true);
  }
   
  $(function () {
  var scripts = [
  location.search.substring(1) || 'assets/bootstrap-table/src/bootstrap-table.js',
  'assets/bootstrap-table/src/extensions/export/bootstrap-table-export.js',
  'http://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js',
  'assets/bootstrap-table/src/extensions/editable/bootstrap-table-editable.js',
  'http://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js'
  ],
  eachSeries = function (arr, iterator, callback) {
  callback = callback || function () {};
  if (!arr.length) {
  return callback();
  }
  var completed = 0;
  var iterate = function () {
  iterator(arr[completed], function (err) {
  if (err) {
  callback(err);
  callback = function () {};
  }
  else {
  completed += 1;
  if (completed >= arr.length) {
  callback(null);
  }
  else {
  iterate();
  }
  }
  });
  };
  iterate();
  };
   
  eachSeries(scripts, getScript, initTable);
  });
   
  function getScript(url, callback) {
  var head = document.getElementsByTagName('head')[0];
  var script = document.createElement('script');
  script.src = url;
   
  var done = false;
  // Attach handlers for all browsers
  script.onload = script.onreadystatechange = function() {
  if (!done && (!this.readyState ||
  this.readyState == 'loaded' || this.readyState == 'complete')) {
  done = true;
  if (callback)
  callback();
   
  // Handle memory leak in IE
  script.onload = script.onreadystatechange = null;
  }
  };
   
  head.appendChild(script);
   
  // We handle everything using the script element injection
  return undefined;
  }
  </script>



4.页面效果


可以实现对表格中的数据增删改查等功能


表格api: http://bootstrap-table.wenzhixin.net.cn/documentation/#column-options

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Bootstrap结合BootstrapTable的使用

Bootstrap结合BootstrapTable的使用,分为两种模试显示列表。 引用的css:       引用的JS: 常用方法: 刷新表格:$table.bootstrapTable(...

获取Bootstrap-Table的所有内容,修改行内容

var allTableData = $tableLeft.bootstrapTable('getData');//获取表格的所有内容行 //alert(allTabl...
  • hack8
  • hack8
  • 2015年10月14日 11:41
  • 32210

Bootstrap-Table实现从服务器加载数据进行显示

Bootstrap-Table是一个Boostrap的表格插件,能够将JSON数据直接显示在表格中。当然,这需要配置一些参数并进行初始化表格才行。其官方网站地址为:http://bootstrap-t...

bootstrap table footerFormatter用法 统计列求和 sum、average等

其实上一篇blog里已经贴了代码,简单解释一下吧: 1、showFooter: true,很重要,设置footer显示: $(cur_table).bootstrapTable({ ur...

bootstraptable的 showFooter属性

如果想在表格最下面显示统计的信息可以使用这个属性 在需要的列里面新增属性 footerFormatter  设置列的名称 然后在需要显示的列 里面放入你要显示的值 value是所有的数据对象 取...

BootStrap table 数据填充与分页应用总结

BootStrap table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化。最近后台使用此插件做了一个表格应用,做个总结。 1.使用方法 可...

bootstrap-table自己配置

bootstrap-table自己配置

Bootstrap table的一些简单使用总结

最近接触一个NB插件,Bootstrap table 没做过前端的表示对table的印象还只停留在html的table标签那一套,用过bootstrap table之后不得不说真是牛X。 构造方式 1...

动态添加和删除table的一行

动态添加删除table的一行
  • hityct1
  • hityct1
  • 2010年03月23日 13:08
  • 12634

bootstrap-table的一些配置参数例子

bootstrap-table的一些配置参数
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:bootstrap表格
举报原因:
原因补充:

(最多只允许输入30个字)