bootstrapTable 全选 自定义事件使用

最新推荐文章于 2024-05-21 16:45:41 发布
最新推荐文章于 2024-05-21 16:45:41 发布
阅读量3.2k 收藏 4
点赞数 1
文章标签： 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41901270/article/details/89889578
版权

bootstrapTable样式实现如下：

第一种样式和功能：（指定页面跳转）

第二种样式和功能：（全选按钮事件和表单内自定义事件）

 

第三种样式和功能：（表单刷新按钮、表单头部排序、可配置显示列的内容）

 

bootstraptable需要引入的文件(以下一律采用cdn方式引入)

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.css">

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>bootstrapTable表单</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.css">
        <link rel="stylesheet" type="text/css" href="css/bootstrap-table-pagejump.css" />
        <style type="text/css">
         *{
            margin:0;
            padding:0;
         }

        </style>
    </head>
    <body>
     <div class="container">
        <div class="first">
            <h3>第一种样式</h3>
             <table id="mytab" class="table table-hover">
            </table>
        </div>
         <div class="second">
            <h3>第二种样式</h3>
             <table id="AmountTable" class="table table-hover">
            </table>
        </div>
         

     </div>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-table-pagejump.js"></script>
    <script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script>
    <script type="text/javascript">
       $('#mytab').bootstrapTable({
              url: 'data.json',
              // method: 'POST',
              queryParams: "queryParams",
              toolbar: "#toolbar",
              sidePagination: "true",
              striped: true, // 是否显示行间隔色
              // search : "true",
              uniqueId: "ID",
              pageSize: "5",
              pagination: true, // 是否分页
              sortable: true, // 是否启用排序
              paginationShowPageGo: true,
              columns: [{
                    field: 'id',
                    title: '序号',
                    width: 120,
                    align: 'center',
                    valign: 'middle'
                  },
                  {
                    field: 'id',
                    title: '历史记录',
                    width: 120,
                    align: 'center',
                    valign: 'middle',
                    formatter: actionFormatter,
                  },
                  {
                      field: 'budget_code',
                      title: '预算编号',
                      width: 120,
                      align: 'center',
                      valign: 'middle'
                  },
                  {
                      field: 'budget_state',
                      title: '状态',
                      width: 120,
                      align: 'center',
                      valign: 'middle'
                  },
                  {
                      field: 'budget_type',
                      title: '预算类型',
                      width: 120,
                      align: 'center',
                      valign: 'middle'
                  },
                  {
                      field: 'proj_code',
                      title: '项目编号',
                      width: 120,
                      align: 'center',
                      valign: 'middle'
                  },
                  {
                      field: 'proj_name',
                      title: '项目名称',
                      width: 120,
                      align: 'center',
                      valign: 'middle'
                  },
                  {
                      field: 'customer_operate_pattern',
                      title: '项目操作模式',
                      width: 120,
                      align: 'center',
                      valign: 'middle'
                  },
                  {
                      field: 'ground_district',
                      title: '落地大区',
                      width: 120,
                      align: 'center',
                      valign: 'middle'
                  },
                  {
                      field: 'proj_start_date',
                      title: '驱动日期',
                      width: 120,
                      align: 'center',
                      valign: 'middle'
                  },
                  {
                      field: 'proj_period',
                      title: '项目周期',
                      width: 120,
                      align: 'center',
                      valign: 'middle'
                  },
                  {
                      field: 'proj_date',
                      title: '最近修改日期',
                      width: 120,
                      align: 'center',
                      valign: 'middle'
                  }
              ],
              onLoadSuccess: function (res) {
                console.log('数据')
              }
        })
     //操作栏的格式化
