Блог

Заголовок столбца имеет класс «.slick-имя столбца».

Я добавил этот jquery —

 var text = $(".slick-column-name").text();
$(".slick-column-name").tooltip({ title: text });
 

Но в каждой всплывающей подсказке отображается имя каждого столбца ( например, идентификатор , описание, заголовок являются заголовками столбцов, поэтому всплывающая подсказка для каждого заголовка столбца отображается как «Заголовок описания идентификатора»).

Обратите внимание, что я автор Angular-Slickgrid, и, как упоминалось в комментарии в предыдущем ответе, Angular-Slickgrid-это оболочка поверх SlickGrid, которая была создана несколько лет назад (когда jQuery/jQueryUI были всей шумихой), и поэтому jQuery-это глубокая зависимость.

Теперь, чтобы сосредоточиться на вашем вопросе, если мы будем искать непосредственно в коде класс css, который вы определили, мы увидим эту строку со следующим кодом

 $("<div class='ui-state-default slick-group-header-column' />")
            .html("<span class='slick-column-name'>"   m.name   "</span>")
            .attr("id", ""   uid   m.id)
            .attr("title", m.toolTip || "")
            .data("column", m)
            .addClass(m.headerCssClass || "")
            .addClass(hasFrozenColumns() amp;amp; (columnsLength - 1) > options.frozenColumn? 'frozen': '')
            .appendTo(hasFrozenColumns() amp;amp; (columnsLength - 1) > options.frozenColumn? $groupHeadersR[index]: $groupHeadersL[index]);
}
 

о, посмотри на это… Там уже есть toolTip атрибут, так откуда же это взялось? Это опция в определении столбца (интерфейс столбца в угловой сетке)

Итак, короткий ответ таков… просто используйте его, сделав свой toolTip таким же, как ваш name , и вы должны быть готовы к работе

 this.columnDefinitions = [
  { id: 'firstName', field: 'firstName', name: 'First Name', toolTip: 'First Name Tooltip' }, 
  // ...
  }
];
 

Это должно сработать… обратите внимание, что я не тестировал его, но я просто проверил код, чтобы найти ответ. Всегда хорошо посмотреть непосредственно на код, вы найдете много ответов на эти вопросы.

Редактировать

Я попробовал это, и это действительно работает так, как задумывалось с toolTip собственностью

var text = $(".slick-column-name").text(); вернет весь текст для ВСЕХ столбцов. Таким образом, вы получите текст для всех элементов этого класса.

Поэтому, если вы выполните это с помощью: console.log(text) вы увидите все заголовки столбцов, выводимые на консоль разработчика. Именно этого и следовало ожидать!

Похоже, у вас есть некоторое несоответствие в том, что здесь может сделать jQuery — $ селектор получает ВСЕ элементы с этим именем класса и недостаточно интуитивно понятен, чтобы понять, что вы хотите получить соответствие 1:1 между текстом и заголовком столбца.

То, что вы хотите сделать вместо этого, — это:

1. получить все заголовки столбцов (НЕ ТЕКСТ)
2. просмотрите каждый заголовок столбца и установите подсказку имя столбца в текст заголовка столбца.

Я не на 100% знаком с slickgrid, но это должно дать вам представление:

 // I'm using $ in the variable name to label this element as a jQuery extended variable
var $columnNames = $(".slick-column-name");
$columnNames.each(function(elem) {
    // this represents a single column header
    var $elem = $(elem);
    // gets the individual text for a header
    var text = $elem.text();
    // we grab the CLOSEST parent element that matches ".slick-column-name" and set the tooltip
    var $columnHeading = $elem.closest(".slick-column-name").tooltip({ title: text });
});
 

Я не проверял код, но это должно направить вас по нужному пути.

Теперь я предполагаю, что вы имеете в виду УГЛОВУЮ СЕТКУ (случаются ошибки в написании!) — вам следует избегать смешивания jQuery с Angular. Смешивание этих двух может привести к неожиданным побочным эффектам из-за повторного рендеринга (представьте, что всплывающие подсказки работают одну минуту, затем вы вносите изменения, и всплывающие подсказки исчезают, когда что-то меняется!)

Проверка репозитория github для Angular SlickGrid: https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/grid-headerbutton.component.ts

Похоже, что есть опция всплывающей подсказки, которую вы также можете использовать для этого с помощью Angular (их демонстрационный пример выглядит здесь: https://ghiscoding.github.io/Angular-Slickgrid/#/headerbutton )