jquery - 我想将选定的表格行数据附加/复制到另一个表格角度
问题描述
我想将数据从一个表附加/传递到另一个表。当用户搜索时，如果有多个记录，则会出现弹出窗口并要求用户选择所需的行。我正在使用角度引导程序。我尝试使用 jQuery，它适用于静态表，如果我使用 ngfor，它将不起作用，即复选框不适用于 ngfor，因此 jQuery 附加功能无法执行。我更改为 mat 复选框并且复选框功能有效，但我无法将数据附加或传输到另一个表。现在我需要帮助将选中的行转移到另一个表。
import { Component, OnInit,ViewChild,TemplateRef } from '@angular/core';
import { SearchService } from 'src/app/shared/search.service'
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
import $ from 'jquery'
import * as _angular_ from 'angular';
import { AuditPlan } from '../shared/audit.model';
declare global {
const angular: typeof _angular_;
}
function convert(str) {
var date = new Date(str),
mnth = ("0" + (date.getMonth() + 1)).slice(-2),
day = ("0" + date.getDate()).slice(-2);
return [date.getFullYear(), mnth, day].join("-");
}
@Component({
selector: 'app-view-audit',
templateUrl: './view-audit.component.html',
styleUrls: ['./view-audit.component.css']
})
export class ViewAuditComponent implements OnInit {
page = 1;
count = 0;
tableSize = 2;
@ViewChild("content") modalContent: TemplateRef<any>;
angular:any;
selection: any;
constructor(private SearchService: SearchService ,private modalService: NgbModal) { }
model: any = {};
audit: any;
auditType: string;
auditName: string;
from: string;
to: string;
fromdate: any;
todate: any;
data:any;
closeResult = '';
result:any;
content:any;
datatable:any;
ngOnInit(): void {
this.showdata();
}
getCheckbox(checkbox){
//Cache cloned object in a variable
var clone = $(this).closest("tr").clone();
// $('#scope').empty();
//Remove checkbox
// clone.find(':checkbox').remove();
//Append it
clone.appendTo("#table1");
this.audit=this.datatable;
}
openDialog(content) {
this.modalService.open(content, { size: 'xl' ,ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}
onTableDataChange(event) {
this.page = event;
this.showdata();
}
selectChangeHandler(event: any) {
this.auditType = event.target.value;
}
showdata() {
this.SearchService.showdata().subscribe((res: any) => {
this.audit = res;
// console.log(this.audit);
// if(this.audit.length>=4){
// console.log("Sucess");
// }
// else{
// console.log("error");
// }
// res.forEach((element) => {
// var ele= element.Audit_Type;
// var num = this.audit.reduce(function (n, audit) {
// return n + (audit.Audit_Type=='Internal');
// }, 0);
// console.log(num);
// });
})
}
searchdata() {
if (this.auditName == null || this.auditType == null || this.from == null || this.to == null) {
alert("Please fill all the mandatory fields");
}
else{
this.fromdate = this.from.toString();
this.todate = this.to.toString();
let datefrom = convert(this.fromdate);
let dateto = convert(this.todate);
this.SearchService.searchdata(this.auditType, this.auditName, datefrom, dateto).subscribe((res: any) => {
if(res.length>=2){
this.openDialog(this.modalContent);
this.datatable = res;
}
else{
this.audit = res;
}
})
}
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<html ng-app="myApp">
<ul class="nav nav-tabs " role="tablist">
<li class="nav-item">
<a class="nav-link " data-toggle="tab" [routerLink]="'/createaudit'" role="tab">Create Audit</a>
</li>
<li class="nav-item">
<a class="nav-link active " data-toggle="tab" [routerLink]="'/view'" role="tab">View Audit</a>
</li>
</ul>
<div class="box">
<div class="col-xs-12 col-sm-3" style="padding-top: 10px; ">
<h2 style="background-color: rgb(243, 243, 243); width: 1300px;">View Audit Plan</h2>
</div>
<h5 class="h5">
*Indicates Mandatory Fields
</h5>
<form #addClientForm="ngForm" (ngSubmit)="searchdata()" (ngReset)="showdata()">
<div class="form-group">
<div class="container">
<div class="row">
<div class="col">
<div class=" form form-group ">
<label class="required-field" for="exampleFormControlSelect1">Audit Plan Type</label>
<select (change)="selectChangeHandler($event)" class="form-control"
id="exampleFormControlSelect1">
<option>Choose Plan Type</option>
<option value="Internal">Internal</option>
<option value="External">External</option>
<option value="Client">Client</option>
<option value="Vendors">Vendors</option>
<option value="Others">Others</option>
</select>
</div>
</div>
<div class="col">
<div class=" form-group ">
<label class="required-field" for="exampleFormControlInput1">Audit Plan Name</label>
<input type="text" #AuditName="ngModel" name="AuditName" [(ngModel)]="auditName"
class="form-control" id="exampleFormControlInput1" placeholder="Security">
</div>
</div>
<div class="col">
<div>
<label class="required-field" for="exampleFormControlInput1">Audit From Date</label>
<mat-form-field appearance="fill">
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker1" #From="ngModel" name="From"
[(ngModel)]="from">
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</mat-form-field>
</div>
</div>
<div class="col ">
<div class="date">
<label class="required-field" for="exampleFormControlInput1">Audit To Date</label>
<br>
<mat-form-field appearance="fill">
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker2" #To="ngModel" name="To" [(ngModel)]="to">
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2></mat-datepicker>
</mat-form-field>
</div>
</div>
<div class="center">
<button type="submit" class="btd1 btn btn-light btn-sm">Search</button>
<button type="reset" class="btd btn btn-light btn-sm">Clear</button>
</div>
</div>
</div>
</div>
</form>
<br>
<br>
<br>
<div class="container">
<h3>Search Result(s):</h3>
</div>
<div class="table1">
<table class="table table-bordered" id="table1">
<thead>
<tr>
<th style="display:none" scope="col"></th>
<th scope="col">SI No</th>
<th scope="col">Audit Name</th>
<th scope="col">Audit Type</th>
<th scope="col">From Date</th>
<th scope="col">To Date</th>
<th scope="col">Location</th>
<th scope="col">Department</th>
<th scope="col">Auditee Name</th>
<th scope="col">Auditee Mode</th>
<th scope="col">Status</th>
<th scope="col">Finding</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody id="scope">
<tr *ngFor="let audit of audit | paginate : {
itemsPerPage: tableSize,
currentPage: page,
totalItems: count
};
let i = index" [class.active]="i == currentIndex">
<td style="display:none"></td>
<td scope="row">{{audit.Sl_No}}</td>
<td><a [routerLink]="'/updateaudit'">{{audit.Audit_Name}}</a></td>
<td>{{audit.Audit_Type}}</td>
<td>{{audit.From_Date | date:'dd-MM-yyyy'}}</td>
<td>{{audit.To_Date | date:'dd-MM-yyyy'}}</td>
<td>{{audit.Location}}</td>
<td>{{audit.Audit_Area}}</td>
<td>{{audit.Auditee_Name}}</td>
<td>{{audit.Audit_Mode}}</td>
<td>{{audit.Status}}</td>
<td>{{audit.Findings}}</td>
<td><a [routerLink]="'/updateaudit'">Create New Findings</a></td>
</tr>
<tr *ngIf="!audit||audit.length==0">
<td colspan="12">
No Data Found
</td>
</tr>
</tbody>
</table>
<div class="d-flex justify-content-end">
<pagination-controls responsive="true" previousLabel="Prev" nextLabel="Next"
(pageChange)="onTableDataChange($event)">
</pagination-controls>
</div>
</div>
</div>
<br>
<div ng-app="myApp" class=tab>
<ng-template #content let-modal>
<div class="container">
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Table Update</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="table1">
<table class="table table-bordered " id="table2" id="table">
<thead>
<tr>
<th scope="col">Select</th>
<th scope="col">SI No</th>
<th scope="col">Audit Name</th>
<th scope="col">Audit Type</th>
<th scope="col">From Date</th>
<th scope="col">To Date</th>
<th scope="col">Location</th>
<th scope="col">Department</th>
<th scope="col">Auditee Name</th>
<th scope="col">Auditee Mode</th>
<th scope="col">Status</th>
<th scope="col">Finding</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor='let audit of datatable'>
<td>
<mat-checkbox #checkbox (change)="getCheckbox(checkbox)"></mat-checkbox>
</td>
<td scope="row">{{audit.Sl_No}}</td>
<td>{{audit.Audit_Name}}</td>
<td>{{audit.Audit_Type}}</td>
<td>{{audit.From_Date | date:'dd-MM-yyyy'}}</td>
<td>{{audit.To_Date | date:'dd-MM-yyyy'}}</td>
<td>{{audit.Location}}</td>
<td>{{audit.Audit_Area}}</td>
<td>{{audit.Auditee_Name}}</td>
<td>{{audit.Audit_Mode}}</td>
<td>{{audit.Status}}</td>
<td>{{audit.Findings}}</td>
<td>Create New Findings</td>
</tr>
</tbody>
</table>
</div>
<br>
<br>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">OK</button>
</div>
</div>
</ng-template>
</div>
</html>
解决方案
推荐阅读
- tagging - 如何为一个句子创建 iob 标签？
- powerbi - 使用日期切片器在报告中添加 Life to date 度量
- android - 在应用程序内打开分支链接时无法检索链接参数
- c++ - shared_ptr 如何检测是否必须调用 delete[] 或 delete
- python-3.x - Python 3 中的骰子模拟器项目
- python - 为什么在 python 中提取了错误的位？
- javascript - 错误：尚未为上下文加载模块名称“@google-cloud/vision”：_。使用要求（[]）
- c++ - 为什么 std::vector 比数组慢？
- java - 使用 Netbeans 和 Pi4J 库的 Raspberry Pi 简单 Java 应用程序 (LED) 在构建后无法唤醒
- python - 逐行读取图像像素