最近在使用EasyUI DataGrid来做前端的报表开发,遇到了这个报错:

  1. Uncaught TypeError: Cannot read property 'width' of null

在网上查找解决方案,基本上都告诉你检查各种属性名是否有拼写的错误,一般都是这个原因导致的。我自己也做了检查,并没有发现什么问题,以下是我的代码:

  1. columns: [
  2. [
  3. { align: 'center', colspan: "4", title: "支付宝" },
  4. { align: 'center', colspan: "4", title: "微信-APP" },
  5. { align: 'center', colspan: "4", title: "微信-公众号" },
  6. { align: 'center', colspan: "4", title: "建行" },
  7. { align: 'center', colspan: "4", title: "银联" },
  8. { field: 'incomeCount_total', align: 'center', rowspan: 2, title: "合计收入笔数" },
  9. { field: 'income_total', align: 'center', rowspan: 2, title: "合计收入金额" },
  10. { field: 'payCount_total', align: 'center', rowspan: 2, title: "合计支出笔数" },
  11. { field: 'pay_total', align: 'center', rowspan: 2, title: "合计支出金额" }
  12. ]
  13. ]

查找了很多的解决办法,依然没找出问题所在,后面自己想着有没有可能是colspan的值不应该是字符串类型,因为想到报的是width的问题,然后自己就尝试将"4"修改为4,果然没报错了。这真的很让人无语,因为自己用过的table插件里面,LayUI以及JqGrid等,都没有强制要求这些方面,同时这个报错并未指向具体的原因,所以会让很多人摸不着头脑,我自己也是比较幸运,才能找到问题的所在。   不过,这还没完,因为我有冻结列,所以要添加冻结列的配置,然后我有复杂表头,因此有rowspan,以下是一个局部的配置代码:

  1. frozenColumns: [[
  2. { field: 'reason', align: 'center', "rowspan": 2, title: "业务类型" }
  3. ]],
  4. columns: [
  5. [
  6. { align: 'center', colspan: 4, title: "支付宝" },
  7. { align: 'center', colspan: 4, title: "微信-APP" },
  8. { align: 'center', colspan: 4, title: "微信-公众号" },
  9. { align: 'center', colspan: 4, title: "建行" },
  10. { align: 'center', colspan: 4, title: "银联" },
  11. { field: 'incomeCount_total', align: 'center', rowspan: 2, title: "合计收入笔数" },
  12. { field: 'income_total', align: 'center', rowspan: 2, title: "合计收入金额" },
  13. { field: 'payCount_total', align: 'center', rowspan: 2, title: "合计支出笔数" },
  14. { field: 'pay_total', align: 'center', rowspan: 2, title: "合计支出金额" }
  15. ]
  16. ]

我吸取教训,冻结列的rowspan给到了整数类型,但是依然还是报了错误:

  1. Uncaught TypeError: Cannot set property '0' of undefined

这个真让我觉得奇怪了,另外一个错误,然后还没能在网上找到解决办法。但是心想肯定还是rowspan那个地方有问题,就慢慢的尝试修改它的值类型,都无果,后面索性干掉rowspan算了,因为反正也解决不了,然后复杂表头那个地方就将就着吧,谁能想到,去掉rowspan后,没报错,然后也正常的合并了2格,这是真的神奇。 由此可见,EasyUI的冻结列不需要配置合并单元格的情况,框架自己会处理。同时不仅要吐槽一下这个插件,界面不仅古老,插件的错误处理也很不科学。

