Bootstrap Table 使用示例及代碼

時間 2019-11-12
標籤 bootstrap table 使用示例代碼欄目 Bootstarp 简体版
原文原文鏈接
http://issues.wenzhixin.net.cn/bootstrap-table/javascript
<!DOCTYPE html>
<html> <head>  <title>Bootstrap Table Examples</title>  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">  <link rel="stylesheet" href="assets/bootstrap-table/src/bootstrap-table.css">  <link rel="stylesheet" href="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css">  <link rel="stylesheet" href="assets/examples.css">  <script src="assets/jquery.min.js"></script>  <script src="assets/bootstrap/js/bootstrap.min.js"></script>  <script src="ga.js"></script>  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->  <!--[if lt IE 9]>  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>  <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>  <script src="//cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.min.js"></script>  <![endif]--> </head> <body> <div class="container">  <h1>Bootstrap Table Examples <a href="https://github.com/wenzhixin/bootstrap-table-examples" class="btn btn-primary" role="button" target="_blank">Learn more &raquo;</a></h1>  <div id="toolbar">  <button id="remove" class="btn btn-danger" disabled>  <i class="glyphicon glyphicon-remove"></i> Delete  </button>  </div>  <table id="table"  data-toolbar="#toolbar"  data-search="true"  data-show-refresh="true"  data-show-toggle="true"  data-show-columns="true"  data-show-export="true"  data-detail-view="true"  data-detail-formatter="detailFormatter"  data-minimum-count-columns="2"  data-show-pagination-switch="true"  data-pagination="true"  data-id-field="id"  data-page-list="[10, 25, 50, 100, ALL]"  data-show-footer="false"  data-side-pagination="server"  data-url="/examples/bootstrap_table/data"  data-response-handler="responseHandler">  </table> </div>  <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> </body> </html>