表格组件GridManager的固定列详解_tablegrid 列固定-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_17835/article/details/105229313

本文详细介绍了表格组件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'
    },
    // ... 其它配置项
});