首页 › 求助中心 › 根据行删除css样式

mtkj 发表于 2020-6-24 17:38:18

根据行删除css样式

KevinChen 发表于 2020-6-24 17:38:19

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

KevinChen 发表于 2020-6-24 18:34:40

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

KevinChen 发表于 2020-6-28 11:57:31

您好，经测试，只需要给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,
            product: products,
            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;
                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/wijmo/demos/Grid/Styling/Rows/Overview/purejs

mtkj 发表于 2020-6-29 15:57:42

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

KevinChen 发表于 2020-6-29 17:02:01

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

mtkj 发表于 2020-7-7 15:08:03

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

这个问题找到解决办法没

KevinChen 发表于 2020-7-7 18:44:15

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

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

mtkj 发表于 2020-7-9 16:28:41

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

https://www.gra ...

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

KevinChen 发表于 2020-7-9 18:32:13

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

查看完整版本: 根据行删除css样式