微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

我需要什么

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

类似的例子

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 举报,一经查实,本站将立刻删除。