如何更改 w2ui 网格列 header 背景颜色
How to change w2ui grid column header background colors
经过一些搜索,我发现我可以更改 w2grid 列 header 的背景颜色。我想用 work/rest 天完成 table 并提供更多信息。很高兴进入 header 已经知道哪一天是工作日,哪一天 - 休息
这里是一些代码:
w2ui[ tab_grd[ 0 ] ].on( 'load', function( event )
{
event.onComplete = function()
{
prep_hdr()
}
})
正在准备 headers 函数:
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+总列数+其他一些列,它们并不是同时出现的。如果水平滚动到 left/right - 我对 col headers 的着色消失了。
正如我在 w2grid.js 源代码中看到的那样 - 滚动(事件)函数正在重绘网格,这就是我的颜色消失的原因。
我该如何解决这个问题?如何在 col headers 中保持我的颜色?
提前致谢
由于虚拟滚动而重新创建 HTML 元素确实很烦人。
你最好的选择是用你自己的覆盖滚动功能,在那里你重新添加样式到列:
$(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");
}
});
Fiddle: http://jsfiddle.net/dt3yv2q4/3/ or http://jsfiddle.net/0Lkrb19w/
经过一些搜索,我发现我可以更改 w2grid 列 header 的背景颜色。我想用 work/rest 天完成 table 并提供更多信息。很高兴进入 header 已经知道哪一天是工作日,哪一天 - 休息
这里是一些代码:
w2ui[ tab_grd[ 0 ] ].on( 'load', function( event )
{
event.onComplete = function()
{
prep_hdr()
}
})
正在准备 headers 函数:
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+总列数+其他一些列,它们并不是同时出现的。如果水平滚动到 left/right - 我对 col headers 的着色消失了。
正如我在 w2grid.js 源代码中看到的那样 - 滚动(事件)函数正在重绘网格,这就是我的颜色消失的原因。
我该如何解决这个问题?如何在 col headers 中保持我的颜色?
提前致谢
由于虚拟滚动而重新创建 HTML 元素确实很烦人。
你最好的选择是用你自己的覆盖滚动功能,在那里你重新添加样式到列:
$(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");
}
});
Fiddle: http://jsfiddle.net/dt3yv2q4/3/ or http://jsfiddle.net/0Lkrb19w/