前提・実現したいこと
JavascriptのSlickGridにて特定の条件にて行単位のCSSを変更したいのですが、
実装方法が分からなく困っています。
★部分で該当行に対してCSSを追加する事はできたのですが、設定済みのCSSを削除する実装方法が分からなく困っています。
★の条件に該当した際に、設定済みのCSSを削除する方法はありますでしょうか。
2021/12/13
質問が分かりづらく申し訳ありません。
HTML側のソースとCSS側のソースも記載しました。
HTMLのソースは、javascriptの★部分の条件反映後の内容です。
alertrowというCSSを反映させたいのですが、
既にoddというCSSがあるとalertrowの色設定が有効にならないので、
oddというCSS設定を削除したいです。もしくは他の色設定方法があるのであればご教示頂きたいです。
該当のソースコード
javascript
1function createGridWithMetadata(gridId, columns, data, options, pager) { 2 var dataView = new Slick.Data.DataView(); 3 dataView.beginUpdate(); 4 dataView.setItems(data); 5 dataView.endUpdate(); 6 7 var gridObj; 8 dataView.setPagingOptions({ pageSize: 10 }); 9 new Slick.Controls.Pager(dataView, gridObj, pager); 10 11 dataView.onRowCountChanged.subscribe(function (e, args) { 12 gridObj.updateRowCount(); 13 gridObj.render(); 14 }); 15 16 dataView.onPagingInfoChanged.subscribe(function (e, args) { 17 var offset = args.pageSize * args.pageNum; 18 gridObj.rowOffset = offset; 19 grid.getSelectionModel().setSelectedRanges([]); 20 }); 21 22 dataView.onRowsChanged.subscribe(function (e, args) { 23 gridObj.invalidateRows(args.rows); 24 gridObj.render(); 25 }); 26 27 dataView.getItemMetadata = function (row) { 28 item = dataView.getItem(row); 29 if (item.columnInventory != undefined && item.stockQty != undefined && item.orderQty != undefined) { 30 var Qty = item.stockQty - item.orderQty; 31 if (Qty < 0) { 32 //★ 33 return { cssClasses: 'alertrow' } 34 } 35 } 36 } 37 gridObj = new Slick.Grid(gridId, dataView, columns, options); 38 return gridObj; 39}
CSS
1.odd { 2 background-color:yellow; 3} 4.alertrow { 5 background-color:indianred; 6}
HTML
1<div class="odd alertrow" style="top:120px"> 2 <div class="slick-cell l0 r0"><a href="#s" onclick="linkClick(4);" data-toggle="modal" data-target="#s" style="text-decoration: underline; color:blue;">532978</a></div> 3 <div class="slick-cell l1 r1">商品A</div> 4 <div class="slick-cell l2 r2 text-right">6</div> 5 <div class="slick-cell l3 r3 text-right">15</div> 6 <div class="slick-cell l4 r4 text-right">-9</div> 7</div>
回答1件
あなたの回答
tips
プレビュー