表格组件GridManager的固定列详解

从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吧。