Question

我已经集成了ng2智能表。

在操作列中，我显示了编辑和删除链接。

我想隐藏删除和编辑链接，具体取决于列值。如果状态为活动状态，则需要隐藏编辑和删除链接。

以下是我的设置

    settings = {
selectMode: 'multi',
mode: 'external',
hideSubHeader:true,
editable:false,
pager : {
    display : true,
    perPage:20
},
actions: { add: false, edit: true, delete:true, position:'right'},
      edit: {
        editButtonContent: '<i class="fa fa-pencil"></i>'
        //mode: 'external'
      },
      delete: {
        deleteButtonContent: '<i class="fa fa-trash" aria-hidden="true"></i>',
        confirmDelete: true
      },
  columns: {
    id: {
      title: 'ID'
    },
    title: {
      title: 'Title'
    },
     status: {
      title: 'Status',
      type: "html",
      valuePrepareFunction: (value) => { 
        if(value == 'To be approved') {
          return '<span class="unapproved">'+value+'</span>'  
        } else {
          //actions.edit  = false;
          return '<span class="approved">'+value+'</span>'  
        }

      }

    }
  }
};

这是我使用的代码

 <ng2-smart-table id="ng2_smart" [settings]="settings" [source]="data" (edit)="onEdit($event)" (delete)="onDelete($event, content)" (custom)="onCustom($event)" (userRowSelect)="selectedData($event)"></ng2-smart-table>

Answer 1

使用全局布尔变量将状态列初始化为显示/隐藏。并在动作对象中使用它。试试以下代码

＆＃13;

 var isEditOrDelete=true;
    
    
    settings = {
    selectMode: 'multi',
    mode: 'external',
    hideSubHeader:true,
    editable:false,
    pager : {
        display : true,
        perPage:20
    },
    actions: { add: false, edit: isEditOrDelete , delete:                   
              isEditOrDelete, position:'right'},
     edit: {
            editButtonContent: '<i class="fa fa-       pencil"></i>'
            //mode: 'external'
          },
     delete: {
            deleteButtonContent: '<i class="fa fa-trash" aria-
                                  hidden="true"></i>',
            confirmDelete: true
          },
  columns: {
        id: {
          title: 'ID'
        },
        title: {
          title: 'Title'
        },
         ststus:{
            title: 'Status',
            type: "html",
            valuePrepareFunction: (value) => { 
                 if(value == 'To be approved') {
                 isEditOrDelete = false;
                 return '<span class="unapproved">'+value+'</span>'  
                } else {
                isEditOrDelete = true;
                return '<span class="approved">'+value+'</span>'  
             }
           }
        }
      }
    };

＆＃13;

ng2智能表如何根据列值隐藏删除图标

1 个答案: