添加自定义动作按钮- ng2-smart-table
添加自定义动作按钮- ng2-smart-table
提问于 2018-08-30 05:07:41
我正在尝试向自定义操作添加一个按钮，但该操作中没有添加新的列，这使得该按钮与其他按钮重叠。
代码：
settings = {
actions: {
custom: [
{
name: 'Button',
title: 'Button ',
}
],
},
columns: {
name: {
title: 'Full name'
},
email: {
title: 'Email'
},
lastLogin: {
title: 'Last Login'
}
}
};我需要放一个链接到图像，因为我在这里几乎没有声誉，图像工具对我来说是被阻止的。
我做错了什么？
回答 5
Stack Overflow用户
回答已采纳
发布于 2018-10-09 21:14:21
你可以试试这个。将您的设置更改为：
settings = {
hideSubHeader: true,
actions: {
custom: [
{
name: 'yourAction',
title: '<i class="ion-document" title="YourAction"></i>'
},
{
name: 'editAction',
title: '<i class="ion-edit" title="Edit"></i>'
},
{
name: 'deleteAction',
title: '<i class="far fa-trash-alt" title="delete"></i>'
}
],
add: false,
edit: false,
delete: false
}
...
};然后将此代码添加到您的component.scss中
:host /deep/ ng2-st-tbody-edit-delete {display: flex !important;
height: 0 !important;
}
:host /deep/ ng2-st-tbody-custom a.ng2-smart-action.ng2-smart-action-custom-custom {
display: inline-block;
width: 50px;
text-align: center;
font-size: 1.1em;
}
:host /deep/ ng2-st-tbody-custom a.ng2-smart-action.ng2-smart-action-custom-custom:hover {
color: #5dcfe3;
}Stack Overflow用户
发布于 2020-04-01 02:34:10
现在您可以使用如下所示来更改ng2智能表的操作图标。您可以使用position: "right"属性更改操作列的侧面。有关更多信息，请参阅
settings = {
edit: {
editButtonContent: '<i class="nb-edit"></i>',
saveButtonContent: '<i class="nb-checkmark"></i>',
cancelButtonContent: '<i class="nb-close"></i>',
confirmSave: true
},
delete: {
deleteButtonContent: '<i class="nb-trash"></i>',
confirmDelete: true
},
columns: {
id: {
title: "Id",
filter: true
},
name: {
title: "Name",
filter: true
},
transport: {
title: "Transport",
filter: true,
valuePrepareFunction: value => {
return value === 1 ? "Yes" : "No";
}
},
route: {
title: "Route",
filter: true
},
telephone: {
title: "Telephone",
filter: true
},
mobile: {
title: "Mobile",
filter: true
},
land_name: {
title: "Land Name",
filter: false
}
},
actions: {
add: false,
position: "right"
},
pager: {
display: true,
perPage: 10
}
};Stack Overflow用户
发布于 2020-08-10 20:11:14
angular已经弃用了/deep/组合器，因此我针对同样的问题执行了以下操作：
在全局css中添加了一个样式类：
.ng2-custom-actions-inline {
.ng2-smart-action-custom-custom {
display: inline-block !important;
height: auto !important;
width: auto !important;
}
}在智能表的设置数组中设置settings.rowClassFunction属性：
rowClassFunction: (row) => { return 'ng2-custom-actions-inline' }我从这个答案中得到了一个线索：
https://github.com/akveo/ng2-smart-table/issues/779#issuecomment-428494547
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52086092
复制相关文章
相似问题
腾讯云开发者
