Как обновить заполнитель текста в ng2-smart-таблице? - PullRequest
Новая
       46

Как обновить заполнитель текста в ng2-smart-таблице?

0 голосов
/ 08 сентября 2018

Я использую ng2-smart-table для отображения данных в приложении angular 6.У меня есть функция фильтра.Теперь я хочу установить по умолчанию search как текст во всех columns заполнителях.Я много искал.Но я не могу изменить заполнитель фильтра. 

<ng2-smart-table [settings]="setting" [source]="dataSource"></ng2-smart-table>

В .ts файле.

add: {
  confirmCreate: false
},
columns: {
   id: {
    title: 'ID',
    filter: true        
  },
  name: {
    title: 'First Name',
    filter: true                
  },
}

Ответы [ 2 ]

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

для изменения заполнителя смарт-таблицы ng2

Шаг 1: перейти -> node_modules \ NG2 смарт-таблица \ Lib \ набор данных \ column.js

добавить строки в столбце var, 

this.placeholder = '';

будет выглядеть 

var Column = (function () {
    function Column(id, settings, dataSet) {
        this.id = id;
        this.settings = settings;
        this.dataSet = dataSet;
        this.title = '';
        this.placeholder = '';
        this.type = '';
        this.class = '';
        this.isSortable = false;
        this.isEditable = true;
        this.isFilterable = false;
        this.sortDirection = '';
        this.defaultSortDirection = '';
        this.editor = { type: '', config: {}, component: null };
        this.filter = { type: '', config: {} };
        this.renderComponent = null;
        this.process();
    }

Шаг 2: в том же файле -> Добавьте this.placeholder = this.settings['placeholder']; в Column.prototype.process = function () {},

это будет выглядеть так 

 Column.prototype.process = function () {
        this.title = this.settings['title'];
        this.placeholder = this.settings['placeholder'];
        this.class = this.settings['class'];
        this.type = this.prepareType();
        this.editor = this.settings['editor'];
        this.filter = this.settings['filter'];
        this.renderComponent = this.settings['renderComponent'];
        this.isFilterable = typeof this.settings['filter'] === 'undefined' ? true : !!this.settings['filter'];
        this.defaultSortDirection = ['asc', 'desc']
            .indexOf(this.settings['sortDirection']) !== -1 ? this.settings['sortDirection'] : '';
        this.isSortable = typeof this.settings['sort'] === 'undefined' ? true : !!this.settings['sort'];
        this.isEditable = typeof this.settings['editable'] === 'undefined' ? true : !!this.settings['editable'];
        this.sortDirection = this.prepareSortDirection();
        this.compareFunction = this.settings['compareFunction'];
        this.valuePrepareFunction = this.settings['valuePrepareFunction'];
        this.filterFunction = this.settings['filterFunction'];
    };

шаг 3: перейдите к node_modules \ ng2-smart-table \ components \ filter \ filter-types \ input-filter.component.js и измените строку ниже -> с 

   Component({
        selector: 'input-filter',
        template: "\n    <input [(ngModel)]=\"query\"\n           [ngClass]=\"inputClass\"\n           [formControl]=\"inputControl\"\n           class=\"form-control\"\n           type=\"text\"\n           placeholder=\" {{ column.title}}\" />\n  ",
    }),

до: 

Component({
            selector: 'input-filter',
            template: "\n    <input [(ngModel)]=\"query\"\n           [ngClass]=\"inputClass\"\n           [formControl]=\"inputControl\"\n           class=\"form-control\"\n           type=\"text\"\n           placeholder=\" {{ column.placeholder }}\" />\n  ",
        }),

шаг 4: зайдите в ваш component.ts и добавьте строку ниже в детали вашего столбца, как показано ниже -> 

  columns: {
        ExamID: {
          title: this.translate.get("table.ExamID")["value"],
          **placeholder:"your place holder",**
          type: "string"
        },

вы готовы пойти

0 голосов
/ 09 ноября 2018

Я рассмотрел реализацию этой библиотеки на github, и заполнитель получает ее из параметра column.title, поэтому теоретически вам следует установить этот атрибут для объекта столбца, когда вы объявляете свои столбцы, и библиотека будет использовать его для установить заполнитель.

Тогда нельзя ставить местозаполнитель, отличный от заголовка, кроме взлома JJ

Вы можете взглянуть на: https://github.com/akveo/ng2-smart-table/blob/master/src/ng2-smart-table/components/filter/filter-types/input-filter.component.ts#L15

РЕПО ВОПРОС ДЛЯ ДОБАВЛЕНИЯ ХАРАКТЕРИСТИКИ : https://github.com/akveo/ng2-smart-table/issues/785

PR ОТПРАВЛЕН https://github.com/akveo/ng2-smart-table/pull/900

МОЯ ВИЛКА С ФУНКЦИЕЙ https://github.com/RSginer/ng2-smart-table/tree/rsginer/allow-different-placeholder

Как использовать : 

 settings = {
  columns: {
   id: {
    title: 'ID',
    placeholder: 'Different placeholder',
   },
...