单击按钮即可在angular-datatables中添加动态行

时间:2019-11-07 14:18:30

标签: angularjs angular-datatables

我正在工作的情况下,我需要单击单选按钮来加载数据表网格,该表的右侧将添加一个“ +”号。单击此“ +”后,将添加新行。该表将具有以下列:名称,关系,小时,电话号码。用户可以在数据表单元格中输入值,并且需要将其保存在数据库中。我面临着实现这一目标的困难。请帮忙,因为我无法更改任何其他表,因为数据表已在我的项目中使用

我刚刚创建了角度数据表。因为它存在于我的项目中。

HTML代码

                                                                                                        名称                             关系                             已付费/未付费                             小时                             电话号码                             积极参与                                                                                                                         

                    </tr>
                </tbody>
            </table>
        </div>
    </div>

TS代码

module app.caregiver {
    'use strict';

    var vmCareGiver;

    export interface ICareGiverCtrl {

    }

    export class CareGiverCtrl implements ICareGiverCtrl {
        public counter: number = 1;
        static $inject = [
            '$scope',
            'app.generalnotes.GeneralNotesService',
            'app.careplantopicselection.CarePlanTopicSelectionService',
            'app.interventionplanentry.InterventionPlanEntryService',
            'app.blocks.constants.TIPS_CONTENT',
            'app.blocks.services.ModalService',
            'DTOptionsBuilder',
            'DTColumnDefBuilder'
        ];

        constructor(private $scope: ng.IScope,
            private generalNotesService: app.generalnotes.IGeneralNotesService,
            private carePlanTopicSelectionService: app.careplantopicselection.ICarePlanTopicSelectionService,
            private interventionPlanEntryService: app.interventionplanentry.IInterventionPlanEntryService,
            private TIPS_CONTENT: app.blocks.constants.TIPS_CONTENT,
            private modalService: app.blocks.services.IModalService,
            DTOptionsBuilder: any,
            DTColumnDefBuilder: any) {

            vmCareGiver = this;

            // Define datatable definitions.
            vmCareGiver.dtColumnDefs = [
                DTColumnDefBuilder.newColumnDef(0).notSortable(),
                DTColumnDefBuilder.newColumnDef(1).notSortable(),
                DTColumnDefBuilder.newColumnDef(2).notSortable(),
                DTColumnDefBuilder.newColumnDef(3).notSortable(),
                DTColumnDefBuilder.newColumnDef(4).notSortable(),
                DTColumnDefBuilder.newColumnDef(5).notSortable()
            ];

            // Define datatable options.
            vmCareGiver.dtOptions = DTOptionsBuilder.newOptions()
                .withPaginationType('full_numbers')
                .withDisplayLength(10)
                .withBootstrap()
                .withOption('order', [])

        }

    }
    angular
        .module('app.caregiver')
        .controller('app.caregiver.CareGiverCtrl', CareGiverCtrl);
}

需要动态添加数据表行

0 个答案:

没有答案