根据行删除css样式

KevinChen · KevinChen

可以考虑用 updatedView事件，这个事件是当Grid表格的view发生变化时触发，触发事件后可以遍历当前显示的单元格，判断样式，再挂载相应的样式。

KevinChen · KevinChen

你好，这个问题需要调研，预计28号上午回复

KevinChen · KevinChen

您好，经测试，只需要给cssClassAll赋值为空字符串即可，参考代码：

row.cssClassAll = "";

复制代码

完整代码：

import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import * as wjGrid from '@grapecity/wijmo.grid';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
//
// generate some random data
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), products = 'Phones,Computers,Cameras,Stereos'.split(','), data = [];
for (var i = 0; i < 200; i++) {
data.push({
id: i,
country: countries[i % countries.length],
product: products[i % products.length],
sales: Math.random() * 10000,
expenses: Math.random() * 5000,
});
}
//
// column properties
var theGrid = new wjGrid.FlexGrid('#theGrid', {
autoGenerateColumns: false,
alternatingRowStep: 0,
columns: [
{ binding: 'id', header: 'ID', width: 50 },
{ binding: 'country', header: 'Country', },
{ binding: 'product', header: 'Product', },
{ binding: 'sales', header: 'Sales', format: 'c0' },
{ binding: 'expenses', header: 'Expenses', format: 'c0' },
],
loadedRows: function (s, e) {
for (var i = 0; i < s.rows.length; i++) {
var row = s.rows[i];
var item = row.dataItem;
if (item.sales > 6000) {
row.cssClassAll = 'high-value';
}
else if (item.sales < 1000) {
row.cssClassAll = 'low-value';
}
}
},
itemsSource: data
});
theGrid.rows.forEach(function(row){
row.cssClassAll = "";
})
//
// toggle alternatingRowStep
document.getElementById('alternatingRowStep').addEventListener('click', function (e) {
theGrid.alternatingRowStep = e.target.checked ? 1 : 0;
});
//
}

复制代码

测试地址:

https://demo.grapecity.com.cn/wi ... ows/Overview/purejs

mtkj · mtkj

KevinChen 发表于 2020-6-28 11:57
您好，经测试，只需要给cssClassAll赋值为空字符串即可，参考代码：

KevinChen · KevinChen

OK，问题已收到，我这边验证一下

mtkj · mtkj

KevinChen 发表于 2020-6-29 17:02
OK，问题已收到，我这边验证一下

这个问题找到解决办法没

KevinChen · KevinChen

你好，我这边没能重现这个问题，你可以尝试用toggleClass方法删除这个class，API参考：

https://www.grapecity.com/wijmo/api/index.html#toggleclass

mtkj · mtkj

KevinChen 发表于 2020-7-7 18:44
你好，我这边没能重现这个问题，你可以尝试用toggleClass方法删除这个class，API参考：

https://www.gra ...

这个方法得有 e.cell ,我页面这个地方没有这个e.cell, 只知道行号

KevinChen · KevinChen

你好，使用
theGridFormatItem.cells.getCellElement(0,3)
可以获取到指定位置单元格的Element，
另外，挂载的high-value样式，如果是在formatItem中挂的样式，
那就不能在初始化FlexGrid后立马执行，
因为浏览器这时还有一个渲染的过程。
建议用updatedView事件，或让步设置样式。

		自动登录	找回密码
密码			立即注册

[已处理] 根据行删除css样式

最佳答案

10 个回复

本帖子中包含更多资源

本帖子中包含更多资源

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章