Vue 固定头 固定列 点击表头可排序的表格组件


Posted in Javascript onNovember 25, 2016

原理是将原table的指定行,指定列clone一份放在其上

实现代码如下:

<template> 
 <div> 
  <div id="divBox1" :style="{height:height}"> 
   <table id="tbTest1" cellpadding="0" cellspacing="0" style="text-align:center;background:rgba(244,249,255,0.4);"> 
    <tr> 
     <th v-for="item in thead" @click="sortBy(item)"> 
      {{item}}<img style="width:0.16rem;height:0.20rem;margin-left:4px;" :src="filterUrl" alt="" v-if="$index!=0" data-img="{{filterUrl}}"> 
     </th> 
    </tr> 
    <tr v-for="row in tableRows | orderBy sortBykey sortOrders[sortKey]"> 
     <td style="overflow:hidden;white-space:nowrap;" v-for="item in gridColumns" v-html="row[item] | numberFilter" :id="$parent.$index"> 
     </td> 
    </tr> 
   </table> 
  </div> 
 </div> 
</template> 
<script> 
 /*eslint-disable*/ 
 var ofixed_table_st = window.setTimeout; 
 var hasLeft = ''; 
 var hasHead = ''; 
 window.setTimeout = function(fRef, mDelay) { 
  if(typeof fRef == 'function') { 
   var argu = Array.prototype.slice.call(arguments, 2); 
   var f = (function() { 
    fRef.apply(null, argu); 
   }); 
   return ofixed_table_st(f, mDelay); 
  } 
  return ofixed_table_st(fRef, mDelay); 
 }; 
 function oFixedTable(id, obj, _cfg) { 
  this.id = id; 
  this.obj = obj; 
  this.box = this.obj.parentNode; 
  this.config = { 
   fixHead: _cfg.fixHead || true, 
   rows: _cfg.rows || 1, 
   cols: _cfg.cols || 0, 
   background: _cfg.background || '#ffffff', 
   zindex: _cfg.zindex || 10 
  }; 
  window.setTimeout(this._fixTable, 100, this); 
 } 
 oFixedTable.prototype._fixTable = function(_) { 
  if(_.obj.rows.length <= 0) { 
   return false; 
  } 
  var hasLeft = _.buildLeft(); 
  var hasHead = _.buildHead(); 
  _.box.onscroll = function() { 
   if(_.divHead != null) { 
    _.divHead.scrollLeft = this.scrollLeft; 
   } 
   if(_.divLeft != null) { 
    _.divLeft.scrollTop = this.scrollTop; 
   } 
  }; 
  if(hasHead && hasLeft) { 
   _.buildTopLeft(); 
  } 
 }; 
 oFixedTable.prototype.buildHead = function() { 
  console.log(2222222222222222222) 
  var _ = this; 
  var strDivId = _.id + '_div_head'; 
  var strTbId = _.id + '_tb_header'; 
  var div = document.createElement('div'); 
  div.id = strDivId; 
  div.style.cssText = 'position:absolute;overflow:hidden;z-index:' + (_.config.zindex + 1) + ';'; 
  div.innerHTML = '<table id="' + strTbId + '" cellpadding="0" cellspacing="0" style="background:' + _.config.background + ';"></table>'; 
  _.box.insertBefore(div, _.obj); 
  _.divHead = div; 
  _.tbHead = document.getElementById(strTbId); 
  //判断是否出现纵向滚动条,若出现,高度减去滚动条宽度 16px 
  var sw = _.obj.offsetHeight > _.box.offsetHeight ? 0 : 0; 
  _.divHead.style.width = (_.box.offsetWidth - sw) + 'px'; 
  _.tbHead.style.textAlign = _.obj.style.textAlign; 
  _.tbHead.style.width = _.obj.offsetWidth + 'px'; 
  var hasHead = false; 
  if(_.config.fixHead && _.obj.tHead != null) { 
   var tHead = _.obj.tHead; 
   _.tbHead.appendChild(tHead.cloneNode(true)); 
   hasHead = true; 
  } else { 
   for(var i = 0; i < _.config.rows; i++) { 
    var row = _.obj.rows[i]; 
    if(row != null) { 
     _.tbHead.appendChild(row.cloneNode(true)); 
     hasHead = true; 
    } 
   } 
  } 
  return hasHead; 
 }; 
 oFixedTable.prototype.buildLeft = function() { 
  var _ = this; 
  if(_.config.cols <= 0) { 
   return false; 
  } 
  var strDivId = _.id + '_div_left'; 
  var strTbId = _.id + '_tb_left'; 
  var div = document.createElement('div'); 
  div.id = strDivId; 
  div.style.cssText = 'position:absolute;overflow:hidden;z-index:' + _.config.zindex + ';box-shadow: #dddddd 2px 0px 2px;width: 2rem;'; 
  div.innerHTML = '<table id=' + strTbId + ' cellpadding="0" cellspacing="0" style="background:' + _.config.background + ';width: 2rem;"></table>'; 
  _.box.insertBefore(div, _.obj); 
  _.divLeft = div; 
  _.tbLeft = document.getElementById(strTbId); 
  _.tbLeft.style.textAlign = _.obj.style.textAlign; 
  //判断是否出现横向滚动条,若出现,高度减去滚动条高度 16px 
  var sw = _.obj.offsetWidth > _.box.offsetWidth ? 0 : 0; 
  _.divLeft.style.height = (_.box.offsetHeight - sw) + 'px'; 
  var hasLeft = false; 
  for(var i = 0, rows = _.obj.rows.length; i < rows; i++) { 
   var row = _.tbLeft.insertRow(_.tbLeft.rows.length); 
   row.style.cssText = _.obj.rows[i].style.cssText; 
   for(var j = 0; j < _.config.cols; j++) { 
    var cell = _.obj.rows[i].cells[j]; 
    if(cell != null) { 
     row.appendChild(cell.cloneNode(true)); 
     cell.style.cssText = _.obj.rows[i].cells[j].style.cssText; 
     hasLeft = true; 
    } 
   } 
  } 
  return hasLeft; 
 }; 
 oFixedTable.prototype.buildTopLeft = function() { 
  var _ = this; 
  var strDivId = _.id + '_div_top_left'; 
  var strTbId = _.id + '_tb_top_left'; 
  var div = document.createElement('div'); 
  div.id = strDivId; 
  div.style.cssText = 'position:absolute;overflow:hidden;z-index:' + (_.config.zindex + 2) + ';box-shadow: #dddddd 2px 0px 2px;width: 2rem;'; 
  div.innerHTML = '<table id="' + strTbId + '" cellpadding="0" cellspacing="0" style="background:' + _.config.background + ';"></table>'; 
  _.box.insertBefore(div, _.obj); 
  var tbTopLeft = document.getElementById(strTbId); 
  tbTopLeft.style.textAlign = _.obj.style.textAlign; 
  for(var i = 0; i < _.config.rows; i++) { 
   var row = tbTopLeft.insertRow(tbTopLeft.rows.length); 
   row.style.cssText = _.obj.rows[i].style.cssText; 
   for(var j = 0; j < _.config.cols; j++) { 
    var cell = _.obj.rows[i].cells[j]; 
    if(cell != null) { 
     row.appendChild(cell.cloneNode(true)); 
     cell.style.cssText = _.obj.rows[i].cells[j].style.cssText; 
     hasLeft = true; 
    } 
   } 
  } 
 }; 
 export default{ 
  // 接收父组件传过来的参数 
  props: ['tableRows', 'gridColumns', 'thead', 'store', 'height', 'singleData'], 
  // 监控 
  watch: { 
   'tableRows': function (val) { 
    var self = this 
    // 明星店铺页面时动态调整店铺名所在列的宽度s 
    if (self.store) { 
     document.querySelectorAll('table td:nth-child(3)')[0].style.width = 3 + 'rem' 
     document.querySelectorAll('table th:nth-child(3)')[0].style.width = 3 + 'rem' 
    } 
    var length = self.gridColumns.length 
    document.getElementById('tbTest1').style.width = 2 * length + 'rem' 
    setTimeout(function () { 
     if (self.singleData) { 
      document.getElementById('ofix1_tb_left').classList.add('ofix1_tb_left') 
     } 
     document.querySelectorAll('#ofix1_tb_left td')[0].style.width = 2 + 'rem' 
     var tbObj = document.getElementById('ofix1_tb_header') 
     tbObj.addEventListener('click',function (event) { 
      if(event.target.tagName === 'TH'){ 
       self.sortBy(event.target.innerText, event) 
      } 
     }) 
    }, 101) 
   } 
  }, 
  data: function() { 
   var sortOrders = {} 
   this.gridColumns.forEach(function (key) { 
    sortOrders[key] = 1 
   }) 
   return { 
    sortKey: '', 
    filterUrl: './static/img/indus/filter1.png', 
    sortOrders: sortOrders 
   } 
  }, 
  methods: { 
   sortBykey: function (a, b) { 
    return parseFloat(a[this.sortKey]) - parseFloat(b[this.sortKey]) 
    console.log('11111111111') 
   }, 
   sortBy: function (key, event) { 
    // 每一次排序之前所有的图片重置 
    var imgDom = document.querySelectorAll('#ofix1_tb_header th img') 
    for (var x = 0; x < imgDom.length; x++) { 
     imgDom[x].setAttribute('src', './static/img/indus/filter1.png') 
    } 
    // 排序 
    var activeTheadIndex = 0 
    for (var i = 0; i < this.thead.length; i++) { 
     if (this.thead[i] === key) { 
      activeTheadIndex = i 
     } 
    } 
    this.sortKey = this.gridColumns[activeTheadIndex] 
    this.sortOrders[this.gridColumns[activeTheadIndex]] = this.sortOrders[this.gridColumns[activeTheadIndex]] * -1 
    // 排序时同步改变标识图片 
    if (this.sortOrders[this.gridColumns[activeTheadIndex]] > 0) { 
     event.target.getElementsByTagName('img')[0].setAttribute('src', './static/img/indus/filter2.png') 
    } else { 
     event.target.getElementsByTagName('img')[0].setAttribute('src', './static/img/indus/filter3.png') 
    } 
    // 排序时同步改变左边第一列的内容 
    setTimeout(function(){ 
     var tdDom = document.querySelectorAll('#tbTest1 tr td:nth-child(1)') 
     var tdDomLeft = document.querySelectorAll('#ofix1_tb_left td') 
     for (var y = 0; y < tdDom.length; y++) { 
      tdDomLeft[y].innerHTML = tdDom[y].innerHTML 
     } 
    },0) 
   } 
  }, 
  filters: { 
   numberFilter: function (value) { 
    if (value == 0) { 
     return '0' 
    } else if (!value) { 
     return '/' 
    } else { 
     return value 
    } 
   } 
  }, 
  components: { 
  }, 
  ready: function() { 
   var ofix1 = new oFixedTable('ofix1', document.getElementById('tbTest1'), { 
    rows: 1, 
    cols: 1 
   }) 
  }, 
  created () { 
  } 
 } 
