- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 ng2-smart-table 来显示一些数据,我已将 selectMode 设置为“multi”以便在左侧显示复选框。在数据中,我有一个对象数组,这些对象带有一个属性“set”,它是一个 bool 值,可以是 true 或 false,如果 set 属性为 true,我如何禁用复选框?有办法做到这一点吗?
我已经尝试制作一个新的 renderComponent 等,但后来我失去了 selectAll 功能加上 renderComponent selectRow 的工作方式不同。
最佳答案
我在顶部放了一个按钮,它被初始化为true
,当你按下它时,它会禁用所有的复选框;
注意:我已将此设置为单击按钮,以便您看到它的实际效果;如果您想在从父级或默认情况下获取 bool 变量后执行此操作,则必须在 ngAfterViewInit()
... 中执行此操作,因为我们必须等待 ng2-smart-table
被渲染并准备就绪;我也在我的 stackblitz 中对此发表了评论;
相关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: "Sincere@april.biz",
set: true
},
{
id: 2,
name: "Ervin Howell",
email: "Shanna@melissa.tv",
set: false
},
// ... list of items
{
id: 11,
name: "Nicholas DuBuque",
email: "Rey.Padberg@rosamond.biz",
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);
}
}
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;}
关于css - Angular 和 ng2-智能表 : Multi selectmode checkbox disable,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56949992/
我使用 jQuery 禁用选择下拉列表中的选项。我需要知道使用之间的区别 prop('disabled','disabled') 和 prop('disabled',true) 两者几乎都适用于所有浏
.attr('disabled', 'disabled') 和 .attr('disabled', true) 在我的代码中都有效,但我只是想知道:两者中哪一个更有效和/或哪一个更常用?真的有区别吗?
我的 asp.net mvc View 中有以下脚本:- function disableform(id) { $('#' + id).prop("disabled", true); } 但是
我已经在 Oracle VM Ware 中为我的 ubuntu 可信操作系统安装了 visual studio 代码和依赖项。我用这些命令运行代码。 ssh -X myserver code 但是当我
我有这个函数可以切换输入字段的禁用属性: $('.someElement').click(function(){ if (someCondition) { console.log
自从前几天我升级了 angularjs 后,我一直收到警告。每当我打开 ui.bootstrap 模式时,它都会发生。 这是我在 chrome-beta 44 中收到的警告: angular.js:1
我想限制用户在单击特定按钮时在文本框中输入值,否则设置禁用 false。如果我设置 $("#txtquery").attr("disabled","disabled"); 它将文本框设置为空白。如果切
How do I make a Spinner's "disabled" state look disabled? 可能重复. 我尝试了帖子中提到的解决方案,即 ((Spinner) spinner)
这段代码: $tds = $(this).closest('tr').find(td input,select); $tds.attr('disabled','disabled'); 使我的表格行不
使用 jQM 1.4.0我试图覆盖灰色样式(): input[type="text"]:disabled { opacity: 1.0 !important; color: black
不知道为什么这不起作用。 当人们单击我的应用程序的“编辑”按钮时,禁用的文本字段将变为可编辑: $("#bewerken").click(function(e) { $("input[d
我对以下差异有些困惑: swiftlint:disable:next swiftlint:disable:this 最佳答案 它们都用于禁用单行的快速规则。您还可以为单行启用规则。来自 SwiftLi
我看到一些代码 # pylint: disable=W0123 还有一些 # pylint: disable-msg=W0123 它们只是同义词吗? 最佳答案 从 pylint 0.21.0 开始不推
默认情况下,在桌面上,flutter 中的 btns 在禁用时会更改鼠标光标: 我们想禁用此行为,或替换为不同的光标。 最佳答案 要覆盖 ElevatedButton、TextButton 或 Out
我一直在学习很多关于标准 asp.net 验证器的知识,我的最新发现是关于如何禁用验证器客户端,这非常酷。 现在,如果我的初始帖子启用了验证器,但在客户端,我禁用它,服务器端是否识别客户端更改并保留它
默认情况下,在桌面上,flutter 中的 btns 在禁用时会更改鼠标光标: 我们想禁用此行为,或替换为不同的光标。 最佳答案 要覆盖 ElevatedButton、TextButton 或 Out
这个问题在这里已经有了答案: Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a
我有一个 python 脚本,它发送包含文本、html 和 ics 附件的多部分电子邮件。这个想法是,现代电子邮件客户端将呈现 HTML 部分并提供将事件添加到用户日历中的功能。 代码如下: impo
我有一个最初被禁用的按钮: Lorem ipsum 对于此按钮,button.getAttribute('disabled') 返回 "disabled"。但是,当我使用 JavaScript 启用此
在我的一些测试中,我必须确认在设置某些标志时某些 select2 下拉菜单被禁用。为了证实这一点,我发现以下策略似乎有效: Assert.True(element.GetAttribute("disa
我是一名优秀的程序员,十分优秀!