您的位置：首页 > Web前端 > BootStrap

bootstrap表格

2016-05-31 14:00 537 查看
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 bootstrap表格
相关文章推荐
新的分享
章节导航