function actionFormatter(value, row, index) {
      var id = value;
      var result = "";
       result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><button type='button' class='btn btn-default '>查看</button></a>";
      return result;
}
//查看内容
function EditViewById (id) {
    alert(id)
}
    // 预计合同总金额 表单
    $('#AmountTable').bootstrapTable({
          url: 'Amount.json',
          // method: 'POST',
          queryParams: "queryParams",
          toolbar: "#toolbar",
          sidePagination: "true",
          striped: true, // 是否显示行间隔色
          // search : "true",
          uniqueId: "ID",
          pageSize: "5",
          pagination: false, // 是否分页
          sortable: true, // 是否启用排序
          paginationShowPageGo: true,
          columns: [
             {
               checkbox:true
             },
             {
                field: 'id',
                title: '序号',
                width: 120,
                align: 'center',
                valign: 'middle',
              },
              {
                  field: 'material_code',
                  title: '材料代码',
                  width: 120,
                  align: 'center',
                  valign: 'middle'
              },
              {
                  field: 'material_name',
                  title: '材料名称',
                  width: 120,
                  align: 'center',
                  valign: 'middle'
              },
              {
                  field: 'contract_area',
                  title: '合同面积',
                  width: 120,
                  align: 'center',
                  valign: 'middle'
              },
              {
                  field: 'contract_unit_price',
                  title: '合同单价',
                  width: 120,
                  align: 'center',
                  valign: 'middle'
              },
              {
                  field: 'subitem_prop',
                  title: '分项占比',
                  width: 120,
                  align: 'center',
                  valign: 'middle'
              },
              {
                  field: 'contract_subitem_amount',
                  title: '合同分项金额',
                  width: 120,
                  align: 'center',
                  valign: 'middle'
              },
              {
                field: 'price',
                title: '操作',
                width: 120,
                align: 'center',
                valign: 'middle',
                formatter: ActionWrite
              }
          ],
          onLoadSuccess: function (res) {
            console.log('数据')
          },
           onClickRow: function (row, tr,flied) {
            console.log('选中行事件')
           },
          onCheckAll: function (rows) {
            console.log('全部选中事件')
          },
          onUncheckAll: function (rows) {
            console.log('全部不选中事件')
          },
          onUnCheckAll: function (rows) {
            console.log('全部不选中事件')
          },
          onCheck: function (row) {
            console.log('单独选中事件')
          },
          onUncheck:function(row){
            console.log('取消选中')
           
          }
    })
    function ActionWrite (value, row, index) {
      var id = value;
      var result = "";
      result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"GetHeTongId('" + index+ "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
      result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"GetHeTongId('" + index + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
      return result
    }
    function GetHeTongId (id) {
      alert(id)
    }
    </script>
    </body>
</html>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>bootstrapTable表单</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.css">
        <style type="text/css">
         *{
            margin:0;
            padding:0;
         }
         .fixed-table-toolbar .columns-right button {
            background:#337ab7;
            color:#fff;
         }

        </style>
    </head>
    <body>
      <div class="container">
          <div class="first">
            <h3>第三种样式</h3>
             <table id="tabledemo" data-show-columns="true"></table>
            <div id="toolbar" class="btn-group">
                <input type="hidden" class="form-control" id="selectId" name="selectId">
                <input type="hidden" class="form-control" id="theDataStatus" name="theDataStatus">
                <button id="btn_look" type="button" class="btn btn-primary">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>查看
                </button>
                <button id="btn_deal" type="button" class="btn btn-primary">
                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>处理
                </button>
                <button id="btn_audit" type="button" class="btn btn-primary">
                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>审核
                </button>
                <button id="btn_grade" type="button" class="btn btn-primary">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>评级
                </button>
                <button id="btn_sync" type="button" class="btn btn-primary">
                    <span class="glyphicon glyphicon-sort" aria-hidden="true"></span>传输SAP
                </button>
            </div>
        </div>
      </div>

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script>

    <script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script>
    <script type="text/javascript">
    var columnsArr = [{
            field: 'id',
            title: '序号',
            width: 120,
            sortable: true,
            align: 'center',
            valign: 'middle'
          },
          {
              field: 'budget_code',
              title: '预算编号',
              width: 120,
              sortable: true,
              align: 'center',
              valign: 'middle'
          },
          {
              field: 'budget_state',
              title: '状态',
              width: 120,
              sortable: true,
              align: 'center',
              valign: 'middle'
          },
          {
              field: 'budget_type',
              title: '预算类型',
              width: 120,
              sortable: true,
              align: 'center',
              valign: 'middle'
          },
          {
              field: 'proj_code',
              title: '项目编号',
              width: 120,
              sortable: true,
              align: 'center',
              valign: 'middle'
          },
          {
              field: 'proj_name',
              title: '项目名称',
              width: 120,
              sortable: true,
              align: 'center',
              valign: 'middle'
          },
          {
              field: 'customer_operate_pattern',
              title: '项目操作模式',
              width: 120,
              sortable: true,
              align: 'center',
              valign: 'middle'
          },
          {
              field: 'ground_district',
              title: '落地大区',
              width: 120,
              sortable: true,
              align: 'center',
              valign: 'middle'
          },
          {
              field: 'proj_start_date',
              title: '驱动日期',
              width: 120,
              sortable: true,
              align: 'center',
              valign: 'middle'
          },
          {
              field: 'proj_period',
              title: '项目周期',
              width: 120,
              sortable: true,
              align: 'center',
              valign: 'middle'
          },
          {
              field: 'proj_date',
              title: '最近修改日期',
              width: 120,
              sortable: true,
              align: 'center',
              valign: 'middle'
          }
      ]
       $('#tabledemo').bootstrapTable({
          url: 'data.json',
          // method: 'POST',
          queryParams: "queryParams",
          toolbar: "#toolbar",
          sidePagination: true,
          striped: true, // 是否显示行间隔色
          uniqueId: "ID",
          showRefresh: true, // 是否显示刷新按钮
          pageSize: "5", 
          pagination: true, // 是否分页
          sortable: true, // 是否启用排序
          paginationShowPageGo: true, // 是否跳转页面
          showColumns: true, // 是否全列显示
          columns: columnsArr,
          resizable: true,
          onLoadSuccess: function (res) {
            console.log('数据')
          }
        })

    </script>
    </body>
