web表格导出插件-bootstrap-table-export

 <html>
<link href="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table-locale-all.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.0/dist/extensions/export/bootstrap-table-export.min.js"></script>
 
<div id="toolbar">
  <button id="remove" class="btn btn-danger" disabled>
    <i class="fa fa-trash"></i> Delete
  </button>
</div>
 
 
<table  id="table"
  data-toggle="table"
  data-toggle="table"
  data-show-columns="true"
  data-show-columns-toggle-all="true"
  data-pagination="true"
  data-show-export="true"
  data-locale="zh-CN"
  data-search="true">
 
  <thead>
    <tr>
      <th data-checkbox="true"></th>
      <th data-sortable="true"  data-field="id">Item ID</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th data-checkbox="true"></th>
      <td>1</td>
      <td>Item 1</td>
      <td>$1</td>
    </tr>
    <tr>
      <th data-checkbox="true"></th>
      <td>2</td>
      <td>Item 2</td>
      <td>$2</td>
    </tr>
  </tbody>
</table>
 
<script type="text/javascript">
  var $table = $('#table')
  var $remove = $('#remove')
  var selections = []
 
 
  function getIdSelections() {
    return $.map($table.bootstrapTable('getSelections'), function (row) {
      return row.id
    })
  }
 
 
  $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
    })
 
 
  $remove.click(function () {
      var ids = getIdSelections()
      alert(ids)
      $table.bootstrapTable('remove', {
        field: 'id',
        values: ids
      })
      $remove.prop('disabled', true)
    })
</script>
</html>

效果

选择字段展示和导出

posted @ 2024-04-16 11:43 冀未然阅读(124) 评论(0) 编辑收藏举报

刷新页面返回顶部

（评论功能已被禁用）

相关博文：

· 前端实现导出table表格为Excel、CSV

· Bootstrap-table 使用总结

· bootstrapTable的使用及表格的导出

· html常用的表格插件--Bootstrap table

· 很好用的把Table表格数据通过点击button导出成Excel

阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了

公告

昵称：冀未然
园龄： 7年6个月
粉丝： 12
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

合集 (12)

随笔分类 (223)

随笔档案 (181)

相册 (1)

第一本相册(1)

web表格导出插件-bootstrap-table-export

web表格导出插件-bootstrap-table-export

效果

选择字段展示和导出

公告

搜索

常用链接

最新随笔

我的标签

合集 (12)

随笔分类 (223)

随笔档案 (181)

相册 (1)

	<html>
	<link href="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
	<script src="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.js"></script>
	<script src="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table-locale-all.min.js"></script>
	<script src="https://unpkg.com/bootstrap-table@1.18.0/dist/extensions/export/bootstrap-table-export.min.js"></script>

	<div id="toolbar">
	<button id="remove" class="btn btn-danger" disabled>
	<i class="fa fa-trash"></i> Delete
	</button>
	</div>


	<table id="table"
	data-toggle="table"
	data-toggle="table"
	data-show-columns="true"
	data-show-columns-toggle-all="true"
	data-pagination="true"
	data-show-export="true"
	data-locale="zh-CN"
	data-search="true">

	<thead>
	<tr>
	<th data-checkbox="true"></th>
	<th data-sortable="true" data-field="id">Item ID</th>
	<th data-field="name">Item Name</th>
	<th data-field="price">Item Price</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<th data-checkbox="true"></th>
	<td>1</td>
	<td>Item 1</td>
	<td>$1</td>
	</tr>
	<tr>
	<th data-checkbox="true"></th>
	<td>2</td>
	<td>Item 2</td>
	<td>$2</td>
	</tr>
	</tbody>
	</table>

	<script type="text/javascript">
	var $table = $('#table')
	var $remove = $('#remove')
	var selections = []


	function getIdSelections() {
	return $.map($table.bootstrapTable('getSelections'), function (row) {
	return row.id
	})
	}


	$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
	})


	$remove.click(function () {
	var ids = getIdSelections()
	alert(ids)
	$table.bootstrapTable('remove', {
	field: 'id',
	values: ids
	})
	$remove.prop('disabled', true)
	})
	</script>
	</html>