web-dev-qa-db-fra.com

Ajouter un bouton d'action personnalisé - ng2-smart-table

J'essaie d'ajouter un bouton à une action personnalisée, mais aucune nouvelle colonne n'est ajoutée à l'action, ce qui fait que le bouton se chevauche avec les autres.

Code:

settings = {
    actions: {
      custom: [
        {
          name: 'Button',
          title: 'Button ',
        }
      ],
    },
    columns: {
      name: {
        title: 'Full name'
      },
      email: {
        title: 'Email'
      },
      lastLogin: {
        title: 'Last Login'
      }
    }
  };

Je devais mettre un lien vers l'image, car j'ai peu de réputation ici et l'outil d'image est bloqué pour moi.

image de réaction:

Qu'est-ce que je fais mal?

ng2-smart-table
7
Leticia Fatima

vous pouvez l'essayer. changez votre réglage en:

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
}
...
};

puis ajoutez ceci dans votre 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;
}
13
Maharavo Abel

Maintenant, vous pouvez utiliser comme ci-dessous pour changer les icônes d'action de la table intelligente ng2. Vous pouvez changer le côté de la colonne d'action en utilisant position: "right" propriété. pour plus se référer

https://github.com/akveo/ngx-admin/blob/master/src/app/pages/tables/smart-table/smart-table.component.ts

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
    }
  };
0
ireshan pathirana