easyui datagrid 列宽设置百分比,自适应

easyui 同时被 3 个专栏收录
3 篇文章 0 订阅
3 篇文章 0 订阅
11 篇文章 0 订阅

刚开始写的时候,UI给的图是照easyui设计的,此前我也没用过这个框架,用起来不太顺手也就没仔细研究,没想到断断续续被折磨了半年。

首先改样式就改到头晕眼花,后来要加分页分页看这里,天真的以为是后端分页,没想到是前端分,过了很久才明白为什么每次数据全是一页显示完。

今天给列宽设置百分比又折腾了几个小时。

吐槽完毕,下面正文


html:(外层的div是tab的一个panel)

<div title="t1" class="datagridContainer">
    <table id="id" class='easyui-datagrid myClass'></table>
</div>

首先datagrid整个宽度是可以直接设置百分比的:

$('#id').datagrid({width: '100%'})

列宽就麻烦点,首先找到一个可以作为参考的元素,然后根据整个元素的宽度计算列宽。

我这里因为有布局所以麻烦了点,有直接参照的更方便:

  • 注意有的元素可能获取不到宽度或者获取数据有误,所以尽量找加载好的元素

初始化:

// 列宽用函数
$('#materialTable').datagrid({
    columns: [
        [{
            field: 'f1',
            title: '材料名称',
            width: getWidth(0.8),
            align: 'center',
        }, {
            field: 'f2',
            title: '电子份数',
            width: getWidth(0.06),
            align: 'center'
        }, {
            field: 'f3',
            title: '纸质份数',
            width: getWidth(0.06),
            align: 'center'
        }]
    ]
});

getWidth(percent) {
    // 初始化的时候就生成网格,此时很多元素还没加载好,用最外层节点宽度(+滚动条宽)(-padding-left和padding-right)(-序号列宽)
    // 得到的宽度是最终的百分比参考,有直接参照物就直接获取宽度就行了,*传入的百分比得到对应列宽
    return ($($('#app')[0]).width() + 17 - 66 - 94) * percent;
},

浏览器大小改变之后列宽不会自动变,所以调用一次。

window.onresize:

$(window).resize(function () {
    $('#materialTable').datagrid({
        columns: [
            [{
                field: 'f1',
                title: '材料名称',
                width: getWidth(0.8),
                align: 'center',
            }, {
                field: 'f2',
                title: '电子份数',
                width: getWidth(0.06),
                align: 'center'
            }, {
                field: 'f3',
                title: '纸质份数',
                width: getWidth(0.06),
                align: 'center'
            }]
        ]
    });
});

btw,我是tab panel里直接放的table,如果外面套个div可以设置fit:true属性填满div。(附:分页

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值