添加自定义操作按钮 - ng2-smart-table
Add custom action button - ng2-smart-table
我正在尝试向自定义操作添加按钮,但操作中未添加新列,导致按钮与其他按钮重叠。
代码:
settings = {
actions: {
custom: [
{
name: 'Button',
title: 'Button ',
}
],
},
columns: {
name: {
title: 'Full name'
},
email: {
title: 'Email'
},
lastLogin: {
title: 'Last Login'
}
}
};
我需要给图片加一个link,因为我在这里名气不大,而且图片工具对我来说被屏蔽了。
我做错了什么?
你可以试试这个。
将您的设置更改为:
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;
}
现在你可以像下面这样改变ng2 smart的动作图标了table。您可以使用 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
}
};
angular 已弃用 /deep/
组合器,因此我针对同一问题执行了以下操作:
在全局 css 中添加了样式 class:
.ng2-custom-actions-inline {
.ng2-smart-action-custom-custom {
display: inline-block !important;
height: auto !important;
width: auto !important;
}
}
在 smarttable 的设置数组中设置 settings.rowClassFunction
属性:
rowClassFunction: (row) => { return 'ng2-custom-actions-inline' }
我从这个答案中得到了线索:
https://github.com/akveo/ng2-smart-table/issues/779#issuecomment-428494547
还有一个 css 对齐项目,
::ng-deep {
ng2-st-tbody-edit-delete {
display: none;
height: 0 !important;
}
ng2-st-tbody-custom {
display: flex;
text-align: center;
}
}`
.ts
actions: {
// delete: false,
add: false,
custom: [
{
name: 'doclist',
title: '<i class="nb-arrow-thin-right" title="doclist"></i>',
},
],
position: 'right'
},
.scss
:host ::ng-deep tr .ng2-smart-actions{ display: flex; }
:host ::ng-deep nbng2-st-tbody-custom {display: flex;}
:host ::ng-deep ng2-st-tbody-edit-delete a.ng2-smart-action {display: inline-block !important;}
:host ::ng-deep ng2-st-tbody-create-cancel a.ng2-smart-action {display: inline-block !important;}
:host ::ng-deep ng2-st-tbody-custom a.ng2-smart-action.ng2-smart-action-custom-custom {
display: inline-block;
width: 80px;
text-align: center;
}
我正在尝试向自定义操作添加按钮,但操作中未添加新列,导致按钮与其他按钮重叠。
代码:
settings = {
actions: {
custom: [
{
name: 'Button',
title: 'Button ',
}
],
},
columns: {
name: {
title: 'Full name'
},
email: {
title: 'Email'
},
lastLogin: {
title: 'Last Login'
}
}
};
我需要给图片加一个link,因为我在这里名气不大,而且图片工具对我来说被屏蔽了。
我做错了什么?
你可以试试这个。 将您的设置更改为:
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;
}
现在你可以像下面这样改变ng2 smart的动作图标了table。您可以使用 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
}
};
angular 已弃用 /deep/
组合器,因此我针对同一问题执行了以下操作:
在全局 css 中添加了样式 class:
.ng2-custom-actions-inline {
.ng2-smart-action-custom-custom {
display: inline-block !important;
height: auto !important;
width: auto !important;
}
}
在 smarttable 的设置数组中设置 settings.rowClassFunction
属性:
rowClassFunction: (row) => { return 'ng2-custom-actions-inline' }
我从这个答案中得到了线索:
https://github.com/akveo/ng2-smart-table/issues/779#issuecomment-428494547
还有一个 css 对齐项目,
::ng-deep {
ng2-st-tbody-edit-delete {
display: none;
height: 0 !important;
}
ng2-st-tbody-custom {
display: flex;
text-align: center;
}
}`
.ts
actions: {
// delete: false,
add: false,
custom: [
{
name: 'doclist',
title: '<i class="nb-arrow-thin-right" title="doclist"></i>',
},
],
position: 'right'
},
.scss
:host ::ng-deep tr .ng2-smart-actions{ display: flex; }
:host ::ng-deep nbng2-st-tbody-custom {display: flex;}
:host ::ng-deep ng2-st-tbody-edit-delete a.ng2-smart-action {display: inline-block !important;}
:host ::ng-deep ng2-st-tbody-create-cancel a.ng2-smart-action {display: inline-block !important;}
:host ::ng-deep ng2-st-tbody-custom a.ng2-smart-action.ng2-smart-action-custom-custom {
display: inline-block;
width: 80px;
text-align: center;
}