Как изменить цвета фона заголовка столбца сетки w2ui - PullRequest
Новая
       18

Как изменить цвета фона заголовка столбца сетки w2ui

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

После некоторых поисков я обнаружил, что могу изменить цвет фона заголовков столбцов w2grid.Я хочу сделать таблицу с рабочими / выходными днями и с дополнительной информацией.Хорошо бы уже в заголовке узнать, какой день является рабочим, а какой - отдых

Вот код: 

w2ui[ tab_grd[ 0 ] ].on( 'load', function( event ) 
{
  event.onComplete = function() 
  {
     prep_hdr()
  }
})

подготовка заголовков с функцией: 

days = rsp.days
if ( Object.keys( days ).length > 0 )
{      
  for ( var u in days )
    {
      var col_id = 'd' + days[ u ].day
      var dat_tp = days[ u ].type
      var clr1   = 'white'
      var clr2   = ( dat_tp == 'W' ? '#66d9ff'  : ( dat_tp == 'R' ? '#80ffaa' : '#ff9980' ) )
      var col    = findElement( w2ui[ tab_grd[ 0 ] ].columns, "field", col_id )
      if ( col != -1 )
      {
        var idf = 'td[col="' + col + '"].w2ui-head'; 
        $( idf ).css( { background: 'linear-gradient( ' + clr1 +',' + clr2 + ' )' } )
      }
    }
  }

Работает.

Но столбцы дней - это 31 + общий столбец + некоторые другие столбцы, и они не отображаются одновременно.Если прокрутить горизонтально влево / вправо - моя раскраска заголовков col исчезает.

Как я вижу в источнике w2grid.js, функция scroll (event) перерисовывает сетку, поэтому мои цвета исчезают.

Как я могу решить эту проблему?Как держать мои цвета в заголовках col?

Заранее спасибо

1 Ответ

0 голосов
/ 08 февраля 2019

Воссоздание элементов HTML из-за виртуальной прокрутки действительно может раздражать.

Лучше всего переопределить функцию прокрутки своей собственной, где вы заново добавите стиль в столбец(s): 

$(function () {
    $('#grid').w2grid({
        name: 'grid',
        columns: [
            { field: 'fname', caption: 'First Name', size: '300px' },
            { field: 'lname', caption: 'Last Name', size: '300px' },
            { field: 'dummy1', caption: 'Dummy 1', size: '300px' },
            { field: 'dummy2', caption: 'Dummy 2', size: '300px' },
            { field: 'sdate', caption: 'Dates', size: '300px' }
        ],
        "records": [
        { "recid": 1, "fname": "Joseph", "lname": "Haydn", "sdate": "1732-1809" },
        { "recid": 2, "fname": "Ludwig Van", "lname": "Beethoven", "sdate": "1770-1827" },
        { "recid": 3, "fname": "Wolfgang Amadeus", "lname": "Mozart", "sdate": "1756-1791" },
        { "recid": 4, "fname": "Johann Sebastian", "lname": "Bach", "sdate": "1685-1750" },
        ],
        onRender: function(event){
            event.done(setBgColors);
        },
    });

    w2ui.grid.scroll_bak = w2ui.grid.scroll;
    w2ui.grid.scroll = function(event){
        this.scroll_bak(event);
      setTimeout(setBgColors);
    };

    function setBgColors(){
        $("#grid_grid_column_0").addClass("bg_red");
      $("#grid_grid_column_4").addClass("bg_blue");
    }

});

Fiddle: http://jsfiddle.net/dt3yv2q4/2/

Или вы можете просто отключить виртуальную прокрутку, делая изменения в ваших элементах DOM постоянными: 

$(function () {
    $('#grid').w2grid({
        name: 'grid',
        disableCVS: true,
        columns: [
            { field: 'fname', caption: 'First Name', size: '300px' },
            { field: 'lname', caption: 'Last Name', size: '300px' },
            { field: 'dummy1', caption: 'Dummy 1', size: '300px' },
            { field: 'dummy2', caption: 'Dummy 2', size: '300px' },
            { field: 'sdate', caption: 'Dates', size: '300px' }
        ],
        "records": [
        { "recid": 1, "fname": "Joseph", "lname": "Haydn", "sdate": "1732-1809" },
        { "recid": 2, "fname": "Ludwig Van", "lname": "Beethoven", "sdate": "1770-1827" },
        { "recid": 3, "fname": "Wolfgang Amadeus", "lname": "Mozart", "sdate": "1756-1791" },
        { "recid": 4, "fname": "Johann Sebastian", "lname": "Bach", "sdate": "1685-1750" },
        ],
        onRender: function(event){
            event.done(setBgColors);
        },
    });

    function setBgColors(){
        $("#grid_grid_column_0").addClass("bg_red");
      $("#grid_grid_column_4").addClass("bg_blue");
    }

});

Скрипка: http://jsfiddle.net/dt3yv2q4/3/ или http://jsfiddle.net/0Lkrb19w/

...