Функция щелчка в столбце ng2-smart-table - PullRequest
Новая
       33

Функция щелчка в столбце ng2-smart-table

0 голосов
/ 26 января 2019

Я пытался включить функцию щелчка в столбце ng2-smart-table.Кажется, что угловое (click) событие и javascipt "onclick" не отображаются в таблице.Код ниже 

public settings = {
selectMode: 'single',  //single|multi
hideHeader: false,
hideSubHeader: false,
actions: {
  columnTitle: 'Actions',
  add: false,
  edit: false, // true,
  delete: false, // true,
  custom: false
},
noDataMessage: 'No data found',
columns: {
  IsComplete: {
    title:'Status',
    type:'html',
    filter: false,        
    valuePrepareFunction: (value) => {
      // return value===true ? 'Complete' : 'Pending';
      if(value===true){
        return  '<div class="text-nowrap text-success"><i class="fa fa-check-circle-o"> Complete</i></div>'; //  Complete';
        //return  'Complete';
      } else {
        //return  'Pending';
        return  '<div class="text-nowrap text-warning"><i class="fa fa-exclamation-circle"></i> Pending</div>'; //  Pending';
      }
    }
  },
  DateCreated: {
    title: 'Date created',
    type: 'string',
    filter: true,
    valuePrepareFunction: (date) => {
      var raw = new Date(date);
      var formatted = new DatePipe('en-EN').transform(raw, 'dd MMM yyyy');
      return formatted;
    }
  },      
  MemberName: {
    title: 'Member',
    type: 'string',
    filter: true
  },
  Start: {
    title: 'Start date',
    type: 'string',
    filter: false,
    valuePrepareFunction: (date) => {
      var raw = new Date(date);
      var formatted = new DatePipe('en-EN').transform(raw, 'dd MMM yyyy');
      return formatted;
    }
  },
  End: {
    title: 'End date',
    type: 'string',
    filter: false,
    valuePrepareFunction: (date) => {
      var raw = new Date(date);
      var formatted = new DatePipe('en-EN').transform(raw, 'dd MMM yyyy');
      return formatted;
    }
  },
  OrderId: {
    title: 'Details',
    type: 'html',
    filter: false,
    valuePrepareFunction: (OrderId) => {
      return  '<a onclick="onCustom($event)" href="/pages/order/' + OrderId + '"><i class="fa fa-search"></i> view</a>'; //  Complete';
    }
  }

Интересующий столбец - событие «OrderId», которое будет запущено ниже, однако я также хочу, чтобы пользователь мог щелкнуть правой кнопкой мыши ссылку и выбрать открыть новую вкладку и т. Д.отсюда и ссылка, и функция щелчка. 

onCustom(event) { this.router.navigateByUrl('/pages/order/' + event.data.OrderId); }

Используя инструменты разработчика, я вижу, что onclick или (щелчок) игнорируется, и все, что я получаю, это ссылка; 

<a href="/pages/order/411"><i class="fa fa-search"></i> view</a>

Обновление: Я также думал об использовании столбца настраиваемых действий, чтобы воспользоваться вызовом функции "onCustom ()", но не смог получить значение valuePrepareFunction для отображения (только получение свойства title)) или ссылаться на данные строки в свойстве title следующим образом. 

custom: [{
name: 'view',
title: 'View ',
type: 'html',
valuePrepareFunction:(row)=>{
  return `<a title="See Detail Product "href="Your api key or something/${row.OrderId}"> <i class="ion-edit"></i></a>`
},

}],

1 Ответ

0 голосов
/ 28 января 2019

Когда вы использовали valuePrepareFunction pass type = custom.Попробуйте использовать custom как тип вместо html

Обновление

Вы можете использовать renderComponent функцию. 

type: 'custom',
valuePrepareFunction: (cell, row) => {
   return row.columnName;
},
renderComponent: NewComponent,

СлышатьВы должны сделать один компонент, а затем передать renderComponent.

component.ts 

import { Component,Input, OnInit } from '@angular/core';
import { ViewCell } from 'ng2-smart-table';

@Component({
 selector: '',
 templateUrl: '',
 styleUrls: ['']
})
export class NewComponent implements ViewCell, OnInit {
  renderValue: string;
  @Input() value: string | number;
  @Input() rowData: any;

  constructor() { }

 ngOnInit() {
    this.renderValue = this.value.toString();
 }

 clicked(name){
   console.log(name);
 }

}

html файл 

<span (click)="clicked(renderValue)">{{renderValue}}</span>
...