jquery EasyUI datagrid:一次生成4个以上table时,frozencolumns显示不全问题修复

创建4个以上table,期望table可以上下左右滑动,发现easyui的datagrid可以轻松实现这个功能。但是table加载过程中,总有某个table的frozencolumns不能完全显示,具体如下图:

jquery EasyUI datagrid:一次生成4个以上table时,frozencolumns显示不全问题修复

截图中前三列代码,名称,单位为冻结列,使用Chrome,右键选择检查元素,发现单位列其实是有值的。与其它正常显示的表格对比,发现EasyUI自动生成的html代码中,class=“panel datagrid” DIV 最后一个style节点中,缺少frozencolumn的样式数据,导致在table比较多并且数据为空的情况下,frozencolumns显示不全。

jquery EasyUI datagrid:一次生成4个以上table时,frozencolumns显示不全问题修复

解决办法:

1. 在整个解决方案中搜索<style type=\"text\css\" easyui=\"true\">,在jquery.easyui.min.js发现如下代码;

jquery EasyUI datagrid:一次生成4个以上table时,frozencolumns显示不全问题修复

逆向查代码发现,jquery.easyui.min.js中调用add函数的语句如下:

jquery EasyUI datagrid:一次生成4个以上table时,frozencolumns显示不全问题修复

***********************************************************************

jquery EasyUI datagrid:一次生成4个以上table时,frozencolumns显示不全问题修复

在add style之后,又执行了dirty操作和clean操作,在clean操作中又调用了remove函数,如下图 remove函数是根据dirty函数中加入的cellSelectorPrefix进行删除操作的。所以,应该是dirty函数中加入的cellSelectorPrefix,导致程序多删了正确的style。

jquery EasyUI datagrid:一次生成4个以上table时,frozencolumns显示不全问题修复

页面调试看到,只要class中包含".datagrid-cell-c1"的样式都会被删除,样式".datagrid-cell-c17-xxxx"的样式也被误删,这样就导致frozencolumns显示不全。

jquery EasyUI datagrid:一次生成4个以上table时,frozencolumns显示不全问题修复

目前我暂时的解决办法是,在调用dirty函数的时候,将cellSelectorPrefix改成cellSelectorPrefix+“-”,这样就不会把样式".datagrid-cell-c17-xxxx"误删了。

在jquery.easyui.min.js中修改的代码如下,就能修复这个问题了。

jquery EasyUI datagrid:一次生成4个以上table时,frozencolumns显示不全问题修复

发现版本jquery-easyui-1.6.1以及之前的版本都有这个问题。