<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>总合计</title> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewp…
1.引入 bootstrap依赖于jquery bootstrap-table依赖于bootstrap,所以都需要引入 2. bootstrap-table有两种方式,html.js <table id="table" class="table table-bordered table-hover" data-toggle="table" //启用bootstrap表格 data-classes="table table-hove…
前言: 分离边框模型和合并边框模型是表格的两种模型,它通过以下属性确定: border-collapse:separate(默认值) | collapse | inherit 当采用分离边框模型时,表格单元格宽度是相当清晰的,和盒模型几乎一致. 当使用合并边框模型时,则不太明了,可能产生以下疑问: (1)两个单元格的边框合并成了一个边框,那么这个边框究竟算谁的呢? (2)现在各单元格内容区宽度如何计算呢? 示例 <div id="container"> <table…
在最近的项目中需要将表格的表头固定,搜寻了大量的资料,发现chromatable插件还是比较方便的.但是当我在一个页面中多次使用 chromatable固定对个表格的表头时问题就出现了,首先说明系统的前端架构使用了BootStrap,表格本身的头部宽度是自适应的. 使用表头固定的代码如下: //固定表头 $("#row1_table").chromatable({ width : "718px", height : "335px", scroll…
mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => { this.adjustTable(event); }); }, ...... // target中的属性很多,可以通过控制台查看—-clientWidth可以获取除滚动条外的可视区域宽度 adjustTable(event) { this.clientWidth = event.target.cli…
我想很多童鞋用js动态向表格中添加数据很熟悉,而且也觉得非常简单!是的,对于写页面的童鞋来说,最喜欢写查询的页面了,动态向表格绑定数据.用for循环就可以轻松搞定. 如果我们的业务需求有所变化,可能我们要的数据就不是这样一条一条的中规中矩的.如果你还是新手,又没有人教你,在网上又搜不到方法,可以告诉你一个简便的方法,那就是让后台写服务的同事在后台把数据拼接好返回给你,当然了,这种无理的要求一般大部分会遭到拒绝的,那怎么办呢?动脑子了... 下面列举一下我经常遇到的一些表格格式: 1. 固定的表头…
最近做的后台管理系统要处理大量的表格 原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工作量顿时减轻不少,心情舒畅; 文字被强制换行了 由于个别表的列数较多;文字都挤在一起向下换行了;现场惨不忍睹;于是采用强制不换行的方式 <style> div{ white-space: nowrap;//强制不折行 } </style> 新的问题是强制换行之后整个宽度超出了body 于是考虑到把…
前言 最近在做vue移动端项目,需要做一个可以固定表头首列的表格,而且由于一些原因不能使用任何UI插件,网上找了很久也没什么好方法,所以在解决了问题之后,写下了这篇文章供后来人参考,文章有什么错漏的问题欢迎评论交流. 效果 思路 要实现固定首行首列 除了使用各种UI框架插件外,那就是自己用原生写啦 首先我们理一下思路 如何固定首行首列呢? 可能每个人有不同的想法 我这里当然介绍的是我自己的想法 那就是把首列表头和表格主内容分割开来,如下图 不过这样虽然固定了表头首列 但还是不能实现我们想要的效果…
在做数据表格的时候遇到了很多坑, 今天整理一下方便以后使用. 主要功能是使用数据表格, 做分页,做搜索,  还有checkbox,  支持全选. 当选中一些数据的时候, 数据切换页面数据在切换回来后,选中状态就消失了, 我们希望切换回来的时候, 选中状态还能存在, 因此做了个缓存, 使checkbox 保持选中状态.代码如下: 1.HTML  搜索输入框 <form class="layui-form"> <div class="layui-input-in…
吐槽 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头. 这个需求在js里用Juicer模板很好做的,思路我是有的,但就是对于vue,我也算初学者,很多概念不是很懂,这就限制了思路. 在网上搜了很多合并单元格的都是简单的数据合并,也就是td合并, 不是我们的需求,就不贴了. 哎,废话不多说了,看代码吧: 代码示例 使用iviewui的table组件: 最初,直接使用项目中的iv…