</script> 
<style lang="scss" scoped> 
 #divBox1{ 
  overflow:auto; 
  width:100%; 
  font-size: 0.28rem; 
 } 
 #ofix1_div_left{ 
  box-shadow: #dddddd 2px 0px 2px; 
  width: 2rem; 
 } 
 table { 
  table-layout : fixed; 
 } 
 table td, 
 table th { 
  width: 2rem; 
  line-height: 1rem; 
  height: 1rem; 
  padding: 0; 
  color: #999999; 
  overflow: hidden; 
  white-space: nowrap; 
  /*vertical-align: middle;*/ 
 } 
 table th{ 
  background: rgba(188,219,255,0.4); 
  color: #999; 
  font-size: .28rem; 
  font-weight: normal; 
 } 
 table th:nth-child(1){ 
  box-shadow: #dddddd 2px 0px 0px; 
 } 
 .ofix1_tb_left tr td:nth-child(1){ 
  /*display: inline-block;*/ 
  text-align: left; 
 } 
 #ofix1_div_top_left{ 
  box-shadow: #dddddd 2px 0px 2px; 
 } 
 #tbTest1 tr td:nth-child(1){ 
  box-shadow: #dddddd 2px 0px 0px; 
 } 
 #tbheader td { 
  background: #fff; 
 } 
