ligerUI grid自动换行？

最新推荐文章于 2023-12-21 18:24:02 发布

原创最新推荐文章于 2023-12-21 18:24:02 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

LigerUI 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种通过CSS实现表格中两个grid元素精确对齐的方法。通过对表格行的高度进行统一设置，确保了即使在列宽发生变化的情况下也能保持良好的视觉一致性。

从css下手，然后把组成grid的2个table的tr高度统一，这样就能对齐了:

//grid的这个事件，一般来说对表格的二次加工，都是在这个事件里去处理
                onAfterShowData:function()
                {                                
                    $(".l-grid-row-cell-inner").css("height","auto"); //单元格高度自动化，撑开
                    var i=0;
                    $("tr",".l-grid2","#maingrid").each(function ()
                    {                                            
                        $($("tr",".l-grid1","#maingrid")[i]).css("height",$(this).height()); //2个表格的tr高度一致
                        i++;                        
                    });                                            
                },

拖动列首改变宽度时也要加入对齐代码，举一反三:

                onAfterChangeColumnWidth:function()
                {
                    $(".l-grid-row-cell-inner").css("height","auto");
                    var i=0;
                    $("tr",".l-grid2","#maingrid").each(function ()
                    {                                            
                        $($("tr",".l-grid1","#maingrid")[i]).css("height",$(this).height());
                        i++;                        
                    });                
                }