easyui表格中各种bug及解决方法

比眉伴天荒 2021-09-28 05:26 385阅读 0赞

### 环境 ###

jquery-easyui-1.7.0、jquery-2.1.0.js  
浏览器有时候用的谷歌，有时候用的360，记不清了。

### 分页参数获取问题 ###

我在js中用了这样的一个方法设置分页

$('#pp').pagination({ 
    				pagination: true,
        			pageSize: 3,
        			total:10,
        			pageList: [1, 2, 3, 4, 5],
    				onSelectPage:function(pageNumber, pageSize){ 
    					$(this).pagination('loading');
    					console.log('pageNumber:'+pageNumber+',pageSize:'+pageSize);
    					$(this).pagination('loaded');
    				}
    			});

并在其他地方这样获取参数

jQuery("#pp").datagrid('getPager').options

然后js就报错了

jquery.easyui.min.js:11876 Uncaught TypeError: Cannot read property 'panel' of undefined
        at Object.getPager (jquery.easyui.min.js:11876)
        at jQuery.fn.init.$.fn.datagrid (jquery.easyui.min.js:11726)
        at testClick (Test01.html?__hbt=1550673012584:69)
        at HTMLInputElement.onclick (Test01.html?__hbt=1550673012584:74)

#### 解决方法 ####

完全不明所以的报错，我根本没打算去找正常的解决方法，而是通过查看网页源代码，确定了它的文档结构后，直接用jquery获取的我想要的参数。

`注意：代码中outer为用于初始化插件的外部容器的id`

function testClick(){ 
    			console.log(jQuery("#outer").find("[class='pagination-page-list']").val());
    			console.log(jQuery("#outer").find("input[class='pagination-num']").val());------
    			
    			//console.log(jQuery("#pp").datagrid('getPager').options); 
    		}

依然存在的问题：我不知道api中提供的方法还能不能获取别的什么参数，我只能获取到这两个。不过这两个参数基本够用了。

这不是什么正统的方法，先凑合着用吧。

### 当外部容器初始为隐藏时，表格无法正常加载 ###

文档结构大概是这样的

outer初始为隐藏，当加载table之后，将outer设置为显示，table也出不来，而是一片空白。

#### 解决方法 ####

[找到答案的帖子： https://bbs.csdn.net/topics/390666562][https_bbs.csdn.net_topics_390666562]  
在将outer设置为显示后，调用resize方法

jQuery("#outer").show();
    jQuery("#dg").datagrid("resize");

原因分析（胡扯）：easyui没有正确获取隐藏元素的长宽，导致数据没有显示出来。

这可以说算是用原生方法解决了问题，但是这却是个更糟糕的方法，因为，为了添加这一行代码，你可能要破坏整个页面的运行逻辑（比如table在一个隐藏的frame中加载时，可能需要添加比较复杂的js代码，甚至可能有跨域的问题。我在这次的解决方法是在显示这个frame页面后重新加载一遍）。因此，我个人依然认为这是一个没有解决的bug。

### 列隐藏失效 ###

这是一个在绝大多数情况下（99.9%）都不会出现的bug，然而我又tm中奖了  
当我们想隐藏一个列时，需要这么写

{ field:'val',hidden:true,title:'val desc',width:100}

如果再加一个同样field的显示的列

{ field:'val',hidden:true,title:'val desc',width:100},
    { field:'val',title:'val desc',width:100}

最终就会有很诡异的显示效果，大概是这样的  
![在这里插入图片描述][20190226112359803.png]  
就是本该隐藏的列显示了出来，但是thead却依然隐藏。

解决方法很简单，别写两个一样的field，一个隐藏，一个不隐藏就行了。

### 加载的子页面同样带有表格时有bug ###

在同一目录下创建Test02\_easyui.html，Test02\_easyui\_sub.html两个文件

##### Test02\_easyui.html #####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<script src="../../../js/jquery/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    		<script src="../../../js/jquery-easyui-1.7.0/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
    		<link rel="stylesheet" type="text/css" href="../../../js/jquery-easyui-1.7.0/themes/default/easyui.css"/>
    		<script src="../../../js/jquery-easyui-1.7.0/locale/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
    		<title></title>
    	<script type="text/javascript"> jQuery(function(){ jQuery("#dg").datagrid({ data: json_1.rows, columns: colConfig1, pagination: true }); jQuery.ajax({ type: "get", url : "Test02_easyui_sub.html", data: { }, dataType: "text", success: function(result){ jQuery("#subHtml").html(result); } }); }); function mainClick(){ jQuery("#dg").datagrid({ data: json_2.rows, columns: colConfig1, pagination: true }); } var colConfig1 = [[ { field:'id',title:'id desc',width:100}, { field:'val',title:'val desc',width:100}, { field:'val2',title:'val2 desc',width:100} ]]; var json_1 = { "rows":[ { "id":"i1","val":"11","val2":"2"}, { "id":"i2","val":"11","val2":"12"}, { "id":"i3","val":"21","val2":"22"}], "total":"3", "pagiNum":"1"}; var json_2 = { "rows":[ { "id":"i1","val":"aaa","val2":"2"}, { "id":"i2","val":"bbb","val2":"12"}], "total":"3", "pagiNum":"1"}; </script>
    	</head>
    	<body>
    	<input type="button" value="click" onclick="mainClick();">
    		<div>
    			<table id="dg"></table>
    		</div>
    		<div id="subHtml"></div>
    	</body>
    
    </html>

##### Test02\_easyui\_sub.html #####

简单解释一下，Test02\_easyui.html先加载了一个最简单的表格，随后ajax引入了Test02\_easyui\_sub.html页面，同时有一个button用来刷新表格。Test02\_easyui\_sub.html页面只加载了一个简单表格。  
打开Test02\_easyui.html页面，会是这样的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70]

当点击click之后  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 1]  
会发现上一次加载的数据没有被清除。

### 解决方法 ###

经过尝试之后，我发现原因就在于子页面中也加载了js，把子页面上面的js（主要是easyui相关的js）删除之后就没问题了。这个问题看似是解决了，但是如果你正在做页面整合的话，你将会面临其他更烦人的东西…  
还有一种方法，就是不用ajax，而是用iframe去加载子页面。我在本地的小项目里用iframe是好使的，但是生产环境下不好用。生产环境功能有点复杂，我花了点时间没能在本地重现原来的bug，再加上iframe本身也不是什么好方法，就放弃对于iframe方法的研究了。

其实，这个bug出现的同时，还会附带一些别的诡异的bug，只是我现在记不住了…

### ie中数据加载不出来 ###

使用easyui版本为1.3.4或1.7均出现问题  
在ie中，这种代码可能会导致数据无法显示

外层div的高度必须为固定的长度，比如

有时间再更

[https_bbs.csdn.net_topics_390666562]: https://bbs.csdn.net/topics/390666562
[20190226112359803.png]: /images/20210923/fd1f2546d5654a1c90df5b6d95bf31e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70]: /images/20210923/b4602ebf1154442bacaba18ff4fea894.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 1]: /images/20210923/c8cabcfc6e344c6f907fcf742100de4f.png