技术文章

让我们根据 igGrid 中的单元格值更改整行的颜色。完成的图像将如下所示。

有两种方法。

· 方法 1：使用列模板添加 CSS 类。

· 方法二：在rowsRendered事件中添加CSS类。

方法 1：使用列模板添加 CSS 类

使用模板引擎判断库存数量是否小于20，如果小于20，则在TD中添加CSS，将背景颜色改为粉红色。

设置模板引擎的地方就是columns中的template选项。

在下面的代码片段中，第 12、16 和 20 行是实现。

<样式>

#grid1 > tbody > tr > td.myStyle { 

背景色：粉色；

}

</样式>

...

$ ( "#grid1" ) . igGrid ( {

...

专栏：[

{

headerText: "Product ID" , key: "ProductId" , dataType: "number" ,

模板：“<td {{if ${StockedAmount} < 20}} {{/if}}>${ProductId}</td>”

} ,

{

headerText: "Product Name" , key: "ProductName" , dataType: "string" ,

模板：“<td {{if ${StockedAmount} < 20}} {{/if}}>${ProductName}</td>”

} ,

{

headerText: "stock count"键: "StockedAmount" dataType: "number" ,

模板：“<td {{if ${StockedAmount} < 20}} {{/if}}>${StockedAmount}</td>”

} ,

] ,

...

} ) ;

方法一样品

下载KB1445_ConditionalRowStyling1

方法一参考

模板引擎概述
https://igniteui.com/help/igtemplating-overview

列的模板选项
https://jp.igniteui.com/help/api/2019.1/ui.iggrid#options:columns.template

方法二：在rowsRendered事件中添加CSS类

在呈现行时发生的rowsRendered 事件的事件处理程序中，

1. 获取绘制线条的集合（下面代码片段中的第 13 行，依此类推），

2. 从与每一行关联的元素中取出绑定的数据（第 22 到 28 行），

3. 判断股票数量是否小于20（第33行），

4. 向 TD 添加 CSS，如果小于 20（第 35 行），则背景颜色为粉红色。

<样式>

#grid1 > tbody > tr > td.myStyle { 

背景色：粉色；

}

</样式>

...

$ ( "#grid1" ) . igGrid ( {

...

// rowsRendered 事件的事件处理程序

rowsRendered：函数（evt，ui ）{

// 检索呈现的 TR 元素

var rowTrs = ui.owner.rows ( ) ; _

// 对于每个 TR 元素

$ .each ( rowTrs, function ( index, item ) { 

// 项目存在检查

如果（项目！==未定义&&项目！==空）{

// 获取链接到 TR 元素的元素信息

var elementInfo = ui.owner.getElementInfo ( item ) ; _

// 如果可以检索链接到 TR 元素的元素的信息

if ( elementInfo !== undefined && elementInfo !== null ) {

// 从行 ID 中检索绑定数据

var record = ui.owner.findRecordByKey ( elementInfo.rowId ) ; _ _

// 如果你可以从行 id 中获取绑定数据

如果（记录！==未定义&&记录！==空）{

// 如果“StockedAmount”值小于 20

如果（记录。StockedAmount < 20 ）{ 

// 应用一个使背景颜色变成粉红色的类

$ ( item ) .find ( " td" ) . addClass ( "myStyle" ) ;

}

}

}

}

} ) ;

}

...

} )

方法二样本

下载KB1445_ConditionalRowStyling2

方法二参考

rowsRendered 事件
https://jp.igniteui.com/help/api/2019.1/ui.iggrid#events:rowsRendered

getElementInfo 方法
https://jp.igniteui.com/help/api/2019.1/ui.iggrid#methods:getElementInfo

findRecordByKey 方法
https://jp.igniteui.com/help/api/2019.1/ui.iggrid#methods:findRecordByKey