005–Easyui的datagrid实现宽度自适应

WEB前端 waitig 570℃ 百度已收录 0评论

最近因为datagrid的宽度问题,结果被提BUG了,郁闷·····
产生问题的背景:
其实就是在页面显示的某一列的字数比较长或者特别长的时候,页面无法一次性显示完毕所有的字,所以特地看了一下自适应宽度,有3个就显示3个字宽度,有7个就显示7个字的宽度···比较灵活!
废话不多说,直接码代码:

//easyui的datagrid宽度自适应扩展方法
    $.fn.extend({
         resizeDataGrid : function(heightMargin, widthMargin, minHeight, minWidth) {
          var height = $(document.body).height() - heightMargin;
          var width = $(document.body).width() - widthMargin;

          height = height < minHeight ? minHeight : height;
          width = width < minWidth ? minWidth : width;

          $('#wiserecordloandg').datagrid('resize', {
           height : height,
           width : width
            });
           }
        });

        $(function() {
         // datagrid数据表格ID
         var datagridId = 'wiserecordloandg';

         // 第一次加载时自动变化大小
         $('#' + datagridId).resizeDataGrid(0, 0, 0, 0);

         // 当窗口大小发生变化时,调整DataGrid的大小
         $(window).resize(function() {
          $('#' + datagridId).resizeDataGrid(0, 0, 0, 0);
         });
        });

注意事项:
1)代码直接粘贴,就可用,需要修改的是:table的id:wiserecordloandg,改成你自己的id就可以了;
2)假如以上的代码之后,你想要自适应的列,都不需要再手动的设置width和height;否则,自适应无效;
效果图一:
这里写图片描述
效果图二:
这里写图片描述


此刻,完成宽度自适应的优化;


本文由【waitig】发表在等英博客
本文固定链接:005–Easyui的datagrid实现宽度自适应
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)