关闭

bootstrap表格

标签: bootstrapbootstrap表格
6523人阅读 评论(1) 收藏 举报
分类:

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

0
1

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:256466次
    • 积分:3463
    • 等级:
    • 排名:第10041名
    • 原创:66篇
    • 转载:204篇
    • 译文:0篇
    • 评论:58条
    博客专栏
    最新评论