环境
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，只是我现在记不住了…
有时间再更