EasyUI:Cannot read property 'width' of null的更多相关文章

  1. jquery easyui datagrid 空白条处理 自适应宽高 格式化函数formmater 初始化时会报错 cannot read property 'width'||'length' of null|undefined

    1---表格定义好之后右侧可能会有一个空白条 这个空白条是留给滚动条的,当表格中的一页的数据在页面中不能全显示时会自动出现滚动条,网上有很多事要改源码才可以修改这个,但是当项目中多处用到时,有的需要滚 ...

  2. 百度ueditor 实例化 Cannot set property 'innerHTML' of null 完美解决方案

    此时此刻,我正在用博客园推荐的TinyMCE编辑器写这个博客,突然想起最近在项目中使用百度ueditor编辑器中的一些经历.所以记录在此,与大家分享. 不得不说,百度ueditor是一款很好的在线编辑 ...

  3. Extjs4---Cannot read property 'addCls' of null

    用MVC做后台管理系统时遇到的问题,关于tab关闭后再打开不显示,或者报错 我在新的tabpanel中加入了一个grid,当我关闭再次打开就会报错Cannot read property 'addCl ...

  4. extjs Cannot read property 'dom' of null

    如果你的EXTJS报错: Cannot read property 'dom' of null,那就有可能是因为你的HTML或者JSP文件中的BODY标签里面少了个东西比如代码是: <html& ...

  5. Extjs4---Cannot read property 'addCls' of null - heirenheiren的专栏 - 博客频道 - CSDN.NET

    body { font-family: 微软雅黑,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMingLi ...

  6. vue-cli +echarts-amap集成echarts和高德地图TypeError: Cannot read property 'dataToPoint' of null解决方案

    由于项目的需求,需要做一种迁徙效果, 最后我们采用了组件化开发,可以说这个坑自己一个人踩,有点累,但也收获不少. vue-cli +echarts-amap集成echarts和高德地图,出现报错,错误 ...

  7. Extjs4---Cannot read property 'addCls' of null 或者 el is null 关于tab关闭后再打开不显示或者报错

    做后台管理系统时遇到的问题,关于tab关闭后再打开不显示,或者报错 我在新的tabpanel中加入了一个grid,当我关闭再次打开就会报错Cannot read property 'addCls' o ...

  8. Cannot read property 'nodeType' of null; audio元素默认样式下载按钮

    1.chrome-->console抛出如下错误: Uncaught TypeError: Cannot read property 'nodeType' of null 错误原因:从stack ...

  9. Uncaught TypeError: Cannot set property 'onclick' of null解决办法

    如果把js内容直接放在这个head标签以内,button按钮不能正常点击更换body的背景颜色,报错提示:demo6.html:16 Uncaught TypeError: Cannot set pr ...

随机推荐

  1. ofbiz idea 启动

    1.下载gradle并安装到本地 2.idea引入gradle 3.gradle右键选择refresh,项目会重新编译并加载gradle的task 4.可以再编译一下 5.没问题的话打开,jar ap ...

  2. 模拟.net post请求属性

    这两天在做一个nodejs的爬虫项目,需要模拟post请求获得网站数据.遇到2个asp.net的网站,掉到坑里面,调试了好几天.总结一下过程. 一般我们模拟post请求的时候最重要的就是post请求里 ...

  3. 《图解HTTP》阅读总结

    前言:<图解HTTP>是一本图文并茂的好书,讲解地很详尽.目前我只完整地读了一遍,很多地方知其然不知其所以然,接下来打算抽空再读一次.这篇博文只是做个粗略记录,第二遍读完会再来编辑细化. ...

  4. Linux性能优化从入门到实战:14 文件系统篇:Linux 文件系统基础

      磁盘为系统提供了最基本的持久化存储.   文件系统则在磁盘的基础上,提供了一个用来管理文件的树状结构. 文件系统:索引节点和目录项   文件系统是对存储设备上的文件,进行组织管理的机制.组织方式不 ...

  5. Kubernetes部署DNS

    前言 阅读地址 http://thoreauz.com/2017/04/16/docker/Kubernetes%E9%83%A8%E7%BD%B2DNS%E5%92%8CDashboard/ Kub ...

  6. 学习旧岛小程序 (5) observer 函数中修改属性的值

    不要在一个属性的 observer  函数中修改属性的值 不然会造成内存泄露 错误代码: properties: { /* 期刊号 */ index: { type: String, observer ...

  7. JDBC连接Hive数据库

    一.依赖 pom <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncodi ...

  8. mysql导出数据到csv文件

    在日常工作中经常会遇见导出表中的数据到csv文件的操作,这里就简单总结一下导出的操作. 下面对csv文件的描述是摘录: 据RFC4180文档设置的,该文档全称Common Format and MIM ...

  9. 对Promise的研究2

    3.Promise.prototype.then() Promise 实例具有then方法,也就是说,then方法是定义在原型对象Promise.prototype上的.它的作用是为 Promise ...

  10. c#类的定义,c#中的关健字,C#标识符

    什么是类:一种数数据结构,存储数据成员,方法成员,和其它的内容,便 于方便 谳用C#语法: class 类名{ //TODO} C#中关键字(小写)不能作为方法名,类名,命名空间名等, static ...