> 웹 프론트엔드 > JS 튜토리얼 > Bootstrap Table의 고정 열 기능으로 높이 문제 해결

Bootstrap Table의 고정 열 기능으로 높이 문제 해결

零下一度
풀어 주다: 2017-07-02 10:21:14
원래의
2685명이 탐색했습니다.

이 글은 키 문제를 완전히 해결하기 위해 JS 컴포넌트 시리즈 중 Bootstrap Table의 Frozen Column 기능을 주로 소개하고 있습니다. 필요하신 분들은 참고하시면 됩니다.

Text

서문: 1년 전 블로거가 공유한 글입니다. bootstrapTable 구성 요소 JS 구성 요소 시리즈의 고정 열에 대한 솔루션에 대한 기사 - Bootstrap 테이블 고정 열 기능IE 브라우저 호환성성 문제에 대한 솔루션, 이 기사를 통해 bootstrapTable의 고정 열 효과를 실제로 얻을 수 있으며 IE와 호환됩니다. 브라우저. 올해 동안 정원 친구와 그룹의 친구들은 높이를 수정한 후 고정된 열 페이지 효과가 정렬되지 않는 문제에 대해 끊임없이 문의했습니다. 그러나 블로거는 너무 바빠서 이 문제를 최적화하는 데 시간을 들이지 않았습니다. 최근 사람들이 프로젝트에서 이 버그를 언급하고 있습니다. 이제 더 이상 "비참한 버그"에 직면해야 합니다. 그래서 원래 확장 프로그램을 수정하는 데 하루를 보냈는데, 이는 동결 문제를 완벽하게 해결할 수 있습니다. 높이 문제를 수정한 후 열을 수정하고 블로거가 오른쪽 열 고정, 고정된 열 선택 등과 같은 일부 기능도 추가했습니다. 도움이 필요한 친구가 도움을 줄 수 있습니다. 이 글을 통해 사장님께서는 더 이상 내 얼어붙은 기둥이 높이를 고정하지 못할까 걱정하지 않아도 되실 거라 믿습니다~~

1. 이슈 추적

저번 글에서 소개해드린 기억이 나네요. bootstrapTable 구성 요소와 함께 제공되는 고정 열 확장은 IE 브라우저와 호환되지 않으며 최신 버전의 IE도 사용할 수 없습니다. 이는 일반 시스템에서는 용납되지 않으므로 해당 기사에 솔루션이 제공되었지만 그 이유는 다음과 같습니다. IE 브라우저가 호환되지 않는 이유는 분석되지 않았습니다. 어제 블로거가 소스 코드를 디버깅하는 데 시간을 보냈습니다. IE에서는 jquery의 clone() 메서드가 Google 및 기타 브라우저의 메서드와 다릅니다. 이 차이점을 보여주기 위해 여기에 벽돌 몇 개를 던져 보겠습니다. 예를 들어 다음과 같은 코드가 있습니다.


<table id="tbtest">
 <tr><td>aaa</td><td>bbb</td><td>ccc</td></tr>
 <tr><td>ddd</td><td>eee</td><td>fff</td></tr>
 <tr><td>ggg</td><td>hhh</td><td>iii</td></tr>
