表格组件GridManager的固定列详解

本文详细介绍了表格组件GridManager如何实现固定列功能。使用者可以通过配置列属性实现固定列,支持设置为向左或向右固定。此外,对于组件自动添加的选择列和序号列,也可通过初始化参数配置固定属性。文章还提到了在不同框架中的使用方法,并给出了相关版本信息。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

从2019年初时,就想添加固定列功能。但由于是源生编码而又需要支持框架的引用,调试来调试去,空留下一个fixed分支。

受今年疫情的影响,周未有了大把的时间。于是把去年未完成的固定列功能进行了实现。

如何使用

由使用者配置的列

配置起来相当简单,不需要单独去维护一个列,只需要在配置项中的columnData中增加fixed属性即可实现。

fixed属性的默认值为undefined,共接收两个值: 'left', 'right':

  • left: 向左固定
  • right: 向右固定

需要注意的事项: 虽然你可以把靠最左的列设置为’right’,但这样是很诡异的,非常不建议你这样使用。

以下是一个示例,如你所见,并不需要你做太多的事情:

<table id='table-demo-fixedCode'></table>
document.querySelector('#table-demo-fixedCode').GM({
    gridManagerName: 'demo-fixedCode',
    ajaxData: 'https://www.lovejavascript.com/learnLinkManager/getLearnLinkList',
    ajaxType: 'POST',
    supportAjaxPage: true,
    supportAdjust: false,
    supportDrag: false,
    columnData: [
        {
            key: 'name',
            text: '名称',
            width: '200px'
        },{
            key: 'info',
            text: '说明',
            width: '500px'
        },{
            key: 'url',
            text: 'url',
            width: '500px'
        },{
            key: 'action',
            text: '操作',
            width: '100px',
            fixed: 'right',
            template: (action, row) => {
                return '<a href="' + row.url + '" target="_blank">查 看</a>';
            }
        }
    ]
});
由组件自动添加的列

GridManager提供了选择列、序号列的功能,这些列该如何配置固定列属性?

组件在初化时的参数中,为选择列和序号列提供了配置参数,对应关系:

  • 选择列: checkboxConfig
  • 序号: autoOrderConfig

我们只需要初始化时配置这两个参数,指定fixed属性即可以实现固定列效果。

document.querySelector('#table-demo-fixedCode').GM({
    checkboxConfig: {
        fixed: 'left'
    },
    autoOrderConfig: {
        fixed: 'left'
    },
    // ... 其它配置项
});

效果展示: fixed-demo

关于框架

以上demo为原生JS编码方式,各框架中的使用与原生相同。

在框架中使用时,需要安装所对应的框架版本:

  • GridManager@2.11.0
  • gridmanager-angular-1.x@1.4.0
  • gridmanager-vue@1.4.0
  • gridmanager-react@0.4.0

如果对你有帮助,那么请到github点个star吧。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值