vue.js实现表格合并示例代码


Posted in Javascript onNovember 30, 2016

前言

由于使用的是vue,想到MVVM是要用数据驱动的思想,所以考虑在Model做手脚,而不是渲染出数据来后做DOM操作,当然基本的CSS还是要有的。因此这个方法对所有数据驱动的框架都有效,比如说Angular和React。

最后的实现效果是这样的:

vue.js实现表格合并示例代码

实现思路

原本的正常表格的代码长这样:

<tr v-for="item in items">
 <td width="3%">{{ $index + 1 }}</td>
 <td width="15%">{{item.bsO_Name}}</td>
 <td width="8%" :class="{'overtime': overtime(item.GathDt)}">{{item.GathDt | time}}</td>
 <td width="5%">{{item.F1}}</td>
 <td width="5%">{{item.F2}}</td>
 <td width="5%">{{item.F4}}</td>
 <td width="5%">{{item.F3}}</td>
 <td width="5%">{{item.F5}}</td>
 <td width="5%">{{item.F6}}</td>
 <td width="5%">{{item.F7}}</td>
 <td width="5%">{{item.F8}}</td>
 <td width="5%">{{item.F9}}</td>
 <td width="5%">{{item.F10}}</td>
</tr>

先拿正常的表格来做测试,原生的<td>标签就有rowspan属性支持单元格行合并,属性值指的是向下合并多少行,其实就相当于在本行中向下又添加了几个单元格。

因为,如果接下来的一行还会渲染的话就会被挤下去,因此,下面被合并的单元格要隐藏掉,通过display: none; css控制即可。

因此,每个<td>标签需要带有两个属性值,rowspandisplay来控制每一个单元格的合并行数和是否显示。

代码变成这样了

<tr v-for="item in items">
 <td width="3%">{{ $index + 1 }}</td>
 <td width="10%" :rowspan="item.bsO_Namespan" :class="{hidden: item.bsO_Namedis}">{{item.bsO_Name}}</td>
 <td width="8%" :rowspan="item.GathDtspan" :class="{hidden: item.GathDtdis}" :class="{overtime: overtime(item.GathDt)}">{{item.GathDt | time}}</td>
 <td width="5%" :rowspan="item.F1span"  :class="{hidden: item.F1dis}">{{item.F1}}</td>
 <td width="5%" :rowspan="item.F2span"  :class="{hidden: item.F2dis}">{{item.F2}}</td>
 <td width="5%" :rowspan="item.F3span"  :class="{hidden: item.F3dis}">{{item.F3}}</td>
 <td width="5%" :rowspan="item.F4span"  :class="{hidden: item.F4dis}">{{item.F4}}</td>
 <td width="5%" :rowspan="item.F5span"  :class="{hidden: item.F5dis}">{{item.F5}}</td>
 <td width="10%" :rowspan="item.F6span"  :class="{hidden: item.F6dis}">{{item.F6}}</td>
 <td width="8%" :rowspan="item.F7span"  :class="{hidden: item.F7dis}" :class="{overtime: overtime(item.F7)}">{{item.F7 | time}}</td>
 <td width="5%" :rowspan="item.F8span"  :class="{hidden: item.F8dis}">{{item.F8}}</td>
 <td width="5%" :rowspan="item.F9span"  :class="{hidden: item.F9dis}">{{item.F9}}</td>
 <td width="5%" :rowspan="item.F10span"  :class="{hidden: item.F10dis}">{{item.F10}}</td>
 <td width="5%" :rowspan="item.F11span"  :class="{hidden: item.F11dis}">{{item.F11}}</td>
</tr>

其中,这两个属性有一些特征:

要显示的单元格rowspan为>1的值,记录接下来的行数

要显示的单元格displaytrue

接下来不显示的单元格rowspan为1且displayfalse

只有一行数据的单元格rowspan为1且displaytrue

实际上就是设计一个算法,对于输入的表格数组,每个数据项添加两个属性,rowspandisplay,并且计算出rowspan的值为

本列中以下相同值的行数,以及依据rowspan的值计算display的值是否显示,最后将此改变后的数组输出。

解决示例代码

function combineCell(list) {
 for (field in list[0]) {
  var k = 0;
  while (k < list.length) {
   list[k][field + 'span'] = 1;
   list[k][field + 'dis'] = false;
   for (var i = k + 1; i <= list.length - 1; i++) {
    if (list[k][field] == list[i][field] && list[k][field] != '') {
     list[k][field + 'span']++;
     list[k][field + 'dis'] = false;
     list[i][field + 'span'] = 1;
     list[i][field + 'dis'] = true;
    } else {
     break;
    }
   }
   k = i;
  }
 }
 return list;
}

总结

代码实际上很短很简单,主要借助的是kmp的思想,定义一个指针k,开始指向第一个值,然后向下比较,以此对rowspandisplay设置,

若遇到不相同的值则判断为跳出,进行下一个循环,通知指针k加上这个过程中运算的行数,进行跳转,然后比较下一个单元格的值,和kmp的指针跳转判断相同字符串一样的原理。

通过combineCell()这个函数就可以将网络请求回来的数据进行过滤,附加上相应的值后再对vue监视的数组进行赋值操作就可以了。

实际上此方法不仅适用于vue,数据驱动的框架都可以,包括Angular和React,要想实现表格合并,对请求回来的值过滤一下就OK。

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
js中自定义方法实现停留几秒sleep
Jul 11 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
jQuery检测输入的字符串包含的中英文的数量
Apr 17 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
Backbone中View之间传值的学习心得
Aug 09 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 Javascript
JavaScript页面加载事件实例讲解
Sep 01 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 #Javascript
Javascript 闭包详解及实例代码
Nov 30 #Javascript
jQuery特殊符号转义的实现
Nov 30 #Javascript
Javascript 引擎工作机制详解
Nov 30 #Javascript
将JSON字符串转换成Map对象的方法
Nov 30 #Javascript
JS实现重新加载当前页面或者父页面的几种方法
Nov 30 #Javascript
JS实现重新加载当前页面
Nov 29 #Javascript
You might like
PHP 超链接 抓取实现代码
2009/06/29 PHP
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
js function定义函数使用心得
2010/04/15 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
Python and、or以及and-or语法总结
2015/04/14 Python
python中函数传参详解
2016/07/03 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
提升python处理速度原理及方法实例
2019/12/25 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
python删除某个目录文件夹的方法
2020/05/26 Python
Python如何使用input函数获取输入
2020/08/06 Python
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
JDO的含义
2012/11/17 面试题
《长征》教学反思
2014/04/27 职场文书
情人节单身感言
2015/08/03 职场文书
小学数学教学反思范文
2016/02/16 职场文书
Mysql事务索引知识汇总
2022/03/17 MySQL
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS