bootstrap table 冻结列操作无效

此问题产生的原因感觉是因为冻结列是在上边又盖了一层表格导致无效。

所以点击事件的解决方法的原理是转移点击事件

在bootstrap-table-fixed-columns.js 中修改代码
本人代码操作列是使用a标签

见下图

当然找a标签的时候可以直接使用fixtb.find('a');无需再去判断
具体判断添加点击事件位置需要根据自己项目情况酌情修改

(function ($) {'use strict';$.extend($.fn.bootstrapTable.defaults, {fixedColumns: false,fixedNumber: 1});var BootstrapTable = $.fn.bootstrapTable.Constructor,_initHeader = BootstrapTable.prototype.initHeader,_initBody = BootstrapTable.prototype.initBody,_resetView = BootstrapTable.prototype.resetView;BootstrapTable.prototype.initFixedColumns = function () {// debuggerthis.$fixedHeader = $(['<div class="fixed-table-header-columns">','<table>','<thead></thead>','</table>','</div>'].join(''));this.timeoutHeaderColumns_ = 0;this.$fixedHeader.find('table').attr('class', this.$el.attr('class'));this.$fixedHeaderColumns = this.$fixedHeader.find('thead');this.$tableHeader.before(this.$fixedHeader);this.$fixedBody = $(['<div class="fixed-table-body-columns">','<table>','<tbody></tbody>','</table>','</div>'].join(''));this.timeoutBodyColumns_ = 0;this.$fixedBody.find('table').attr('class', this.$el.attr('class'));this.$fixedBodyColumns = this.$fixedBody.find('tbody');this.$tableBody.before(this.$fixedBody);};BootstrapTable.prototype.initHeader = function () {_initHeader.apply(this, Array.prototype.slice.apply(arguments));if (!this.options.fixedColumns) {return;}this.initFixedColumns();var that = this, $trs = this.$header.find('tr').clone();$trs.each(function () {$(this).find('th:gt(' + (that.options.fixedNumber - 1) + ')').remove();});this.$fixedHeaderColumns.html('').append($trs);};BootstrapTable.prototype.initBody = function () {_initBody.apply(this, Array.prototype.slice.apply(arguments));if (!this.options.fixedColumns) {return;}var that = this,rowspan = 0;this.$fixedBodyColumns.html('');this.$body.find('> tr[data-index]').each(function () {var $tr = $(this).clone(),$tds = $tr.find('td');//$tr.html('');这样存在一个兼容性问题，在IE浏览器里面，清空tr,$tds的值也会被清空。//$tr.html('');var $newtr = $('<tr></tr>');$newtr.attr('data-index', $tr.attr('data-index'));$newtr.attr('data-uniqueid', $tr.attr('data-uniqueid'));var end = that.options.fixedNumber;if (rowspan > 0) {--end;--rowspan;}for (var i = 0; i < end; i++) {var fixtb=$tds.eq(i).clone();var bodytd=$(this).find('td').eq(i);if(fixtb.length>0){if(fixtb[0].childNodes.length>0){if(fixtb[0].childNodes[0].tagName=='A'){var  htmldiva=bodytd[0].childNodes;var  fixhtmldiva=fixtb[0].childNodes;fixhtmldiva.forEach(function (item,key){$(item).click(function(){htmldiva[key].click();})})}}}$newtr.append(fixtb);}that.$fixedBodyColumns.append($newtr);if ($tds.eq(0).attr('rowspan')) {rowspan = $tds.eq(0).attr('rowspan') - 1;}});};BootstrapTable.prototype.resetView = function () {_resetView.apply(this, Array.prototype.slice.apply(arguments));if (!this.options.fixedColumns) {return;}clearTimeout(this.timeoutHeaderColumns_);this.timeoutHeaderColumns_ = setTimeout($.proxy(this.fitHeaderColumns, this), this.$el.is(':hidden') ? 100 : 0);clearTimeout(this.timeoutBodyColumns_);this.timeoutBodyColumns_ = setTimeout($.proxy(this.fitBodyColumns, this), this.$el.is(':hidden') ? 100 : 0);};BootstrapTable.prototype.fitHeaderColumns = function () {var that = this,visibleFields = this.getVisibleFields(),headerWidth = 0;this.$body.find('tr:first-child:not(.no-records-found) > *').each(function (i) {var $this = $(this),index = i;if (i >= that.options.fixedNumber) {return false;}if (that.options.detailView && !that.options.cardView) {index = i - 1;}that.$fixedHeader.find('th[data-field="' + visibleFields[index] + '"]').find('.fht-cell').width($this.innerWidth());headerWidth += $this.outerWidth();});this.$fixedHeader.width(headerWidth).show();};BootstrapTable.prototype.fitBodyColumns = function () {var that = this,top = -(parseInt(this.$el.css('margin-top'))),// the fixed height should reduce the scorll-x heightheight = this.$tableBody.height() - 12;if (!this.$body.find('> tr[data-index]').length) {this.$fixedBody.hide();return;}if (!this.options.height) {top = this.$fixedHeader.height()- 0;height = height - top;}this.$fixedBody.css({width: this.$fixedHeader.width()+2,height: height+2,top: top + 1}).show();this.$body.find('> tr').each(function (i) {that.$fixedBody.find('tr:eq(' + i + ')').height($(this).height() - 0.5);var thattds = this;that.$fixedBody.find('tr:eq(' + i + ')').find('td').each(function (j) {$(this).width($($(thattds).find('td')[j]).width() );});/*that.$fixedBody.find('tr:eq(3)').find('td').width($($(thattds).find('td')[3]).width()+1 );*/});// eventsthis.$tableBody.on('scroll', function () {that.$fixedBody.find('table').css('top', -$(this).scrollTop());});this.$body.find('> tr[data-index]').off('hover').hover(function () {var index = $(this).data('index');that.$fixedBody.find('tr[data-index="' + index + '"]').addClass('hover');}, function () {var index = $(this).data('index');that.$fixedBody.find('tr[data-index="' + index + '"]').removeClass('hover');});this.$fixedBody.find('tr[data-index]').off('hover').hover(function () {var index = $(this).data('index');that.$body.find('tr[data-index="' + index + '"]').addClass('hover');}, function () {var index = $(this).data('index');that.$body.find('> tr[data-index="' + index + '"]').removeClass('hover');});};
})(jQuery);

bootstrap table 冻结列操作无效相关推荐

JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案参考文章: (1)JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 (2) ...
bootstrap table冻结列
在调用table的时候,设置相对应参数,左侧冻结设置 leftFixedColumns: true, leftFixedNumber: 1(冻结列数),右侧冻结同理. 样式可自行在css调节. (fu ...
bootstrap table 动态列数据加载（一）
bootstrap table 动态列数据加载(一) 我想把所有的收费项目作为表头,不固定死收费项目,数据库中有啥就显示啥. 动态数据加载时,不能用bean的嵌套,源码中加载表头和数据是分开的,第几列 ...
bootstrap table 搜索列formatter之后，单字节搜索异常
bootstrap table 搜索列formatter之后,单字节搜索异常最近发现搜索这边出现这个问题,这样搜索没有效果后面发现是因为搜索列formatter之后就会出现这个问题,那么我们就多生 ...
若依Bootstrap版本--冻结列无效问题
1.引入js文件 <th:block th:include="include :: bootstrap-table-fixed-columns-js" /> 如图: 2 ...
JQuery实现table冻结列
由于公司代码框架古老使用静态html画的页面,无法使用bootstrap或easyui实现冻结列最终再github上面找到的冻结列的实现 github地址 https://qiuyaofan.git ...
Bootstrap Table固定列及IE11兼容性问题解决
最近项目的前端用的是bootstrap,用Bootstrap Table做的表格显示.有一部分表格比较特殊,需要实现固定前面几列,后面的拖动.给的原型是用的superTable实现的,整合进项目用Bo ...
[转]bootstrap table 动态列数
原文地址:https://my.oschina.net/u/2356355/blog/1595563 据说bootstrap table非常好用,从入门教程中了解到它的以下主要功能: 由于固定表头意味 ...
BootStrap Table：列参数
官方文档地址:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 列参数表格的列参数定义在 jQuery.fn.bootstra ...

bootstrap table 冻结列操作无效

bootstrap table 冻结列操作无效相关推荐

最新文章

热门文章

bootstrap table 冻结列 操作无效

bootstrap table 冻结列 操作无效相关推荐

最新文章

热门文章

bootstrap table 冻结列操作无效

bootstrap table 冻结列操作无效相关推荐