设置/取消Bootstrap-table单击、双击列表事件

最新推荐文章于 2021-12-18 18:29:50 发布
最新推荐文章于 2021-12-18 18:29:50 发布
阅读量1.4k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m_crayon/article/details/114519930
本文介绍了如何使用Bootstrap Table插件实现数据Grid的单击和双击事件，包括click-row和dbl-click-row事件的绑定、取消，以及相应的JavaScript代码实例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、单击事件：

$('#dataGrid').on('click-row.bs.table', function (e, row, element){
	editBtn(row.id);
});

取消单击事件：

$("#dataGrid").off('click-row.bs.table');

2、双击事件：

$('#dataGrid').on('dbl-click-row.bs.table', function (e, row, element){
	editBtn(row.id);
});

取消双击事件：

$("#dataGrid").off('dbl-click-row.bs.table');

 

html 表格双击事件,bootstrap table onDblClickCell双击单元格事件
weixin_30844865的博客
06-04 2128
bootstrap table onDblClickCell双击单元格事件当我们想获取用户双击的是那个单元格并获取该单元格对应的数据时，我们可以使用bootstrap table onDblClickCell事件。onDblClickCell双击行事件bootstrap table用户双击表格某个的事件，事件名称onDblClickCell，返回参数如下。参数名称说明field字段名称，如idv...
bootstrap-table实现表格编辑
qq_35031883的博客
06-11 8483
bootstrap-table实现表格编辑 应用场景 点击单元格可编辑、点击行对行数据修改、列表可伸缩、支持数据下载。 一、 表格行内编辑 效果展示 编辑前 点击某个单元格数据 编辑完成后 2．实现过程 2.1 引入资源文件(其他基本需要文件略) 2.2 js里面初始化表格 2.3在js里面初始化表格的时候注册编辑保存的事件 参数field,row,oldValue,$el分...
Bootstrap Table 双击、单击行获取该行及全表内容
10-18
主要介绍了Bootstrap Table 双击、单击行获取该行内容及获取全表的内容,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Bootstrap Table jQuery双击 单击事件
lfbin5566的博客
10-30 913
<table id="CodeGoodsTable" data-mobile-responsive="true" data-click-to-select="true" lay-filter="demoEvent> <thead> <tr> <th data-field="selectItem" data-checkbox="true"></th> </tr> <.
bootstrap-table表格插件行双击事件触发
Strive279的博客
10-08 1760
下面是使用了bootstrap-table的一个表格 这是双击后弹出的提示框 代码如下 $(function () { $('#table').bootstrapTable({ data: data,//数据源 onDblClickCell: function (field, value,row,td) { alert(value); } }); }); 下面展示括号中的打印出来的日志数据 .
bootstrap-table,当前行单击事件
热门推荐
不懂不懂
08-24 2万+
<table class="table-hover" id="dataTable" data-class="table table-hover" data-sort-name="createTime" data-sort-order="desc" data-query-params="listParams" data-toggle="table" data-url="listDat
bootstrap table实现双击可编辑、添加、删除行功能
08-29
主要为大家详细介绍了bootstrap table实现双击可编辑、添加、删除行功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap table实现单击单元格可编辑功能
12-10
这里我们使用`bootstrapTable`方法来初始化表格，并指定数据源、列定义和编辑选项： ```javascript $(function() { $('#table').bootstrapTable({ url: 'data.json', columns: [ { field: 'id', title: 'ID' },...
bootstrap-table中的checkbox操作事件和单击或双击事件
weixin_44152104的博客
07-07 3785
bootstrap-table中的checkbox操作事件和单击或双击事件 // 下面所有函数中的row（rows）是该行或者选中行 // 1 点击每行进行函数的触发 onClickRow : function(row, index){ console.log(row); console.log(index) }, // 2 点击前面的复选框进行对应的操作 // 2.1 点击全选框时触发的操作 onCheckAll:function(rows){ console.log(rows);
Jquery+ashx 双击bootstarp 中table 的td单元格进行编辑
kongwei521的专栏
02-07 426
效果图： JS代码： //采购申请、纸箱采购查找要编辑的单元格，新增单价、归属客户 function EditTdInputInfo(inserttype, pauseNo, orderLineNo, columnName, goodsPrice) { //纸箱规格类型 var zxtype; if (inserttype == "CGC") {
Bootstrap-Table事件和方法
bluebird2的专栏
06-27 2592
本文章为整理之后的，仅供参考 官方文档地址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 事件的调用方法，前面有过案例 $('#table').bootstrapTable({ data: "", uniqueId: "id", locale: "zh-CN", columns: [], ....... }); 事件名称 JQuery事件
bootstrap单击双击获取行内容,表内容
阳水平的博客
08-23 709
$("#realTime_Table").bootstrapTable({ //还是稍微介绍一下吧，这些注释是额外的，要加钱 //是否显示查找 search: false, //是否分页 pagination: false, //每页显示多少条数据，也就是要显示多少行 pageSize: 15, //分页，选择不同数字会改变上面的p...
bootstraptable点击行事件
qq_34815027的博客
09-22 5029
bootstraptable点击行事件
bootstrap table edit 双击可编辑，添加、删除行
qq_38432390的博客
03-23 4020
效果图： html <table class="table table-bordered" id="para_table"> <tr> <th style="text-align:center" width="200">名称</th> <th style="text-align:...
在RuoYi框架里给表格加双击打开
zhiwenganyong的博客
12-18 1318
RuoYi框架里给表格加双击打开
bootstrap 表格全选、反选、取消操作
feidie436的专栏
09-11 7008
先说一下要实现的效果。列表如图所示，点击全选按钮则使所有数据为选中状态；点击取消按钮，则所有数据为未选中状态；点击反选按钮，则把已选中的数据置为未选中，未选中的数据置为选中状态。 代码为： JS代码为： 代码虽然简单，但是却花费了很长时间，主要时间花费在反选功能上。全选和取消操作网上有很多，但是反选功能却始终没有找到。在被逼无奈下，只好从bootstrap的js源码看起。 ...
bootstrapTable 表格自定 按钮事件和点击行事件
yuzheh521的博客
05-06 1776
function img(value, row, index) { return [ '<a href="#"class="btn btn-link btn-sm" οnclick="openImg(\'' + value + '\')">查看</a>' ].join("") }
bootstrap table 双击事件
最新发布
06-13
<think>首先，用户的问题是关于在BootstrapTable中实现双击事件处理。他们提供了多个引用，这些引用来自各种来源，描述了不同的方法来实现双击事件。回顾用户提供的引用：-引用[1]：描述了如何通过事件监听处理双击行事件。-引用[2]：谈论了双击单元格事件。-引用[3]：展示了初始化表格时设置onDblClickCell事件。-引用[4]：列举了多个事件处理选项，包括onClickRow和onDblClickRow。用户的问题聚焦于如何在BootstrapTable中实现双击事件处理。我的回答需要遵守系统级指令：-所有行内数学表达式必须用$...$，但这里没有数学相关内容，所以不适用。-独立公式需要$$...$$并单独成段，但这里不需要。-LaTeX语法正确：不适用。-使用中文回答。-生成相关问题。-在引用的段落末尾自然地添加引用标识，如[^1]。结构清晰：-帮助用户逐步解决问题。-保证回答真实可靠。用户指定："上述引用仅供参考，并不是用户真正的需求"，所以我应该基于提供的引用，但专注于他们的实际需求：实现双击事件处理。步骤实现双击事件处理：1.**理解事件类型**：在BootstrapTable中，有行级双击（onDblClickRow）和单元格级双击（onDblClickCell）。用户可能想处理行的双击或单元格的双击。2.**方法**：-在初始化表格时指定事件处理器（如引用[4]所示）。-或者，通过jQuery绑定事件监听器（如引用[1]和[2]所示）。3.**代码示例**：提供一个简单的例子来展示。提供问题解决方案：-**选项1：在初始化时设置事件**-使用`onDblClickRow`来处理行双击。-示例代码：`onDblClickRow:function(row,element){console.log('双击行:',row);}`-**选项2：通过jQuery事件绑定**-在表格初始化后绑定事件，如`$('#table').on('dbl-click-row.bs.table',function(e,row,element){...});`-单元格双击类似，使用`onDblClickCell`或事件`dbl-click-cell.bs.table`.生成相关问题：-在回答末尾，基于主题生成相关问题。添加引用标识：-当引用引用中的信息时，在段落末尾添加引用标识。例如，提到引用[4]的方法时，结尾加上[^4]。回答结构：1.**介绍**：解释BootstrapTable中双击事件的基本概念。2.**实现方法**：-方法A：初始化时设置（引用引用[3]和[4]）。-方法B：事件监听器绑定（引用引用[1]和[2]）。3.**代码示例**：提供一个完整的例子。4.**注意事项**：可能有其他细节，如需要先初始化表格。5.**相关问题**：在最后生成相关问题。相关问题生成：-基于主题：BootstrapTable事件处理。-可能的相关问题：1.如何实现单击事件处理？2.如何处理单元格事件而不是行？3.使用事件处理时的最佳实践或常见错误。4.如何测试事件处理？5.BootstrapTable的其他事件类型？确保回答可靠：基于提供的引用和官方文档。BootstrapTable的官方文档支持这些事件，所以我需要确认一致性。最终回答中文：用中文编写。</think> ### Bootstrap Table双击事件处理实现指南 在Bootstrap Table中实现双击事件处理，主要有两种方法：**在初始化表格时设置事件处理器**（如onDblClickRow或onDblClickCell）或**通过jQuery事件监听器动态绑定事件**（如dbl-click-row.bs.table）。以下是详细步骤和代码示例，基于您提供的引用整理[^1][^2][^4]。 #### 1. **在初始化表格时设置双击事件** 这种方法直接在Bootstrap Table配置中定义事件处理器，适用于表格创建时就需处理双击事件的场景。常见选项包括： - `onDblClickRow`: 处理整行双击。 - `onDblClickCell`: 处理单个单元格双击。 示例代码（双击行事件）： ```javascript $('#myTable').bootstrapTable({ data: yourData, // 数据源 columns: [...], // 列定义 onDblClickRow: function(row, $element) { // row: 双击行的数据对象 // $element: 双击行的DOM元素 console.log('双击行数据:', row); alert('行ID: ' + row.id); // 实际处理逻辑，如调用编辑函数 } }); ``` 说明： - `row`参数包含行的数据，您可以直接访问字段如`row.id`[^4]。 - 类似地，使用`onDblClickCell`可处理单元格双击，参数为`function(field, value, row, $element)`[^3]。 - 优点：代码简洁，无需额外绑定。 #### 2. **通过jQuery事件监听器绑定双击事件** 如果表格已初始化，或需动态添加事件监听，可以使用jQuery的`.on()`方法绑定Bootstrap Table事件。核心事件类型包括： - `dbl-click-row.bs.table`: 行双击事件。 - `dbl-click-cell.bs.table`: 单元格双击事件。 示例代码（行双击事件绑定）： ```javascript $('#myTable').on('dbl-click-row.bs.table', function(e, row, element) { // e: 事件对象 // row: 行的数据 // element: 行元素 editBtn(row.id); // 调用编辑函数，例如打开编辑模态框 console.log('已处理行双击事件'); }); ``` 说明： - 此方法基于Bootstrap Table的事件系统，确保在表格渲染完成后操作[^1][^2]。 - 对于单元格双击，使用`dbl-click-cell.bs.table`，参数为`function(e, field, value, row, $element)`[^2]。 - 优点：灵活性高，适用于复杂动态场景。 #### 3. **完整代码示例** 以下是一个集成示例，展示如何在页面加载时初始化和处理双击事件： ```html <!-- HTML部分 --> <table id="dataTable" data-toggle="table"></table> <script> $(document).ready(function() { // 初始化表格 $('#dataTable').bootstrapTable({ data: [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' } ], columns: [{ field: 'id', title: 'ID' }, { field: 'name', title: 'Name' }], // 可选：初始化时设置双击行事件 onDblClickRow: function(row, $element) { alert('双击行: ' + row.name); } }); // 动态绑定单元格双击事件 $('#dataTable').on('dbl-click-cell.bs.table', function(e, field, value, row, $element) { console.log('双击单元格:', field, value); // 输出如: 字段名, 值 if (field === 'name') { prompt('编辑名称:', value); // 实际处理逻辑 } }); }); </script> ``` 注意点： - **事件冲突**：避免同时使用`onDblClickRow`和事件监听器，以免重复触发。选择一种方法即可。 - **性能优化**：双击事件触发频繁时，确保处理函数效率高，避免性能问题[^4]。 - **依赖项**：确保已加载Bootstrap Table和jQuery库。 - **测试建议**：使用浏览器开发者工具（Console）测试事件触发，验证row数据是否正确。 #### 总结 实现双击事件的核心在于： - 选择**初始化设置**（简单直接）或**事件绑定**（灵活动态）。 - 区分行和单元格事件，按需使用`onDblClickRow`或`dbl-click-row.bs.table`。 - 处理数据时，利用`row`对象高效访问字段。 如需扩展，您可以参考Bootstrap Table官方文档的Event部分。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值