如何在 Angular 数据表中实现列重新排序

编程问答 2022-05-30

问题描述

我需要什么

  • 我需要对数据表中的列重新排序

类似的例子

https://datatables.net/extensions/responsive/examples/column-control/colreorder.html

enter image description here

问题

enter image description here

角度 Json

Reverse for "" not found.

角度 ts 代码

""

应用 Html

              "styles": [
                      "src/styles.css","node_modules/datatables.net-dt/css/jquery.dataTables.css","node_modules/bootstrap/dist/css/bootstrap.min.css","node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css","node_modules/datatables.net-colreorder-dt/css/colReorder.dataTables.css"
                    ],"scripts": [
                     "node_modules/jquery/dist/jquery.min.js","../node_modules/datatables.net/js/jquery.dataTables.js","node_modules/bootstrap/dist/js/bootstrap.min.js","node_modules/datatables.net-colreorder/js/dataTables.colReorder.js"
                    ]
                  },

我尝试过的解决方案

  • 在 Index.htm 中手动添加 js 不起作用

还在堆栈闪电战中的依赖项中添加了库

enter image description here

堆叠闪电战链接

https://stackblitz.com/edit/angular-ivy-tddmbw

参考

                    export class AppComponent implements OnInit {
                  name = "Angular " + VERSION.major;
                  //dataTest =[];
                  // Must be declared as "any",not as "DataTables.Settings"
                  dtOptions: any = {};

                  dataTest = {
                    data: [
                      {
                        id: 860,firstName: "Superman",lastName: "Yoda"
                      },{
                        id: 870,firstName: "Foo",lastName: "Whateveryournameis"
                      },{
                        id: 590,firstName: "Toto",lastName: "Titi"
                      }
                    ]
                  };

                  ngOnInit() {
                   
                    this.dtOptions = {
                      ajax: JSON.stringify(this.dataTest),columns: [
                        {
                          title: "No move me!",data: "id"
                        },{
                          title: "Try to move me!",data: "firstName"
                        },{
                          title: "You cannot move me! *evil laugh*",data: "lastName"
                        }
                      ],dom: "Rt",// Use this attribute to enable colreorder
                      colReorder: {
                        order: [1,2],fixedColumnsRight: 2
                      }
                    };
                  }
                }

欢迎任何建议

更新...

回滚到旧的 Stack blitz 版本没有问题

https://stackblitz.com/edit/angular-datatables-gitter-jasgfw

但是列重新排序不起作用。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularangular-datatablesdatatablesjavascriptjquery