加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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;
}
onModalSelectedRows(task : any) {
task. isChecked = ! task. isChecked;
let len = 0;
this. releaseTasks. releaseTaskDetails. forEach((item : any) => {
if( item. isChecked) {
len ++;
}
});
if( len === 0) {
this. canRelease = false;
} else{
this. canRelease = true;
}
}

后台的viewmodel代码

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}));
代码还是比较臭,还是得加强啊。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读