角度& ng2-smart-table:“多重选择模式"复选框已禁用 [英] Angular & ng2-smart-table: Multi selectmode checkbox disable

问题描述

我正在使用ng2-smart-table来显示一些数据，我将selectMode设置为"multi"，以便在左侧具有复选框.在数据中，我有一个对象数组，这些对象带有"set"属性，该属性是布尔值，可以为true或false，如果set属性为true，如何禁用复选框?有办法吗?

I'm using ng2-smart-table to display some data, i've set the selectMode to 'multi' in order to have checkboxes on the left side. In the data i have an array of objects which come with a property "set" which is a boolean and can either be true or false, how do i disable the checkbox if the set property is true? Is there a way to do this?

我已经尝试过制作一个新的renderComponent等，但是随后我失去了selectAll功能，而使用renderComponent时，selectRow的工作原理有所不同.

I've already tried making a new renderComponent etc but then i lose the selectAll functionality plus with a renderComponent the selectRow works different.

这里是链接: https://stackblitz.com/edit/angular-ndmxxg

推荐答案

我在顶部放置了一个按钮，该按钮初始化为true，当您按下该按钮时，它将禁用所有复选框.

I have put a button on the Top, which is initialized to true, when you press it, it will disable all the checkboxes;

注意:我已经通过点击按钮进行了设置，以便您看到它的实际效果；如果要在从父级或默认情况下获取布尔变量之后执行此操作，则必须在ngAfterViewInit()内部执行此操作，因为我们必须等待ng2-smart-table呈现并准备就绪;我也在我的闪电战中留下了评论；

NOTE: I have set this on click of a button so that you see it in action; If you want to do it after getting a boolean variable from the parent or by-default, you'd have to do this inside ngAfterViewInit()... since we'd have to wait for the ng2-smart-table to be rendered and ready; i left a comment in my stackblitz about it also;

相关的 HTML :

<h3>
    Event Response in Console
</h3>
<button (click)="onClick()"> Disable checkbox </button>
<hr/>
<ng2-smart-table [settings]="settings" [source]="data" (deleteConfirm)="onDeleteConfirm($event)" (editConfirm)="onSaveConfirm($event)"
 (createConfirm)="onCreateConfirm($event)" (userRowSelect)="onRowSelect($event)"> 

相关的 TS :

import { Component, Renderer2, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  selectedMode: boolean = true;
  // This will contain selected rows
  selectedRows: any;

  constructor(private renderer2: Renderer2, private e: ElementRef) { }

  ngAfterViewInit() { }

  disableCheckboxes() {
    var checkbox = this.e.nativeElement.querySelectorAll('input[type=checkbox]');
    checkbox.forEach((element, index) => {

      /* disable the select all checkbox */
      if (index ==0){this.renderer2.setAttribute(element, "disabled", "true");}

      /* disable the checkbox if set column is false */
      if (index >0 && this.data[index-1].set == false) {
        this.renderer2.setAttribute(element, "disabled", "true");
      }
    });
  }

  settings = {
    selectMode: 'multi',
    delete: {
      confirmDelete: true,

      deleteButtonContent: 'Delete data',
      saveButtonContent: 'save',
      cancelButtonContent: 'cancel'
    },
    add: {
      confirmCreate: true,
    },
    edit: {
      confirmSave: true,
    },
    columns: {
      id: {        title: 'ID',      },
      name: {        title: 'Full Name',      },
      email: {        title: 'Email',      },
      set: {        title: 'Set',      }
    },
  };

  data = [
    {
      id: 1,
      name: "Leanne Graham",
      email: "[e-mail]",
      set: true
    },
    {
      id: 2,
      name: "Ervin Howell",
      email: "[e-mail]",
      set: false
    },
    // ... list of items
    {
      id: 11,
      name: "Nicholas DuBuque",
      email: "[e-mail]",
      set: false
    }
  ];

  // UserRowSelected Event handler
  onRowSelect(event) {
    this.selectedRows = event.selected;
  }

  // Get Selected button click handler
  onClick() {
    // It will console all the selected rows
    this.selectedMode = false;
    this.disableCheckboxes();
  }

  onDeleteConfirm(event) {
    console.log("Delete Event In Console")
    console.log(event);
    if (window.confirm('Are you sure you want to delete?')) {
      event.confirm.resolve();
    } else {
      event.confirm.reject();
    }
  }

  onCreateConfirm(event) {
    console.log("Create Event In Console")
    console.log(event);
  }

  onSaveConfirm(event) {
    console.log("Edit Event In Console")
    console.log(event);
  }
}

完成在此处工作stackblitz

更新(根据下面提问者的评论):

Update (in light of questioner's comment below):

相关的 CSS :

::ng-deep table tr td:nth-of-type(1),
::ng-deep table tr th:nth-of-type(1)
{ padding:0 !important; display: block;height: 13px; position: relative;}
::ng-deep table tr td:nth-of-type(1) input,
::ng-deep table tr th:nth-of-type(1) input
{ margin:0 !important; position: absolute; top: 15px;}
::ng-deep table tr td:nth-of-type(2),
::ng-deep table tr th:nth-of-type(2)
{ padding: 0 0 0 20px !important;}

这篇关于角度& ng2-smart-table:“多重选择模式"复选框已禁用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！