ng-table列控制完全指南：动态显示/隐藏列与拖拽重排列

ng-table列控制完全指南动态显示/隐藏列与拖拽重排列【免费下载链接】ng-tableSimple table with sorting and filtering on AngularJS项目地址: https://gitcode.com/gh_mirrors/ng/ng-tableng-table 是一款专为 AngularJS 打造的表格指令内置排序、过滤、分页等能力。本指南聚焦它的列控制能力——动态显示/隐藏列与拖拽重排列帮你让用户自由定制表格视图轻松应对表格列太多、想自选列的真实业务场景。 为什么需要控制表格列后台管理系统的数据表格往往有十几列但不同用户关心的字段完全不同列太多屏幕放不下横向滚动体验差列顺序不合理业务人员更希望常用字段排在前面个性化需求有的用户只看汇总列有的要看全部明细ng-table 通过一个简单的show属性和列数组顺序就能优雅地解决这两个问题。 先认识 ng-table 的两种表格写法在动手控制列之前先了解列的来源。ng-table 提供两种等价但写法不同的表格声明式表格ng-table直接在 HTML 中用th标签逐列声明列是静态写在模板里的。示例见 declarative-table.component.ts 和 declarative-table.html。动态表格ng-table-dynamic把列定义成一个数组通过columns属性传入列完全由 JavaScript 数据驱动。核心示例在 dynamic-table.component.tscolumns [ { field: name, title: Name, show: true, filter: { name: text }, sortable: name }, { field: age, title: Age, show: true, filter: { age: number }, sortable: age }, { field: money, title: Money, show: true, filter: { money: number }, sortable: money } ];每个列对象里的show属性就是列显隐的开关其内部实现getter/setter保证双向绑定定义在 ngTableColumn.tsshow: this.createGetterSetter(true) 声明式表格的动态性较弱想做到灵活显隐和重排推荐使用动态表格ng-table-dynamic对应源码为 ngTableDynamic.directive.ts。✅ 方法一用show属性动态显示/隐藏列思路非常简单为每一列画一个复选框绑定到该列的show属性上勾选状态一变表格立刻重新渲染。官方示例 column-picker.html 只有短短几行label classcheckbox-inline ng-repeatcol in $ctrl.columns input typecheckbox ng-model-options{ getterSetter: true } ng-modelcol.show/ {{col.title()}} /label对应的控制器 column-picker.component.ts 通过bindings把列数组传入组件。几个关键细节ng-modelcol.show直接操作列的showAngularJS 脏检查会自动刷新表格无需手写任何刷新逻辑ng-model-options{ getterSetter: true }因为show在内部是用 getter/setter 封装的见上文 ngTableColumn.ts必须开启getterSetter模式才能正确读写完全声明式显隐逻辑集中在一个模板里和业务代码解耦维护成本低这套列选择器Column Picker正是大型后台系统里常见的自定义列功能ng-table 用它只需十几行代码。官方演示页面见 demo-visibility.html。 方法二拖拽重排列ng-table 中列的显示顺序完全由列数组的顺序决定——ng-repeat按数组遍历生成表头和数据列。这意味着调换数组里两个元素的位置 → 表格列顺序自动变化给数组元素加个drag手柄、配合拖拽操作修改数组 → 就实现了拖拽重排官方提供的拖拽示例见 demo-reordering.html基于 CodePen 嵌入其核心思路可以概括为三步绑定拖拽为表头单元格的拖拽手柄绑定拖放事件重排数组拖放结束时把columns数组中对应的元素交换位置如splice移除再插入自动重渲染AngularJS 的ng-repeat追踪数组变化表头与数据列顺序同步更新 拖拽交互本身可以交给任何你熟悉的拖放方案ng-table 只负责数组顺序变了视图就跟着变这一层职责清晰、互不干扰。 实战建议持久化用户偏好把show状态和列顺序存入localStorage下次进入页面自动恢复用户调一次管一世保底一列做列选择器时建议锁住一个关键字段如姓名/编号不可隐藏避免表格空无一列排序、过滤不受影响显隐与重排操作后各列的sortable、filter配置依然生效无需额外处理服务端分页场景同样适用动态列只影响前端渲染与 ng-table 的懒加载数据流完全兼容参考 ngTableDefaultGetData.ts 相关源码与示例导航内容路径项目说明与安装方式README.md列模型show属性定义ngTableColumn.ts动态表格指令ngTableDynamic.directive.ts列选择器示例column-picker.html动态列表示例dynamic-table.component.ts列显隐演示页demo-visibility.html列重排演示页demo-reordering.html总结ng-table 的列控制能力可以归纳为一句话show管显隐数组顺序管排列。配合动态表格ng-table-dynamic你只需要一个复选框列表和一个拖拽交互就能给用户交付千人千面的个性化表格体验。【免费下载链接】ng-tableSimple table with sorting and filtering on AngularJS项目地址: https://gitcode.com/gh_mirrors/ng/ng-table创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考