创建4个以上table,期望table可以上下左右滑动,发现easyui的datagrid可以轻松实现这个功能。
但是table加载过程中,总有某个table的frozencolumns不能完全显示,具体如下图:
前三列“序列”,“列名”,“列一” 为冻结列,使用Chrome,右键选择检查元素,发现“列一”列其实是有值的。与其它正常显示的表格对比,发现EasyUI自动生成的html代码中,class=“panel datagrid” DIV 最后一个style节点中,缺少frozencolumn的样式数据,导致在table比较多并且数据为空的情况下,frozencolumns显示不全。
解决办法:
1. 在整个解决方案中搜索<style type=\"text\css\" easyui=\"true\">,在jquery.easyui.min.js发现如下代码;
逆向查代码发现,jquery.easyui.min.js中调用add函数的语句如下:
在add style之后,又执行了dirty操作和clean操作,在clean操作中又调用了remove函数,如下图 remove函数是根据dirty函数中加入的cellSelectorPrefix进行删除操作的。所以,应该是dirty函数中加入的cellSelectorPrefix,导致程序多删了正确的style。
页面调试看到,只要class中包含".datagrid-cell-c1"的样式都会被删除,样式".datagrid-cell-c17-xxxx"的样式也被误删,这样就导致frozencolumns显示不全。
目前我暂时的解决办法是,在调用dirty函数的时候,将cellSelectorPrefix改成cellSelectorPrefix+“-”,这样就不会把样式".datagrid-cell-c17-xxxx"误删了。
在jquery.easyui.min.js中修改的代码如下,就能修复这个问题了。
发现版本jquery-easyui-1.6.1以及之前的版本都有这个问题。
如果大家有更好的解决办法,欢迎留言交流。