Question

由于一个复选框，我正在寻找所选项目的多次删除。我使用此链接https://github.com/swimlane/ngx-datatable/blob/master/demo/selection/selection-chkbox-template.component.ts创建我的列表。然后，我使用以下html在页面顶部创建了一个删除按钮：

func simpleStripes(x: CGFloat, y: CGFloat, width: CGFloat, height: CGFloat) {

    let stripeWidth: CGFloat = 20.0 // whatever you want
    let m = stripeWidth / 2.0

    guard let c = UIGraphicsGetCurrentContext() else { return }
    c.setLineWidth(stripeWidth)

    let r = CGRect(x: x, y: y, width: width, height: height)
    let longerSide = width > height ? width : height

    c.saveGState()
    c.clip(to: r)

        var p = x - longerSide
        while p <= x + width {

            c.setStrokeColor(pale blue)
            c.move( to: CGPoint(x: p-m, y: y-m) )
            c.addLine( to: CGPoint(x: p+m+height, y: y+m+height) )
            c.strokePath()

            p += stripeWidth

            c.setStrokeColor(pale gray)
            c.move( to: CGPoint(x: p-m, y: y-m) )
            c.addLine( to: CGPoint(x: p+m+height, y: y+m+height) )
            c.strokePath()

            p += stripeWidth
        }

    c.restoreGState()
}

但是，我无法成功使用函数<button (click)="onRemoveRow(selected)">Remove First Row</button> <ngx-datatable #table class='material' [columns]="columns" [columnMode]="'force'" [rowHeight]="'auto'" [rows]='temp' [headerHeight]="50" [footerHeight]="50" [limit]="5" [rowClass]="getRowClass" [selected]="selected" [selectionType]="'checkbox'" (select)='onSelect($event)'> <ngx-datatable-column [width]="30" [sortable]="false" [canAutoResize]="false" [draggable]="false" [resizeable]="false"> </ngx-datatable-column> <ngx-datatable-column name="Site" > <ng-template let-value="value" let-sort="sortFn" ngx-datatable-header-template> Site </ng-template> <ng-template let-value="value" ngx-datatable-cell-template> {{ value }} </ng-template> </ngx-datatable-column> <ngx-datatable-column name="Filiere" > <ng-template let-value="value" let-sort="sortFn" ngx-datatable-header-template> Filiere </ng-template> <ng-template let-value="value" ngx-datatable-cell-template> {{ value }} </ng-template> </ngx-datatable-column> <ngx-datatable-column name="Type" > <ng-template let-value="value" let-sort="sortFn" ngx-datatable-header-template> Type </ng-template> <ng-template let-value="value" ngx-datatable-cell-template> {{ value }} </ng-template> </ngx-datatable-column> <ngx-datatable-column name="TypeSource" > <ng-template let-value="value" let-sort="sortFn" ngx-datatable-header-template> TypeSource </ng-template> <ng-template let-value="value" ngx-datatable-cell-template> {{ value }} </ng-template> </ngx-datatable-column> </ngx-datatable>删除所选的行。我试图在所有行和选定行之间使用限制，但我确实没有找到解决方案。如果有人有想法，我只是在寻找建议或更好的方法。

Answer 1

您可以像这样

