Angular4_table中的checkbox 全选,按钮启用禁用
发布时间:2020-12-17 08:13:12 所属栏目:安全 来源:网络整理
导读:这客户比较特殊,啥都得选中行能选中checkbox,并且未选中时按钮需要禁用。 可以理解 代码比较简单,table代码: div class="modal-header" p class="modal-title"Logout Warnning/p /div div class="modal-body" pYour have working order(s). if you logou
这客户比较特殊,啥都得选中行能选中checkbox,并且未选中时按钮需要禁用。 可以理解 代码比较简单,table代码: <div class="modal-header"> <p class="modal-title">Logout Warnning</p> </div> <div class="modal-body"> <p>Your have working order(s). if you logout the order(s) will be returned to the Pick Queue and all unconfirmed handling units will remove. Do you want to continue logout? </p> <table class="table"> <thead> <tr> <th> <input type="checkbox" name="checkedAll" [checked]="isAllChecked()" (change)="checkAll($event)"> </th> <th>Phase Code</th> <th>Delivery</th> <th>Product</th> </tr> </thead> <tbody> <tr *ngFor="let task of this.releaseTasks.releaseTaskDetails index as i;"(click)="onModalSelectedRows(task)" > <td> <input type="checkbox" [(ngModel)]="task.isChecked" name="checkedTask{{i}}" #checkedTask="ngModel"/> </td> <td> {{task.phaseCode}} </td> <td> {{task.saP_DeliveryOrder_ID}} </td> <td> {{task.saP_ProductOrder_ID|removeLeadingZeros}} </td> </tr> </tbody> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" (click)="c('Yes')" [disabled]="!canRelease">Release and logout</button> <button type="button" class="btn btn-primary" (click)="c('No')">Logout only</button> </div> 后台ts代码 checkAll(ev: any) {
this.releaseTasks.releaseTaskDetails.forEach((x:any) => x.isChecked = ev.target.checked)
}
isAllChecked() {
if(this.releaseTasks.releaseTaskDetails.length > 0 ){
return this.canRelease = this.releaseTasks.releaseTaskDetails.every((_:any) => _.isChecked);
}
return false;
}
public class ReleaseTaskViewModel { public string Operator_ID {get; set;} public int OperatorActivityId {get; set;} public int DeliveryOrder_ID {get; set;} public int ProductionOrder_ID {get; set;} public string SAP_DeliveryOrder_ID {get; set;} public string SAP_ProductOrder_ID {get; set;} public string PhaseCode { get; set; } public bool isChecked { get; set; } public bool isPersistent { get; set; } public int OrderId{get;set;} } public class ReleaseTask{ public ReleaseTask() { this.ReleaseTaskDetails = new List<ReleaseTaskViewModel>(); } public List<ReleaseTaskViewModel> ReleaseTaskDetails {get;set;} } Controller 代码 var activityQuery = from op in _context.OperatorActivities where op.Operator_ID == userName && !op.IsComplete && !op.IsReleased && !op.IsException select op; ReleaseTask relesaseTask = new ReleaseTask(); if(activityQuery.Any()){ foreach (var activity in activityQuery) { ReleaseTaskViewModel taskDetail = new ReleaseTaskViewModel(); taskDetail.SAP_DeliveryOrder_ID = getOrderById(activity.DeliveryOrder_ID); taskDetail.SAP_ProductOrder_ID = getProductOrderById(activity.ProductionOrder_ID); taskDetail.PhaseCode = activity.ActivityCode; taskDetail.isChecked = true; taskDetail.OperatorActivityId = activity.OperatorActivity_ID; taskDetail.DeliveryOrder_ID = activity.DeliveryOrder_ID; taskDetail.ProductionOrder_ID = activity.ProductionOrder_ID; taskDetail.Operator_ID = activity.Operator_ID; taskDetail.OrderId = activity.ActivityCode == "MAKE" ? activity.ProductionOrder_ID : activity.DeliveryOrder_ID; taskDetail.isPersistent = isPersistent(activity.ProductionOrder_ID); if(!taskDetail.isPersistent) { relesaseTask.ReleaseTaskDetails.Add(taskDetail); } } } return(Ok(new { success = true,data = relesaseTask}));代码还是比较臭,还是得加强啊。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- scala – Slick 2.0在表中映射java.util.Date
- 学习使用Bootstrap页面排版样式
- angularjs – ng形式的角度ng重复,访问控制器中的验证
- scala – 通常采用类型并返回相同类型的函数
- Angular 安全导航操作符(?.)和空属性路径
- bash – 如何强制grep只返回文件并忽略目录?
- Chapter 1 unit 2 of Bootstrap-Bootstrap Scaffolding
- 如何通过bash shell cin c string> = 1024个字符?
- 【WebService】带你走进webservice的世界
- Scala中“HashSet”和“Set”的区别?