环境
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中提供的方法还能不能获取别的什么参数,我只能获取到这两个。不过这两个参数基本够用了。
这不是什么正统的方法,先凑合着用吧。
当外部容器初始为隐藏时,表格无法正常加载
文档结构大概是这样的
<div id="outer" style="display: none;">
<table id="dg"></table>
</div>
outer初始为隐藏,当加载table之后,将outer设置为显示,table也出不来,而是一片空白。
解决方法
找到答案的帖子: 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}
最终就会有很诡异的显示效果,大概是这样的
就是本该隐藏的列显示了出来,但是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
<!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_sub").datagrid({
data: json_1.rows,
columns: colConfig1
});
});
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"};
</script>
</head>
<body>
<table id="dg_sub"></table>
</body>
</html>
简单解释一下,Test02_easyui.html先加载了一个最简单的表格,随后ajax引入了Test02_easyui_sub.html页面,同时有一个button用来刷新表格。Test02_easyui_sub.html页面只加载了一个简单表格。
打开Test02_easyui.html页面,会是这样的
当点击click之后
会发现上一次加载的数据没有被清除。
解决方法
经过尝试之后,我发现原因就在于子页面中也加载了js,把子页面上面的js(主要是easyui相关的js)删除之后就没问题了。这个问题看似是解决了,但是如果你正在做页面整合的话,你将会面临其他更烦人的东西…
还有一种方法,就是不用ajax,而是用iframe去加载子页面。我在本地的小项目里用iframe是好使的,但是生产环境下不好用。生产环境功能有点复杂,我花了点时间没能在本地重现原来的bug,再加上iframe本身也不是什么好方法,就放弃对于iframe方法的研究了。
其实,这个bug出现的同时,还会附带一些别的诡异的bug,只是我现在记不住了…
有时间再更