表格组件GridManager的固定列详解

angular,vue,react,原生表格

拭目以待 发布于

> 从2019年初时,就想添加固定列功能。但由于是源生编码而又需要支持框架的引用,调试来调试去,空留下一个fixed分支。 受今年疫情的影响,周未有了大把的时间。于是把去年未完成的固定列功能进行了实现。 ### 如何使用 #### 由使用者配置的列 配置起来相当简单,不需要单独去维护一个列,只需要在配置项中的`columnData`中增加`fixed`属性即可实现。 `fixed`属性的默认值为`undefined`,共接收两个值: `'left'`, `'right'`: - left: 向左固定 - right: 向右固定 需要注意的事项: 虽然你可以把靠最左的列设置为'right',但这样是很诡异的,非常不建议你这样使用。 以下是一个示例,如你所见,并不需要你做太多的事情: ```html

``` ```javascript 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 '查 看'; } } ] }); ``` #### 由组件自动添加的列 > GridManager提供了选择列、序号列的功能,这些列该如何配置固定列属性? 组件在初化时的参数中,为选择列和序号列提供了配置参数,对应关系: - 选择列: checkboxConfig - 序号: autoOrderConfig 我们只需要初始化时配置这两个参数,指定fixed属性即可以实现固定列效果。 ```javascript document.querySelector('#table-demo-fixedCode').GM({ checkboxConfig: { fixed: 'left' }, autoOrderConfig: { fixed: 'left' }, // ... 其它配置项 }); ``` 效果展示: [fixed-demo](Phttp://gridmanager.lovejavascript.com/demo/index.html#demo-fixedCode) ### 关于框架 以上demo为原生JS编码方式,各框架中的使用与原生相同。 在框架中使用时,需要安装所对应的框架版本: - GridManager@2.11.0 - gridmanager-angular-1.x@1.4.0 - gridmanager-vue@1.4.0 - gridmanager-react@0.4.0 如果对你有帮助,那么请到[github](https://github.com/baukh789/GridManager)点个star吧。