Bootstrap点击事件（单击事件及双击事件）

最新推荐文章于 2025-06-03 09:04:08 发布

原创最新推荐文章于 2025-06-03 09:04:08 发布 · 1.1w 阅读

4 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍如何在Bootstrap中设置表格的点击事件，包括单击和双击行的响应，以及如何通过jQuery和Option事件来实现这些交互。此外，还介绍了如何配置表格的多种属性，如分页、排序和编辑单元格数据。

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

Bootstrap点击事件

以上两种事件均可达到单击事件及双击事件的效果。下面我们分别举例说明：

jQuery事件

//表格点击事件
   $('#getCqltj').on('dbl-click-row.bs.table', function (e, row, element)
{
       location.href = '../html/qykqsj.html?name='+escape(row.xm);
   });

Option事件

$('#getzxsjsz') .bootstrapTable( {
               url : '../ajaxjsp/zxsjsz_json.jsp?type=getzxsjsz', // 请求后台的URL（*）
               toolbar : '#toolbar', // 工具按钮用哪个容器
               striped : true, // 是否显示行间隔色
               cache : false, // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
               pagination : false, // 是否显示分页（*）
               sortable : false, // 是否启用排序
               sortOrder : "asc", // 排序方式
               // queryParams : oTableInit.queryParams,// 传递参数（*）
               sidePagination : "client", // 分页方式：client客户端分页，server服务端分页（*）
               pageNumber : 1, // 初始化加载第一页，默认第一页
               pageSize : 10, // 每页的记录行数（*）
               pageList : [ 10, 25, 50, 100 ], // 可供选择的每页的行数（*）
               search : false, // 是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
               strictSearch : true,
               showExport: true, // 是否显示导出
               exportOptions : {
                   fileName : document.title
               },
               exportDataType: "all", // basic', 'all',// 'selected'.
               showColumns : true, // 是否显示所有的列
               showRefresh : true, // 是否显示刷新按钮
               minimumCountColumns : 2, // 最少允许的列数
               clickToSelect : false, // 是否启用点击选中行
               height : '', // 行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
               uniqueId : "", // 每一行的唯一标识，一般为主键列
               showToggle : true, // 是否显示详细视图和列表视图的切换按钮
               cardView : false, // 是否显示详细视图
               detailView : false, // 是否显示父子表
               //fixedColumns : true,
               //fixedNumber : 1,//固定列数
               columns :    [{
                   field : 'sbsj',
                   title : '上班时间',
                   align: 'center'
               }, {
                   field : 'xbsj',
                   title : '下班时间',
                   align: 'center'
               }, {
                   field : 'wxkssj',
                   title : '午休开始时间',
                   align: 'center'
               }, {
                   field : 'wxjssj',
                   title : '午休结束时间',
                   align: 'center'
               }] ,
               onClickCell: function(field, value, row, $element) {
           $element.attr('contenteditable', true);
           $element.blur(function() {
           let index = $element.parent().data('index');
           let tdValue = $element.html();
           saveData(index, field, tdValue , row.zxlx);
           })
           }
           });