</table>
<script type="text/javascript">
 var $tr = $(&#39;#tbtest tr:eq(0)&#39;).clone();
 var $tds = $tr.find(&#39;td&#39;);
 $tr.html(&#39;&#39;);
 alert($tds.eq(0).html());
</script>
로그인 후 복사

코드 자체는 매우 간단하며 테스트용입니다. 이를 보고 경고 결과를 추측해 볼 수 있습니다.

잊으세요. 모든 사람을 테스트하지는 않고 그냥 게시합니다. 사진과 진실이 있습니다!

무엇이 IE이고 무엇이 Google인지 너무 많이 설명할 필요는 없을 것 같습니다.

둘의 차이점은 분명합니다. Google에서는 "aaa"가 표시되지만 IE에서는 빈 문자열이 표시됩니다. 왜 이런가요?

사실 이 차이를 값형과 참조형의 차이로 설명해보면 이해하기 어렵지 않을 겁니다. 구글 크롬에서는 그 안에 있는 내용을 지워보면 $tr 변수가 참조형입니다. 변수 $tr의 "포인터" 또는 $tds 변수는 여전히 $tr의 원래 내용을 가리키므로 $tds.eq(0)을 호출할 때 여전히 aaa 결과를 얻을 수 있습니다. html(); 동일한 코드는 IE 브라우저에서 $tr 변수의 내용을 지우면 $tds의 내용도 지워집니다. 더 나은 설명이 있으면 알려주시기 바랍니다.

컴포넌트의 네이티브 js가 IE 브라우저와 호환되지 않는 이유는 clone() 메소드를 사용하기 때문입니다. 이는 브라우저마다 다른 결과를 가져옵니다. bootstrapTable 컴포넌트의 작성자는 이 차이점을 인지하고 있어야 한다고 생각하지만, 작성자가 크게 고려하지 않고 만든 많은 기능의 호환성을 보면 알 수 있습니다. IE 브라우저의 효과를 위해.

두 번째, 효과 미리보기

아직도 룰이 많은데 사진이 없으면 어떡하지 웨이터, 위 사진!

높이가 고정되지 않은 상황: 단일 열이 동결되었습니다.

여러 열이 고정되었습니다.

임의 높이 효과 수정

브라우저에는 문제가 없으므로 여기서는 위 그림을 반복하지 않겠습니다.

3. 소스 코드 분석

관심이 있으시면 직접 살펴보셔도 됩니다. 주요 원칙은 bootstrapTable 생성자의 이벤트를 다시 작성하는 것입니다. 원하는 효과를 얻으십시오.


(function ($) {
 &#39;use strict&#39;;
 $.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 () {
  this.$fixedHeader = $([
   &#39;<p class="fixed-table-header-columns">&#39;,
   &#39;<table>&#39;,
   &#39;<thead></thead>&#39;,
   &#39;</table>&#39;,
   &#39;</p>&#39;].join(&#39;&#39;));
  this.timeoutHeaderColumns_ = 0;
  this.$fixedHeader.find(&#39;table&#39;).attr(&#39;class&#39;, this.$el.attr(&#39;class&#39;));
  this.$fixedHeaderColumns = this.$fixedHeader.find(&#39;thead&#39;);
  this.$tableHeader.before(this.$fixedHeader);
  this.$fixedBody = $([
   &#39;<p class="fixed-table-body-columns">&#39;,
   &#39;<table>&#39;,
   &#39;<tbody></tbody>&#39;,
   &#39;</table>&#39;,
   &#39;</p>&#39;].join(&#39;&#39;));
  this.timeoutBodyColumns_ = 0;
  this.$fixedBody.find(&#39;table&#39;).attr(&#39;class&#39;, this.$el.attr(&#39;class&#39;));
  this.$fixedBodyColumns = this.$fixedBody.find(&#39;tbody&#39;);
  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(&#39;tr&#39;).clone();
  $trs.each(function () {
   $(this).find(&#39;th:gt(&#39; + (that.options.fixedNumber - 1) + &#39;)&#39;).remove();
  });
  this.$fixedHeaderColumns.html(&#39;&#39;).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(&#39;&#39;);
  this.$body.find(&#39;> tr[data-index]&#39;).each(function () {
   var $tr = $(this).clone(),
    $tds = $tr.find(&#39;td&#39;);
   //$tr.html(&#39;&#39;);这样存在一个兼容性问题,在IE浏览器里面,清空tr,$tds的值也会被清空。
   //$tr.html(&#39;&#39;);
   var $newtr = $(&#39;<tr></tr>&#39;);
   $newtr.attr(&#39;data-index&#39;, $tr.attr(&#39;data-index&#39;));
   $newtr.attr(&#39;data-uniqueid&#39;, $tr.attr(&#39;data-uniqueid&#39;));
   var end = that.options.fixedNumber;
   if (rowspan > 0) {
    --end;
    --rowspan;
   }
   for (var i = 0; i < end; i++) {
    $newtr.append($tds.eq(i).clone());
   }
   that.$fixedBodyColumns.append($newtr);
   if ($tds.eq(0).attr(&#39;rowspan&#39;)) {
    rowspan = $tds.eq(0).attr(&#39;rowspan&#39;) - 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(&#39;:hidden&#39;) ? 100 : 0);
  clearTimeout(this.timeoutBodyColumns_);
  this.timeoutBodyColumns_ = setTimeout($.proxy(this.fitBodyColumns, this), this.$el.is(&#39;:hidden&#39;) ? 100 : 0);
 };
 BootstrapTable.prototype.fitHeaderColumns = function () {
  var that = this,
   visibleFields = this.getVisibleFields(),
   headerWidth = 0;
  this.$body.find(&#39;tr:first-child:not(.no-records-found) > *&#39;).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(&#39;th[data-field="&#39; + visibleFields[index] + &#39;"]&#39;)
    .find(&#39;.fht-cell&#39;).width($this.innerWidth());
   headerWidth += $this.outerWidth();
  });
  this.$fixedHeader.width(headerWidth).show();
 };
 BootstrapTable.prototype.fitBodyColumns = function () {
  var that = this,
   top = -(parseInt(this.$el.css(&#39;margin-top&#39;))),
   // the fixed height should reduce the scorll-x height
   height = this.$tableBody.height() - 18;
  debugger;
  if (!this.$body.find(&#39;> tr[data-index]&#39;).length) {
   this.$fixedBody.hide();
   return;
  }
  if (!this.options.height) {
   top = this.$fixedHeader.height()- 1;
   height = height - top;
  }
  this.$fixedBody.css({
   width: this.$fixedHeader.width(),
   height: height,
   top: top + 1
  }).show();
  this.$body.find(&#39;> tr&#39;).each(function (i) {
   that.$fixedBody.find(&#39;tr:eq(&#39; + i + &#39;)&#39;).height($(this).height() - 0.5);
   var thattds = this;
   debugger;
   that.$fixedBody.find(&#39;tr:eq(&#39; + i + &#39;)&#39;).find(&#39;td&#39;).each(function (j) {
    $(this).width($($(thattds).find(&#39;td&#39;)[j]).width() + 1);
   });
  });
  // events
  this.$tableBody.on(&#39;scroll&#39;, function () {
   that.$fixedBody.find(&#39;table&#39;).css(&#39;top&#39;, -$(this).scrollTop());
  });
  this.$body.find(&#39;> tr[data-index]&#39;).off(&#39;hover&#39;).hover(function () {
   var index = $(this).data(&#39;index&#39;);
   that.$fixedBody.find(&#39;tr[data-index="&#39; + index + &#39;"]&#39;).addClass(&#39;hover&#39;);
  }, function () {
   var index = $(this).data(&#39;index&#39;);
   that.$fixedBody.find(&#39;tr[data-index="&#39; + index + &#39;"]&#39;).removeClass(&#39;hover&#39;);
  });
  this.$fixedBody.find(&#39;tr[data-index]&#39;).off(&#39;hover&#39;).hover(function () {
   var index = $(this).data(&#39;index&#39;);
   that.$body.find(&#39;tr[data-index="&#39; + index + &#39;"]&#39;).addClass(&#39;hover&#39;);
  }, function () {
   var index = $(this).data(&#39;index&#39;);
   that.$body.find(&#39;> tr[data-index="&#39; + index + &#39;"]&#39;).removeClass(&#39;hover&#39;);
  });
 };
})(jQuery);
로그인 후 복사


.fixed-table-header-columns,
.fixed-table-body-columns {
 position: absolute;
 background-color: #fff;
 display: none;
 box-sizing: border-box;
 overflow: hidden;
}
 .fixed-table-header-columns .table,
 .fixed-table-body-columns .table {
  border-right: 1px solid #ddd;
 }
  .fixed-table-header-columns .table.table-no-bordered,
  .fixed-table-body-columns .table.table-no-bordered {
   border-right: 1px solid transparent;
  }
 .fixed-table-body-columns table {
  position: absolute;
  animation: none;
 }
.bootstrap-table .table-hover > tbody > tr.hover > td {
 background-color: #f5f5f5;
}
로그인 후 복사

사용 방법은? 여기 블로거는 정적 HTML 테스트 페이지를 별도로 만들어서 참고용으로 게시했습니다.


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="utf-8" />
 <title></title>
 <!--必须的css引用-->
 <link href="Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
 <link href="Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
<link href="Content/bootstrap-table/extensions/fixed-column/bootstrap-table-fixed-columns.css" rel="stylesheet" />
</head>
<body>
 <p class="panel-body" style="padding-bottom:0px;">
  <!--<p class="panel panel-default">
   <p class="panel-heading">查询条件</p>
   <p class="panel-body">
    <form id="formSearch" class="form-horizontal">
     <p class="form-group" style="margin-top:15px">
      <label class="control-label col-sm-1" for="name">员工姓名</label>
      <p class="col-sm-3">
       <input type="text" class="form-control" id="name">
      </p>
      <label class="control-label col-sm-1" for="address">家庭住址</label>
      <p class="col-sm-3">
       <input type="text" class="form-control" id="address">
      </p>
      <p class="col-sm-4" style="text-align:left;">
       <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button>
      </p>
     </p>
    </form>
   </p>
  </p>-->
  <p id="toolbar" class="btn-group">
   <button id="btn_add" type="button" class="btn btn-success">
    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
   </button>
  </p>
  <table id="tb_user"></table>
 </p>
 <!--新增或者编辑的弹出框-->
 <p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <p class="modal-dialog" role="document">
   <p class="modal-content">
    <p class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
     <h4 class="modal-title" id="myModalLabel">操作</h4>
    </p>
    <p class="modal-body">
     <p class="row" style="padding:10px;">
      <label class="control-label col-xs-2">姓名</label>
      <p class="col-xs-10">
       <input type="text" name="Name" class="form-control" placeholder="姓名">
      </p>
     </p>
     <p class="row" style="padding:10px;">
      <label class="control-label col-xs-2">年龄</label>
      <p class="col-xs-10">
       <input type="text" name="Age" class="form-control" placeholder="年龄">
      </p>
     </p>
     <p class="row" style="padding:10px;">
      <label class="control-label col-xs-2">学校</label>
      <p class="col-xs-10">
       <input type="text" name="School" class="form-control" placeholder="学校">
      </p>
     </p>
     <p class="row" style="padding:10px;">
      <label class="control-label col-xs-2">家庭住址</label>
      <p class="col-xs-10">
       <input type="text" name="Address" class="form-control" placeholder="学校">
      </p>
     </p>
     <p class="row" style="padding:10px;">
      <label class="control-label col-xs-2">备注</label>
      <p class="col-xs-10">
       <textarea class="form-control" placeholder="备注" name="Remark"></textarea>
      </p>
     </p>
    </p>
    <p class="modal-footer">
     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
     <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
    </p>
   </p>
  </p>
 </p>
  <!--必须的js文件-->
  <script src="Content/jquery-1.9.1.min.js"></script>
  <script src="Content/bootstrap/js/bootstrap.min.js"></script>
  <script src="Content/bootstrap-table/bootstrap-table.min.js"></script>
  <script src="Content/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="Content/bootstrap-table/extensions/fixed-column/bootstrap-table-fixed-columns.js"></script>
  <script type="text/javascript">
   //页面加载完成之后
   var data = [
    { Id: 1, Name: &#39;Jim&#39;, Age: 30, School: &#39;光明小学&#39;, Address: &#39;北京市光明小学旁&#39;, Remark: &#39;My Name is Jim Green&#39; },
    { Id: 2, Name: &#39;Kate&#39;, Age: 30, School: &#39;光明小学&#39;, Address: &#39;深圳市&#39;, Remark: &#39;My Name is Jim Green&#39; },
    { Id: 3, Name: &#39;Lucy&#39;, Age: 30, School: &#39;光明小学&#39;, Address: &#39;广州天河机场&#39;, Remark: &#39;My Name is Jim Green&#39; },
    { Id: 4, Name: &#39;Lilei&#39;, Age: 30, School: &#39;光明小学&#39;, Address: &#39;北京市光明小学旁&#39;, Remark: &#39;My Name is Jim Green&#39; },
    { Id: 5, Name: &#39;Lintao&#39;, Age: 30, School: &#39;光明小学&#39;, Address: &#39;北京市光明小学旁&#39;, Remark: &#39;My Name is Jim Green&#39; },
    { Id: 6, Name: &#39;Lily&#39;, Age: 30, School: &#39;光明小学&#39;, Address: &#39;北京市光明小学旁&#39;, Remark: &#39;My Name is Jim Green&#39; },
    { Id: 7, Name: &#39;Hanmeimei&#39;, Age: 30, School: &#39;光明小学&#39;, Address: &#39;北京市光明小学旁&#39;, Remark: &#39;My Name is Jim Green&#39; },
    { Id: 8, Name: &#39;张三&#39;, Age: 46, School: &#39;光明小学&#39;, Address: &#39;北京市光明小学旁&#39;, Remark: &#39;My Name is Jim Green&#39; },
    { Id: 9, Name: &#39;李四&#39;, Age: 23, School: &#39;光明小学&#39;, Address: &#39;北京市光明小学旁&#39;, Remark: &#39;My Name is Jim Green&#39; },
    { Id: 10, Name: &#39;王五&#39;, Age: 33, School: &#39;光明小学&#39;, Address: &#39;北京市光明小学旁&#39;, Remark: &#39;My Name is Jim Green&#39; },
    { Id: 11, Name: &#39;赵六&#39;, Age: 22, School: &#39;光明小学&#39;, Address: &#39;北京市光明小学旁&#39;, Remark: &#39;My Name is Jim Green&#39; },
    { Id: 12, Name: &#39;Polly&#39;, Age: 300, School: &#39;光明小学&#39;, Address: &#39;北京市光明小学旁&#39;, Remark: &#39;My Name is Jim Green&#39; },
    { Id: 13, Name: &#39;Uncle&#39;, Age: 50, School: &#39;光明小学&#39;, Address: &#39;北京市光明小学旁&#39;, Remark: &#39;My Name is Jim Green&#39; },
   ];
   var childData = [
    { SourceField: &#39;A&#39;, BackField: &#39;BB&#39; },
    { SourceField: &#39;CC&#39;, BackField: &#39;UU&#39; },
    { SourceField: &#39;DD&#39;, BackField: &#39;J&#39; },
   ];
   $(function () {
    //表格的初始化
    $(&#39;#tb_user&#39;).bootstrapTable({
     data: data,       //直接从本地数据初始化表格
     method: &#39;get&#39;,      //请求方式(*)
     toolbar: &#39;#toolbar&#39;,    //工具按钮用哪个容器
     striped: true,      //是否显示行间隔色
     cache: false,      //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
     pagination: true,     //是否显示分页(*)
     sortable: false,      //是否启用排序
     sortOrder: "asc",     //排序方式
     queryParams: function (params) {
      return params;
     },         //传递参数(*)
     sidePagination: "client",   //分页方式:client客户端分页,server服务端分页(*)
     pageNumber: 1,      //初始化加载第一页,默认第一页
     pageSize: 5,      //每页的记录行数(*)
     pageList: [10, 25, 50, 100],  //可供选择的每页的行数(*)
     search: true,      //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
     strictSearch: true,
     showColumns: true,     //是否显示所有的列
     showRefresh: true,     //是否显示刷新按钮
     minimumCountColumns: 2,    //最少允许的列数
     height:400,
   selectItemName: &#39;parentItem&#39;,
     fixedColumns: true,
     fixedNumber: 6,
     //注册加载子表的事件。注意下这里的三个参数!
     onExpandRow: function (index, row, $detail) {
      InitSubTable(index, row, $detail);
     },
     columns: [{
      checkbox: true
     }, {
      field: &#39;Name&#39;,
      title: &#39;姓名&#39;,
width:200
     }, {
      field: &#39;Age&#39;,
      title: &#39;年龄&#39;,
width:200
     }, {
      field: &#39;School&#39;,
      title: &#39;毕业院校&#39;,
width:200
     }, {
      field: &#39;Address&#39;,
      title: &#39;家庭住址&#39;,
width:100
     }, {
      field: &#39;Remark&#39;,
      title: &#39;备注&#39;,
width:100
     }, 
 {
      field: &#39;Remark&#39;,
      title: &#39;备注&#39;,
width:100
     }, {
      field: &#39;Remark&#39;,
      title: &#39;备注&#39;,
width:100
     }, {
      field: &#39;Remark&#39;,
      title: &#39;备注&#39;,
width:100
     }, {
      field: &#39;Remark&#39;,
      title: &#39;备注&#39;,
width:100
     }, {
      field: &#39;Remark&#39;,
      title: &#39;备注&#39;,
width:100
     },{
      field: &#39;Remark&#39;,
      title: &#39;备注&#39;,
width:100
     },{
      field: &#39;Remark&#39;,
      title: &#39;备注&#39;,
width:100
     },{
      field: &#39;Remark&#39;,
      title: &#39;备注&#39;,
width:100
     },{
      field: &#39;Remark&#39;,
      title: &#39;备注&#39;,
width:100
     },{
      field: &#39;Remark&#39;,
      title: &#39;备注&#39;,
width:100
     },{
      field: &#39;Remark&#39;,
      title: &#39;备注&#39;,
width:100
     },{
      field: &#39;Remark&#39;,
      title: &#39;备注&#39;,
width:100
     },{
      field: &#39;Remark&#39;,
      title: &#39;备注&#39;,
width:100
     },{
      field: &#39;Remark&#39;,
      title: &#39;备注&#39;,
width:100
     },{
      field: &#39;Remark&#39;,
      title: &#39;备注&#39;,
width:100
     },{
      field: &#39;Remark&#39;,
      title: &#39;备注&#39;,
width:100
     },{
      field: &#39;Remark&#39;,
      title: &#39;备注&#39;,
width:100
     },{
      field: &#39;Remark&#39;,
      title: &#39;备注&#39;,
width:100
     },{
      field: &#39;Remark&#39;,
      title: &#39;备注&#39;,
width:100
     },{
      field: &#39;Remark&#39;,
      title: &#39;备注&#39;,
width:100
     },{
      field: &#39;Remark&#39;,
      title: &#39;备注&#39;,
width:100
     },{
      field: &#39;Remark&#39;,
      title: &#39;备注&#39;,
width:100
     },{
      field: &#39;Remark&#39;,
      title: &#39;备注&#39;,
width:100
     },{
      field: &#39;Remark&#39;,
      title: &#39;备注&#39;,
width:100
     },{
      field: &#39;Remark&#39;,
      title: &#39;备注&#39;,
width:100
     },{
      title: &#39;操作&#39;,
width:200,
      formatter: function (value, row, index) {//这里的三个参数:value表示当前行当前列的值;row表示当前行的数据;index表示当前行的索引(从0开始)。
       var html = &#39;<button type="button" onclick="editModel(&#39;+row.Id+&#39;)" class="btn btn-primary"><span class="glyphicon glyphicon-pencil" aria- hidden="true" ></span >编辑</button >  &#39; +
          &#39;<button type="button" onclick="deleteModel(&#39; + row.Id + &#39;)" class="btn btn-danger"><span class="glyphicon glyphicon-remove" aria- hidden="true" ></span >删除</button >&#39;;
       return html;
      }
     }],
     onEditableSave: function (field, row, oldValue, $el) {
      alert("更新保存事件,原始值为" + oldValue);
      //$.ajax({
      // type: "post",
      // url: "/Editable/Edit",
      // data: row,
      // dataType: &#39;JSON&#39;,
      // success: function (data, status) {
      //  if (status == "success") {
      //   alert(&#39;提交数据成功&#39;);
      //  }
      // },
      // error: function () {
      //  alert(&#39;编辑失败&#39;);
      // },
      // complete: function () {
      // }
      //});
     }
    });
    //新增事件
    $("#btn_add").on(&#39;click&#39;, function () {
$(&#39;#tb_user&#39;).bootstrapTable("resetView");
     //弹出模态框
     $("#myModal").modal();
     //给弹出框里面的各个文本框赋值
     $("#myModal input").val("");
     $("#myModal textarea").val("");
    });
   });
   //加载子表
   var InitSubTable = function (index, row, $detail) {
    var parentid = row.MENU_ID;
    var cur_table = $detail.html(&#39;<table></table>&#39;).find(&#39;table&#39;);
    //子表的初始化和父表完全相同
    $(cur_table).bootstrapTable({
     //url: &#39;/api/MenuApi/GetChildrenMenu&#39;,
     data: childData,
     method: &#39;get&#39;,
     queryParams: { strParentID: parentid },
     ajaxOptions: { strParentID: parentid },
     clickToSelect: true,
     uniqueId: "MENU_ID",
     pageSize: 10,
     pageList: [10, 25],
   selectItemName: &#39;childItem&#39;+index,
   checkboxHeader:false,
     columns: [{
      checkbox: true
     }, {
       field: &#39;SourceField&#39;,
      title: &#39;源端字段&#39;
     }, {
      field: &#39;BackField&#39;,
      title: &#39;备端字段&#39;
     }, {
      field: &#39;BackField&#39;,
      title: &#39;备端字段&#39;
     }, {
      field: &#39;BackField&#39;,
      title: &#39;备端字段&#39;
     }, {
      field: &#39;BackField&#39;,
      title: &#39;备端字段&#39;
     }, {
      field: &#39;BackField&#39;,
      title: &#39;备端字段&#39;
     }, {
      field: &#39;BackField&#39;,
      title: &#39;备端字段&#39;
     }, {
      field: &#39;BackField&#39;,
      title: &#39;备端字段&#39;
     }, {
      field: &#39;BackField&#39;,
      title: &#39;备端字段&#39;
     }, {
      field: &#39;BackField&#39;,
      title: &#39;备端字段&#39;
     }, {
      field: &#39;BackField&#39;,
      title: &#39;备端字段&#39;
     }, {
      field: &#39;BackField&#39;,
      title: &#39;备端字段&#39;
     }, {
      field: &#39;BackField&#39;,
      title: &#39;备端字段&#39;
     }, {
      field: &#39;BackField&#39;,
      title: &#39;备端字段&#39;
     }, {
      field: &#39;BackField&#39;,
      title: &#39;备端字段&#39;
     }, {
      field: &#39;BackField&#39;,
      title: &#39;备端字段&#39;
     }, {
      field: &#39;BackField&#39;,
      title: &#39;备端字段&#39;
     }, {
      field: &#39;BackField&#39;,
      title: &#39;备端字段&#39;
     }, {
      field: &#39;BackField&#39;,
      title: &#39;备端字段&#39;
     }, {
      field: &#39;BackField&#39;,
      title: &#39;备端字段&#39;
     }, {
      field: &#39;BackField&#39;,
      title: &#39;备端字段&#39;
     }, {
      field: &#39;BackField&#39;,
      title: &#39;备端字段&#39;
     }, {
      field: &#39;BackField&#39;,
      title: &#39;备端字段&#39;
     }, {
      field: &#39;BackField&#39;,
      title: &#39;备端字段&#39;
     }, {
      field: &#39;BackField&#39;,
      title: &#39;备端字段&#39;
     }, {
      field: &#39;BackField&#39;,
      title: &#39;备端字段&#39;
     }],
     //无线循环取子表,直到子表里面没有记录
     onExpandRow: function (index, row, $Subdetail) {
      //oInit.InitSubTable(index, row, $Subdetail);
     }
    });
   };
   //编辑事件
   var editModel = function (id) {
    //根据当前行的id获取当前的行数据
    var row = $("#tb_user").bootstrapTable(&#39;getRowByUniqueId&#39;, id);
    //弹出模态框
    $("#myModal").modal();
    //给弹出框里面的各个文本框赋值
    $("#myModal input[name=&#39;Name&#39;]").val(row.Name);
    $("#myModal input[name=&#39;Age&#39;]").val(row.Age);
    $("#myModal input[name=&#39;School&#39;]").val(row.School);
    $("#myModal input[name=&#39;Address&#39;]").val(row.Address);
    $("#myModal textarea[name=&#39;Remark&#39;]").val(row.Remark);
   }
   //删除事件
   var deleteModel = function (id) {
    alert("删除id为" + id + "的用户");
   }
  </script>
</body>
</html>
bootstrapTableFixColumns.html
로그인 후 복사

코드 설명:

1、源码各个方法解释

  • BootstrapTable.prototype.initFixedColumns :当初始化的时候配置了fixedColumns: true时需要执行的冻结列的方法。

  • BootstrapTable.prototype.initHeader:重写组件的的初始化表头的方法,加入冻结的表头。

  • BootstrapTable.prototype.initBody:重写组件的初始化表内容的方法,加入冻结的表内容。

  • BootstrapTable.prototype.resetView:重写“父类”的resetView方法,通过setTimeout去设置冻结的表头和表体的宽度和高度。

  • BootstrapTable.prototype.fitHeaderColumns:设置冻结列的表头的宽高。

  • BootstrapTable.prototype.fitBodyColumns :设置冻结列的表体的宽高,以及滚动条和主体表格的滚动条同步。

2、对于上述抛出的ie和谷歌的兼容性问题的解析

查看BootstrapTable.prototype.initBody方法,你会发现里面写有部分注释。


this.$body.find(&#39;> tr[data-index]&#39;).each(function () {
  var $tr = $(this).clone(),
  $tds = $tr.find(&#39;td&#39;);
  //$tr.html(&#39;&#39;);这样存在一个兼容性问题,在IE浏览器里面,清空tr,$tds的值也会被清空。
  //$tr.html(&#39;&#39;);
  var $newtr = $(&#39;<tr></tr>&#39;);
  $newtr.attr(&#39;data-index&#39;, $tr.attr(&#39;data-index&#39;));
  $newtr.attr(&#39;data-uniqueid&#39;, $tr.attr(&#39;data-uniqueid&#39;));
  var end = that.options.fixedNumber;
  if (rowspan > 0) {
  --end;
  --rowspan;
  }
  for (var i = 0; i < end; i++) {
  $newtr.append($tds.eq(i).clone());
  }
  that.$fixedBodyColumns.append($newtr);
  if ($tds.eq(0).attr(&#39;rowspan&#39;)) {
  rowspan = $tds.eq(0).attr(&#39;rowspan&#39;) - 1;
  }
 });
로그인 후 복사

这一段做了部分修改,有兴趣可以调适细看。

3、项目中的使用

最近在研究学习abp的相关源码,将bootstrapTable融入abp里面去了,贴出表格冻结的一些效果图。

4、扩展

除此之外,还特意做了右边操作列的冻结。

和左边列的冻结一样,最右边列的冻结也是可以做的,最不同的地方莫过于右边列有一些操作按钮,如果在点击冻结列上面的按钮时触发实际表格的按钮事件是难点。如果有这个需求,可以看看。


 bootstrap-table-fixed-columns.js
 bootstrap-table-fixed-columns.css
로그인 후 복사

需要说明的是,由于时间问题,右侧固定列的代码和上述解决高度的代码并未合并,所以如果你既想要解决冻结列的高度,又想要右侧列的冻结,需要自己花点时间合并下代码。

위 내용은 Bootstrap Table의 고정 열 기능으로 높이 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