Условно скрыть столбец данных на основе атрибута данных - PullRequest
Новая
       19

Условно скрыть столбец данных на основе атрибута данных

0 голосов
/ 07 февраля 2020

У меня следующая проблема:

Я хочу условно отобразить столбец в таблице данных. В частности, столбец действий в kt-datatable. (Тема Metroni c для Laravel имеет собственную реализацию Datatables, основанную на jQuery datatables.) Я смотрел на метод column.render, но не могу понять его. В идеале я хотел бы отобразить столбец на основе атрибута данных, который я передаю вместе с html данных.

HTML: 

<div id="datatable-example" data-isadmin="{{ auth()->user()->hasRole(['superadmin', 'admin']) }}"></div>

js / jquery : 

example_datatable = example_element.DataTable({
        search: {
            input: $('#generalSearch'),
        },
        rows: {
            ...
        },
        columns: [
            ...,
            {
                field: 'actions',
                title: sendings_element.data('column-actions'),
                class: 'w8',
                textAlign: 'right',
                sortable: false,
                template: function (row) {
                    if (sendings_element.data('user_roles')) {
                        return '<a class="btn btn-danger" href="' + sendings_element.data('route-edit-sending').replace('__id__', row.id) + '">' + sendings_element.data('text_edit') + '</a>';
                    } else {
                        return '<a class="btn btn-danger" href="' + sendings_element.data('route-view-sending').replace('__id__', row.id) + '">' + sendings_element.data('text_view') + '</a>';
                    }
                }
            },
        ],
    });

Я был бы очень признателен за помощь.

обновление:

Я нашел довольно работоспособное решение: 

<div id="datatable-id"
         ...
         data-isadmin="{{ auth()->user()->hasRole('super-admin') ? "true"  : "false" }}" 
    ></div>

и в моем javascript: 

 kb_datatable = kb_element.customDataTableThatExtendsKTDatatable({      
        ...    
        columns: [          
           ...
            {
                field: 'description',
                title: kb_element.data('column-description'),
                width: 600,
                template: function(row) {
                    if(kb_element.data('isadmin')){                     
                        kb_datatable.column(1).visible(false);
                    }
                },
            },           
            ...

            },
        ],
    });

Я пока не доволен решением, потому что я использую шаблон для строки, чтобы скрыть столбец. Но пока это работает.

@ remul: Да, я использую KT-Datatable, я не уверен, что мой коллега, который сообщил об этой проблеме, делает это в своем коде. Хороший улов! Я только что создал тестовый набор, используя настраиваемую таблицу данных, которая расширяет ktdatatable. Я принял ваш ответ как решение, поскольку вы указали мне правильное направление, но дело в том, что видимое свойство ожидает истину или ложь, отсюда и сокращение в коде html. В идеале мне нужна функция обратного вызова для столбца, но единственное, что я могу найти, что несколько напоминает это, это метод шаблона. Также, если я использую результат сокращения в видимом свойстве в объекте столбца, я сталкиваюсь со странной ошибкой, когда мне нужно установить для других столбцов значение NULL и не могу установить дополнительные свойства для других столбцов. Использование ColumnDefs с target и visible было предложено в качестве другого решения, но я пока не могу заставить это работать.

1 Ответ

1 голос
/ 07 февраля 2020

Добавление атрибута visible к столбцу действий должно помочь, но при использовании stateSave изменение атрибута данных не будет иметь никакого эффекта, пока существует сохраненное состояние для объекта данных. Чтобы избежать этого, вы можете удалить видимость из состояния сохранения, как указано здесь :

Если вы не хотите сохранять состояние видимости столбца, вы можете удалить видимый параметр из массива столбцов объектов в состоянии объекта: 

stateSaveParams: function ( settings, data ) {
  for ( var i=0, ien=data.columns.length ; i<ien ; i++ ) {
    delete data.columns[i].visible;
  }
}

Так в вашем случае: 

columns: [
    {
        field: 'actions',
        visible: !!example_element.data('isadmin')
        // your other attributes
    },
],
stateSaveParams: function ( settings, data ) {
    for ( var i=0, ien=data.columns.length ; i<ien ; i++ ) {
        delete data.columns[i].visible;
    }
}
...