欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

easyui datagrid Uncaught TypeError: Cannot read property ‘width‘ of null

程序员文章站 2022-06-07 13:13:08
...

easyui datagrid Uncaught TypeError: Cannot read property ‘width’ of null

        很多人在开发过程中会遇到这个问题，特别是在做一些老项目的时候，就可能会遇到这样的问题

1.开发环境

easyui、jquery

2.场景

        这也是我所遇到或者知道的情景，一共有两种情况会出现这样的错误。
第一种就是很多文章都会提到的 datagrid 的 columns 参数必须是一个二维数组。这种情况就不用多说了，直接看代码吧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="jquery.min.js"></script>
    <script src="jquery.easyui.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div>
        <table id="dg" style="width: 100%;"></table>
    </div>

    <script>
        $('#dg').datagrid({
            columns:[
                {field:'code',title:'Code',width:100},
                {field:'name',title:'Name',width:100},
                {field:'price',title:'Price',width:100,align:'right'}
            ]
            //代码中因为columns参数不是二维数组，就会出现标题中的错误
        });
    </script>
</body>
</html>

        那么第二种情况，就是我遇到的一个更坑的情况了，因为一直都没有找到文章有说明的，后来解决了，所以记录在这里，希望可以帮助到遇到同样问题的小伙伴。这种情况就是：表格表头能显示出来，但是数据无法展示出来，因为Cannot read property ‘width’ of null了
        那么是为什么呢，原因可能是：表头合并不匹配
        对，就是表头合并列数不匹配，当时因为是后台生成的动态表头，而且表头特别大，多达6行的表头，列数高达200多列，表头合并自然简单不了。我们来看下代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/easyui.css">
	<link rel="stylesheet" type="text/css" href="css/icon.css">
	<link rel="stylesheet" type="text/css" href="css/demo.css">
    <script src="jquery.min.js"></script>
    <script src="jquery.easyui.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div>
        <table  id="dg" style="width: 600px;"></table>
    </div>
    <script>
        $('#dg').datagrid({
            columns:[
                [{field:'goodsName',title:'商品名称',width:100 , align:'center',rowspan:2},
                {field:'appraisal',title:'用户评价',width:400,colspan:4,align:'center'}],
            
                [{field:'verySatisfy',title:'非常满意',width:100,align:'center'},
                {field:'verySatisfy',title:'满意',width:100,align:'center'},
                {field:'just',title:'一般',width:100,align:'center'}]
            
            /*
                [{field:'verySatisfy',title:'非常满意',width:100,align:'center'},
                {field:'verySatisfy',title:'满意',width:100,align:'center'},
                {field:'just',title:'一般',width:100,align:'center'},
                {field:'unsatisfy',title:'不满意',width:100,align:'center'}]
            */

        ]
        });
    </script>
</body>
</html>

         上面那段代码中可以看到是一个统计的表格，用户评价是一个合并的表头，一共合并4列，但是下一行里面只返回了3列，这就导致了这个问题。而且我当时很苦恼的就是表头是可以显示出来的，数据却加载不出来。但是用下面注释掉的4列，问题就迎刃而解了。
         至于表头行数不一致，我想这种情况遇到的小伙伴相对少很多了。

相关标签： 坑货大本营 菜鸟笔记 jquery 前端

上一篇： Cannot read property ‘getAttribute‘ of null“ vue导入echarts报错

下一篇： Cannot read property 'toFixed' of null

推荐阅读