Динамическое определение ширины угловых столбцов данных / Clarity Datagrid с использованием Jquery - Как? - PullRequest
Новая
       6

Динамическое определение ширины угловых столбцов данных / Clarity Datagrid с использованием Jquery - Как?

0 голосов
/ 02 октября 2018

Я новичок в angular и изучаю Clarity как компонент пользовательского интерфейса. Первое, с чем я играл, был Clarity 'Datagrid'.

Здесь я хотел создать общий компонент, который можно настроить с помощьючто-то вроде 'columnModel' и 'data', оба из которых будут получены из бэкэнда.который будет использоваться в структурных директивах угловых компонентов (* ngFor и т. д.) для отображения сетки данных.Вот то, что я придумал ...

Определения в app.component.ts 

columnModel = [
{header:'Id',dataIndex:'id','width':50},
{header:'Name',dataIndex:'name','width':100},
]

data : [
          {id: 1, name: 'Name1',  age: 1, rem: 'aaassssssssssssss'} ,
          { id: 2, name: 'Name2', age: 1, rem: 'aaassssssssssssss'},
          { id: 3, name: 'Name3', age: 1, rem: 'aaassssssssssssss'},
]

Так вот, что я сделал. (из-за отсутствия лучшего понимания Clarity n Angular, возможно) .. Я использовал jQuery ....

В 'ngOnInit' хост-компонента я использовал jquery, чтобы установить 'width' of 'data-столбцы 'и' ячейки данных 'в каждой строке результатов .. на основе' colModel 'выше .. Кажется, РАБОТАЕТ !!!!

jQuery Code: 

ngOnInit() {

const jqModel = this.colModel;

$(document).ready(function() {


    $(".datagrid-column").each(function(indx) {

       $(this).attr("style",function(i,v){return "max-width:" + 
                 jqcolModel[indx].width +"px;width:" + 
                               jqcolModel[indx].width+"px;"});

    });


    $(".datagrid-row-master").each(function(indx) {

       $(this).children().each(function(indx) {
           $(this).attr("style",function(i,v){return "max-width:" + 
                  jqcolModel[indx].width +"px;width:" +                  
                                         jqcolModel[indx].width+"px"});
       });

  });
}

Мой вопрос к вам, эксперты: 'Это лучшая практика?' ИЛИ Есть ли лучший способ добиться этого ..

Заранее спасибо за руководство.

1 Ответ

0 голосов
/ 03 октября 2018

Я собираюсь разделить ответ на две части.Первая часть - это то, как я начал бы создавать сетку данных, которая была бы конфигурируемой , как описано в вопросе.Вторая часть - мое мнение об использовании jQuery с Angular и изучении Angular в целом.

Часть 1

Таблица ясности является декларативной.Это означает, что вы объявляете только то, что вам нужно для вашего варианта использования.Например, если вам нужен нижний колонтитул или фильтр, вы добавляете нижний колонтитул или фильтр, как описано в документации, а сетка данных позаботится обо всем остальном.

В вашем конкретном случае, кажется, вам нужна модель для установки столбцаwidths, поэтому я бы использовал встроенную привязку, которую обеспечивает angular, объявив привязку к свойству собственного стиля для ширины, например:

<clr-dg-column [style.width.px]="indexLookup('id')">ID</clr-dg-column>

Обратите внимание на скобки вокруг style.width.px ... который указывает Angular связываться со значением, предоставленным функцией indexLookup.Функция поиска просто уменьшает columnModel, как указано выше, для предоставленного значения индекса.

Вот простой StackBlitz, показывающий документ для предоставленного вами описания / кода: https://stackblitz.com/edit/clarity-dark-theme-v013-zxh5ks

Часть 2

IMO - вы бы помогли себе большев конечном итоге, сосредоточившись только на Angular.По моему опыту с приложениями AngularJS, jQuery был причиной плохого опыта разработчиков.Я думаю, что это все еще относится к приложениям, созданным с помощью Angular.Был крайне сомнительный вопрос SO о мышлении в AngularJS, и я полагаю, что многое из написанного автором по-прежнему применимо к Angular, даже если семантика Angular и AngularJS различна.

Существуетмногое понять в современной угловой структуре.ИМО, я бы сосредоточился на небольших легко усваиваемых частях и освоил их, прежде чем пытаться добавить другие модули или библиотеки для решения проблемы.Например, вот три области, на которых вы могли бы сосредоточиться, чтобы расширить знания некоторых основных вещей, предоставляемых Angular:

  • Привязка данных : что я могу привязать в компоненте или HTMLElement?Как это работает с @Inputs и @Outputs?Каков эффект привязки к динамическому значению и что происходит при изменении значения?
  • @Inputs и @Outputs: что это такое?Почему вы хотите их использовать?
  • Жизненный цикл компонентов : Какие имеются крючки жизненного цикла?Когда они вызваны и почему ?Каковы некоторые распространенные случаи использования для привязки к одному из хуков жизненного цикла?

Я не знаю, прошли ли вы через Angular tutorial , но он получил некоторые ответыкусками размером в укус, которые легко перевариваются за один или два сеанса.

Когда я впервые начал применять свои знания AngularJS к Angular, сначала документы казались неприступными.Я нашел, что стоит потратить время (часто) вернуться к шпаргалке и Основам / Компонентам и шаблонам и перечитать содержимое, поскольку я все больше и больше работал с фреймворкоми нужно было использовать больше вещей, которые он предоставляет.Когда я впервые начал работать с Angular, я делал это несколько раз в неделю, поскольку это помогло мне стать продуктивным.

Надеемся, что POC stackblitz поможет вам понять, как вы используетеcase (динамическая установка ширины столбцов для сетки данных Clarity) может быть выполнена без jQuery.Наконец, я надеюсь, что мой опыт изучения Angular docs поможет вам найти лучший способ изучения фреймворка.

...