</style>

父组件调用实例:

<template> 
   <table-locked :table-rows="tableData" :grid-columns="gridColumns" :thead="thead" :height="height"> 
   </table-locked> 
</template> 
import TableLocked from '../../common/TableLocked.vue' 
export default{ 
  components: {TableLocked}, 
  data () { 
    data.gridColumns = ['brand', 'product_count', 'averagePrice', 'sales', 'huang_sale_per', 'sale_per', 'sales_amount', 'huang_sale_amount_per', 'sales_amount_per', 'score_num', 'scort_good_per'] 
   data.thead = ['品类', '产品种类', '均价', '销量', '销量环比', '销量占比', '销额(万元)', '销额环比', '销额占比', '评论总数', '好评率'] 
  } 
}

以上所述是小编给大家介绍的Vue 固定头 固定列 点击表头可排序的表格组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript css在IE和Firefox中区别分析
Feb 18 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
JS简单循环遍历json数组的方法
Apr 22 Javascript
BootStrap智能表单demo示例详解
Jun 13 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 Javascript
使用JavaScript生成罗马字符的实例代码
Jun 08 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
AngularJs验证重复密码的方法(两种)
Nov 25 #Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 #Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 #Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 #Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 #Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 #Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 #Javascript
You might like
PHP中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
PHP的变量类型和作用域详解
2014/03/12 PHP
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
php使用curl伪造浏览器访问操作示例
2019/09/30 PHP
javascript事件模型代码
2007/07/01 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
2016/12/15 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
Python中str.format()详解
2017/03/12 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
python实现简单图书管理系统
2019/11/22 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
什么是python的自省
2020/06/21 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
HR喜欢的自荐信格式
2013/10/08 职场文书
如何写早恋检讨书
2014/09/10 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
同意迁入证明模板
2014/10/26 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
《角的初步认识》教学反思
2016/02/17 职场文书