首页 > 其他分享 >web表格导出插件-bootstrap-table-export

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

时间:2024-04-16 11:58:39浏览次数:23  
标签:function web 插件 bootstrap remove Item bs var table

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

<html>
<link href="https://unpkg.com/[email protected]/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/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table-locale-all.min.js"></script>
<script src="https://unpkg.com/[email protected]/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>

效果

选择字段展示和导出

标签:function,web,插件,bootstrap,remove,Item,bs,var,table
From: https://www.cnblogs.com/HeroZhang/p/18137776

相关文章

  • win10 vscode 插件使用
     翻译搜索复制......
  • WebDAV(Web Distributed Authoring and Versioning)是一种基于 HTTP/HTTPS 协议的扩展,用
    WebDAV(WebDistributedAuthoringandVersioning)是一种基于HTTP/HTTPS协议的扩展,用于在远程服务器上创建、编辑和管理文档。它允许用户通过网络对服务器上的文件进行像本地文件系统一样的操作,包括创建、删除、复制、移动和重命名文件,以及创建和管理文件夹等操作。WebDAV的......
  • webpack
    什么是webpackwebpack是一个modulebundler(模块打包器)。为什么使用webpack模块:前端开发所涉及到的所有的js,css,html等文件,都可以看做模块打包:开发的时候,我们需要开发多个文件,不能合在一起开发。那样会增加逻辑复杂度。开发完成后,把所有的模块,合并成一个大模块的过程。比......
  • IntelliJ IDEA2021.3.1 使用 MybatisCodeHelperPro插件
    摘自:https://blog.csdn.net/weixin_44321065/article/details/132576008一、下载下载破解后的MybatisCodeHelperPro的V3.2.2版本V3.2.2-CSDN或者V3.2.2-Gitee二、应用将下载下来的Zip文件放到电脑上的某个位置(最好放在Idea管理插件的plugins下)然后自行搜索Idea......
  • 前端面试题 — webpack
    1.webpack的安装和使用方式安装Node.js和npm首先,确保你的计算机上安装了Node.js和npm(Node包管理器),因为Webpack是通过npm进行安装和管理的。创建项目目录并初始化npmnpminit-y安装Webpacknpminstallwebpackwebpack-cli......
  • 4. Kubernetes 之 WebUI管理 Portainer
    1.安装PortainerPortainer是一个轻量级的容器管理工具,可以用来管理Docker和Kubernetes,它提供了一个Web界面来方便我们管理容器,官方网址:https://www.portainer.io/1.使用官方提供的yaml文件安装:在master节点上安装portainer,并将其暴露在NodePort30777上kubectlap......
  • python 实现简单的web功能
    BaseHTTPRequestHandler介绍这是一个以TCPServer为基础开发的模块,可以在请求外层添加http协议报文,发送http协议。基于BaseHTTPServer的HttpServer的处理流程:1.HTTPServer绑定对应的应答类(BaseHTTPRequestHandler)http_server=HTTPServer((’’,int(port)),ServerHTTP)2.监......
  • MogDB插件之高速灌数
    MogDB插件之高速灌数本文出处:https://www.modb.pro/db/336694对于写密集型系统,我们一般有如下方式来进行加速:使用批量插入代替单条insert语句插入更好的处理方式是使用copy语句代替insert语句同时也可以使用多个session并行代替单个session的语句操作相比直接使......
  • Web移动端布局
    逻辑像素和物理像素逻辑像素也叫『设备独立像素』,即CSS像素,例如,iPhone6的逻辑像素是375px物理像素是设备屏幕实际拥有的像素点,设备生产出来,像素就确定了,例如,iPhone6的物理像素是750px在iPhone6下,物理像素是逻辑像素的2倍,用『设备像素比』表示该值,即物理像素除以逻辑像素的值......
  • leetcode插件问题
    1.使用一段时间后,提交答案一直返回undefind原因为插件缓存token有效期已过,需要重新登录2.重新登录......