</html>

其中指定页面跳转的代码，没有cdn 各位可以直接百度搜索下载

weixin_41901270
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Bootstrap Table 跨页选择
02-01
2. **行选择事件**：监听Bootstrap Table 的 `check` 和 `uncheck` 事件，当用户选择或取消选择行时，将相关信息（如行ID）存入localStorage。 3. **数据恢复**：在表格加载时，读取localStorage中的选中状态数据，...
bootstrap table插件的分页与checkbox使用详解
12-09
Bootstrap Table 是一个流行的前端数据展示插件，它允许开发者轻松创建...通过自定义事件处理和数据处理函数，我们可以轻松地控制复选框的状态，并获取选中行的关键信息。这在需要用户交互和数据操作的场景中非常有用。
利用Bootstrap实现表格复选框checkbox全选
12-29
首先来看看实现的效果图： HTML中无需添加额外的一列来表示复选框，而是由JS完成，所以正常的表格布局就行了： 类别编号 类别名称 类别组 状态 说明 C00001 机车 机车 有效 <t
Bootstrap Table批量（全选）删除
祈澈菇凉
03-13 7443
Bootstrap Table批量（全选）删除，类似以下这样： 思路 1:jsp页面，删除按钮 <div class="mytab"> <table id="mytab" class="table table-hover"></table> </div> 2：在columns里面，check...
bootstrap table使用总结
最新发布
weixin_43704154的博客
05-21 1802
使用服务器端处理时，bootstrap-table的默认操作模式是简单地丢弃表中当前存在的任何数据，并向服务器发出请求以获取要显示的第一页数据。因此，您可以使用data-defer-url而不是data-url来指示bootstrap-table不发出初始请求，而是使用页面上已有的数据。依赖：tablednd v0.9，如果你想要你可以包含bootstrap-table-reorder-rows.css文件来使用默认的。1，$ 100，$ 2，$ 20而不是$ 1，$ 2，$ 20，$ 100。
BootStrap table 复选框全部选中
weixin_44742789的博客
04-04 1262
onLoadSuccess:function(){ $("#Table的ID").bootstrapTable('checkAll'); },
BootstrapTable 复选框的全选、单选、回显
qq_40178741的博客
12-02 3441
BootstrapTable 复选框的全选、单选、回显使用记录 代码： 外部定义集合存放选中的id let bomIds=[]; //以下方法为bootstrapTable中复选框选中方法 //全选 获取当前页所有信息 onCheckAll: function (rows) { //rows为当前页数据集 for (let i in rows) { if(bomIds.indexOf(rows[i][
bootStrap-table之全选反选
hyj
11-16 1947
1、说明： 例如在前端做报表时往往少不了全选反选功能，BootStrap-table也有相应的规则应用。 2、实例: columns :[ { align : 'center', checkbox: true, // 显示复选框 } ...
Bootstrap Table Fixed Columns 固定列
04-02
"Fixed Columns"功能是Bootstrap Table的一个扩展，它允许用户在表格中固定左侧或右侧的列，即使在滚动时，这些列也会始终保持可见，提高了数据浏览的便利性。这对于那些需要大量数据展示并且需要快速访问特定列信息...
完美解决bootstraptable父子表子表渲染问题
11-29
BootstrapTable是一款基于Bootstrap框架的前端数据表格插件，它提供了丰富的功能，如排序、过滤、分页、自定义列等。在使用过程中，有时我们可能会遇到一个特定的需求，即实现父子表的功能，也就是在一个表格中嵌套...
Angularjs bootstrap table多选，支持单击行选中
12-27
使用`<table>`元素，并添加`class="table"`以应用Bootstrap样式。为了实现多选功能，我们需要添加`data-toggle="table"`和`data-select-item-name="ckb"`属性： ```html <table class="table" data-toggle="table" ...
基于Bootstrap里面的Button dropdown打造自定义select
weixin_33872660的博客
11-08 162
最近工作非常的忙，在对一个系统进行改版。项目后台是MVC1.0开发的，但是前端部分已经改过几个版本，而已之前的设计师很强大，又做设计又做前端开发。而已很时尚和前沿，使用了一直都很热门的Bootstrap工具包，有很多把它定义为Web前端CSS框架。说实话，之前只知道它是Twitter公司出品，界面做的比较好看。但是没有在实际项目中使用，之前公司新来的同事会这个，准备在公司官网项目中使用，因为我不会...
【bootstrap-table】点击全选同属性的所有数据的方法/点选同组的所有数据条目
lixiang_0531的博客
01-23 560
bootstrap-table点击选中所有同属性的数据，区别于全选与点选，需要先选中需要全选其同组数据的数据，然后点击全选同组按钮，便会选中其所有同属性的数据，以便后续进行批量操作
Bootstrap table 跨页全选
weixin_34315665的博客
04-17 2347
此代码是针对于bootstrap table中分页的跨页全选。 　　以下是整个bootstrap的定义 　　 <script type="text/javascript" src="http://cdn.jsdelivr.net/lodash/3.8.0/lodash.min.js"></script>//一定要引用这个js不然文档加载函数中的的_[...
Angularjs bootstrap table多选（全选），支持单击行选中
热门推荐
cayre的专栏
12-27 1万+
最终实现效果： index.html<!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8
Bootstrap-table 初始化及绑定事件
Tangor小屋
09-06 2212
var table = $(“#ftable”); table.bootstrapTable({ url: localurl + ‘/api/assets/getAssets3?type=2&amp;mid=’ + mid + ‘&amp;apid=’ + apid, sortName: ‘id’, r...
bootstrap 表格全选、反选、取消操作
feidie436的专栏
09-11 6696
先说一下要实现的效果。列表如图所示，点击全选按钮则使所有数据为选中状态；点击取消按钮，则所有数据为未选中状态；点击反选按钮，则把已选中的数据置为未选中，未选中的数据置为选中状态。 代码为： JS代码为： 代码虽然简单，但是却花费了很长时间，主要时间花费在反选功能上。全选和取消操作网上有很多，但是反选功能却始终没有找到。在被逼无奈下，只好从bootstrap的js源码看起。 ...
事件对象
zpfnext的博客
10-01 106
什么是事件对象？ 在触发DOM上的事件都会产生一个对象 1、DOM中的事件对象 (1)、type:获取事件类型 (2)、target：事件目标 (3)、stopPropagation() 阻止事件冒泡 (4)、preventDefault() 阻止事件的默认行为
bootstrap 后端分页 实现 按钮全选 以及表格外全选按钮
weixin_39016187的博客
03-10 1166
由于每次查找资料都需要耗费大量时间,于是写下此文章,方便日后查阅复用. var zljsList = new Array(); $(function () { queryYjxxBegin(); $('.form_datetime').datetimepicker({ format: 'yyyy-mm-dd', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighl
bootstrap获取table表单全选框事件
07-14
要在Bootstrap中获取表格全选框的事件，你可以使用以下步骤： 1. 首先，在你的HTML文件中，为表格的全选框添加一个id或者class属性，例如： ```html ``` 2. 接下来，使用JavaScript/jQuery来添加事件监听器，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值