LigerUI已经研究了一段时间,总体感觉还不错,基于jQuery开发,框架提供了丰富的UI组件,尤其LigerUI表格,功能还是挺强大的

在使用LigerUI可编辑表格的时候,发现一个小小的问题

当数据没有填充满表格的时候,展现效果没有什么问题

如果数据填充满表格,行数达到最大,表格左下角就会出现白色小方块遮罩层

发现问题之后,就在qq群里求助,结果没有找到答案……

后来自己又研究了一下,终于找到了问题的原因,问题解决后的效果如下:

虽然数据行已经占满了整个表格,但是左下角却没有出现白色小方块遮罩层

问题分析:

之前指定了LigerUI表格的height值,如果数据没有填充满表格,表格最后就会出现空白行,如果数据填充满表格,表格左下角就会出现白色小方块遮罩层;

而不指定LigerUI表格的height值的时候,如果数据没有填充满表格,表格最后不会出现空白行,并且表格高度自适应,如果数据填充满表格,表格左下角也不会出现白色小方块遮罩层。

==================================华丽的分割线==================================

别以为这样问题就彻底解决了,后来又发现一个新的问题

表格内一行数据也没有,顶端和底端挨在一起了,并不是程序出现了问题,是真的没有数据,不信,看看右下角的数据条数

理想的效果应该是这样的

虽然也没有数据,但是顶端和底端没有挨在一起,中间可以有空白区域

问题分析:

如果不指定LigerUI表格height的值,没有数据的时候,表格顶端和底端就会挨在一起(因为LigerUI表格默认的isScroll值为true,会自动适应高度),为了解决这个问题,又必须指定height的值,但是如果出现了白色小方块遮罩层的问题,又必须去掉height值。

这个问题真有些像先有鸡还是先有鸡蛋的问题……

如果在前台接收到数据之后,表格展现数据之前,能够根据接收到的数据条数是否为0动态设置isScroll的值,就能最终解决这个问题了。

LigerUI可编辑表格左下角出现白色小方块遮罩层问题解决办法的更多相关文章

  1. 微信小程序遮罩层覆盖input失效

    问题:微信小程序中,我们常使用遮罩层,如点击按钮弹出下拉框.弹框等等.若在遮罩层下存在input.textarea.canvas.camera.map.video等标签时,会出现遮罩层覆盖失效的问题. ...

  2. 解决VS报表.rdl 显示乱码“小方块”问题

    报表在编辑状态显示文本显示小方块 如图 原因:字体格式是英文状态下. 解决:选中文本框,选择文本框属性,选择字体,字体改成宋体或微软雅黑.就可以了.

  3. LigerUI编辑表格组件单元格校验问题

    这几天在使用LigerUI(版本为1.2.2)编辑表格组件的时候,遇到几个小问题,从官方demo和api中没有找到解决的办法 问题1.从数据库查询出来的主键单元格不可编辑问题 主键单元格已经保存之前编 ...

  4. ExtJS4.2学习(七)EditorGrid可编辑表格(转)

    鸣谢地址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-14/176.html ------------- ...

  5. 转:jQuery LigerUI 使用教程表格篇(3) 复选框、多表头、分组、汇总和明细

    阅读目录 复选框 多表头 分组 汇总 明细 复选框 grid可以设置复选框模式进行多选,只需要简单的配置 checked:true 获取选中行 如果要获取选中的行,可以用getSelecteds方法: ...

  6. jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、

    脚 本 之 家 www.jb51.net 脚本云 专题 素材下载 电子书 软件下载 源码下载 服务器常用软件 a5交易 首页 网页制作 脚本专栏 脚本下载 网络编程 数据库 CMS教程 电子书籍 平面 ...

  7. 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理

    编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...

  8. JS 可编辑表格的实现(进阶)

    1.前言 在普通的可编辑表格的基础上,改进可编辑表格.数据来自外部的json(模拟服务端),通过json数据生成可编辑表格.根据实际情况,表格没有新增数据功能.表格的可编辑列,计算的列,每列的数据大小 ...

  9. JS 可编辑表格的实现

    1.实现效果 用户点击语文,数学,英语部分的单元格,可以实现分数的编辑,总分也会随之变化.先看下效果,如图: 2.设计思路 先通过HTML5+CSS3绘制表格,添加input的样式和err提示动画. ...

随机推荐

  1. Linux--多网卡的7种Bond模式【转】

    转自:http://www.cnblogs.com/lcword/p/5914089.html 网卡bond是通过把多张网卡绑定为一个逻辑网卡,实现本地网卡的冗余,带宽扩容和负载均衡.在应用部署中是一 ...

  2. Eclipse报This version of the rendering library is more recent than your version of ADT ...

    http://blog.csdn.net/zhao_3546/article/details/12968295 最近使用 Help --> Check for Updates 升级了Eclips ...

  3. plsql连接远程oracle和like无法查询中文问题

    https://blog.csdn.net/yangguangzhidi/article/details/53301979 ************************************** ...

  4. 实现基于最近邻内插和双线性内插的图像缩放C++实现

    平时我们写图像处理的代码时,如果需要缩放图片,我们都是直接调用图像库的resize函数来完成图像的缩放.作为一个机器视觉或者图像处理算法的工作者,图像缩放代码的实现应该是必须掌握的.在众多图像缩放算法 ...

  5. Python3将两个有序数组合并为一个有序数组

    [本文出自天外归云的博客园] 第一种思路,把两个数组合为一个数组然后再排序,问题又回归到冒泡和快排了,没有用到两个数组的有序性.(不好) 第二种思路,循环比较两个有序数组头位元素的大小,并把头元素放到 ...

  6. 第6章 RTX 操作系统源码方式移植

    以下内容转载自安富莱电子: http://forum.armfly.com/forum.php 本章教程为大家将介绍 RTX 操作系统源码方式移植,移植工作比较简单,只需要用户添加需要的源码文件即可, ...

  7. C#学习笔记(28)——匿名委托和Lambda表达式

    说明(2017-11-21 18:51:32): 1. 例子为求1~100的和,答案应该是5050(小学学算盘的时候,我爹就让我算,从1拨到100是多少呀?当时的我年幼无知,还不知道高斯小时候的故事, ...

  8. kafka 面试题 无答案

    kafka节点之间如何复制备份的? kafka消息是否会丢失?为什么? kafka最合理的配置是什么? kafka的leader选举机制是什么? kafka对硬件的配置有什么要求? kafka的消息保 ...

  9. Deepin Linux已经做得相当不错了

    很庆幸,用了MacBook Pro三四年后,还会想要用Linux做桌面,一方面说明自己还是年轻的,保持着愿意折腾的心态:另一方面,也确实发现macOS的桌面环境并不如传说中的稳定和好用. Deepin ...

  10. linux异步IO--aio

    简述 linux下异步方式有两种:异步通知和异步IO(AIO),异步通知请参考:linux异步通知 Linux的I/O机制经历了一下几个阶段的演进: 1. 同步阻塞I/O: 用户进程进行I/O操作,一 ...