此处以HTML格式实现：

    <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
     <div>
   <button class="mt-1 mr-1 ml-1 mb-1" md-raised-button color="primary"(click)="addcontact()">New</button>
    <button class="btn btn-success mr-1 mb-1"  style="float: right;"  [disabled]="buttonDisabled" (click)="multiplecontactdel()">Delete</button>   
   </div>
   <div class="pt-2 pb-2 pl-2 pr-2 mat-white box-inset mb-2">
    </div>
             <div class="force-card-content">
                <div class="table-responsive">
                        <ngx-datatable
                        class="material"
                        [selectionType]="'checkbox'"  
                        (activate)="onActivate($event)"
                        (select)='onSelectNew($event)'
                        [selected]="selected"
                        [rows]="rows"    
                        [sortType]="'multi'"
                        [columnMode]="'flex'"
                        [headerHeight]="50"
                        [footerHeight]="50"
                        [rowHeight]="auto"
                        [limit]="10">                        
                        <ngx-datatable-column name="Email" prop="WorkEmail" [flexGrow]="4"></ngx-datatable-column> 
                        <ngx-datatable-column name="Account Name" prop="AccountName" [flexGrow]="4" ></ngx-datatable-column>                         
                        <ngx-datatable-column [flexGrow]="1"  [headerCheckboxable]="true"
                        [checkboxable]="true" [sortable]="false" [canAutoResize]="false" [draggable]="false" [resizeable]="false">
                        </ngx-datatable-column>   
                      </ngx-datatable>                    
                </div>  
            </div>
  </div>
  </div>

并在Codebehind中实现：

    "use strict";
import { Component, OnInit, ViewEncapsulation, ViewContainerRef } from '@angular/core';
import { Router } from "@angular/router";
import { Http, RequestOptions, Headers, Response } from '@angular/http';
import { PageTitleService } from '../../core/page-title/page-title.service';
import { fadeInAnimation } from "../../core/route-animation/route.animation";
import { ApiService } from '../../api/api.service';
import { ToastsManager } from 'ng2-toastr/ng2-toastr';
import { MdDialogRef, MdDialog, MdDialogConfig } from "@angular/material";
import { AlertsService, DemoDialog3 } from '../../api/alerts.service';
@Component({
  selector: 'ms-contacts',
  templateUrl: './contacts.component.html',
  styleUrls: ['./contacts.component.scss'],
  encapsulation: ViewEncapsulation.None,
  host: {
    "[@fadeInAnimation]": 'true'
  },
  animations: [fadeInAnimation]
})
export class ContactsComponent implements OnInit {
  dialogRef: MdDialogRef<DemoDialog3>;
  result: string;
  buttonDisabled: boolean;  
  tdata: any;
  mdeleteid = [];
  rows = [];
  temp = [];
  filteredData = [];
  data = []; 
  selected = []; 
  selectedContacts = []; 
  constructor(private router: Router, private api: ApiService) {

    this.fetch1((data) => {      
      this.temp = [...data];      
      this.rows = data;
      this.filteredData = data;      
    });
  }
  ngOnInit() {this.buttonDisabled = true;}
  fetch1(cb) {
    this.pageTitleService.setTitle("Contacts");
    var $scope = this;
    var Tid = localStorage.TenantId;
    this.api.postPromise('api/Contacts/GetContacts?Tid=' + Tid, null).then(
      function (data) {cb(data);},
      function (err) {
        console.log(err);
        alert("Error");
      });
  }
  onSelectNew({ selected }) {
    var $scope = this;
    if (selected.length > 0) {this.buttonDisabled = false;}
    else { this.buttonDisabled = true; }
    this.selected.splice(0, this.selected.length);
    this.selected.push(...selected);
  } 
multiplecontactdel() {    
    var $scope = this;
    $scope.selectedContacts.push(...this.selected);         
        this.api.postPromise('api/Contacts/ContactsMultipleDelete', $scope.selectedContacts).then( //getting data from api
          function (data) {           
            if (data.Message == "Successfull") {
              $scope.selectedContacts = [];
              $scope.toastr.success("Contact Deleted Successfully");
              $scope.fetch1((data) => {
                $scope.temp = [...data];
                $scope.rows = data;
              });              
            }
            else {
              $scope.toastr.success("Cant't delete");             
            }
          },
          function (err) {console.log(err);});      
    this.selected = [];
  }
 }

Answer 2

它的枚举分配问题

导入

import { SelectionType } from '@swimlane/ngx-datatable';

声明

selection: SelectionType;

初始化

 constructor() {
    this.selection = SelectionType.checkbox;
    };

选中复选框删除所选项目

2 个答案: