jqGrid基于单元格值为网格中的整条线着色
我知道以前有人问过,但我无法让它运行,我也没有东西可以尝试 如果网格中的一行的值不是1,我想将其着色-为此我使用自定义格式设置程序。格式化程序本身可以工作,这不是问题所在 到目前为止,我在网上找到了多种方法——添加类、直接添加CSS代码、使用jqGrid基于单元格值为网格中的整条线着色,jqgrid,Jqgrid,我知道以前有人问过,但我无法让它运行,我也没有东西可以尝试 如果网格中的一行的值不是1,我想将其着色-为此我使用自定义格式设置程序。格式化程序本身可以工作,这不是问题所在 到目前为止,我在网上找到了多种方法——添加类、直接添加CSS代码、使用setRowData、使用setCell 这里是我的例子——没有一个对我有用(Linux,ff363)——任何指针都会非常感激 27.05.2010_00:00:00-27.05.2010_00:00:00是我的行id <style> .stat
setRowData
、使用setCell
这里是我的例子——没有一个对我有用(Linux,ff363)——任何指针都会非常感激
27.05.2010_00:00:00-27.05.2010_00:00:00是我的行id
<style>
.state_inactive {
background-color: red !important;
}
.state_active {
background-color: green !important;
}
</style>
function format_state (cellvalue, options, rowObject)
{
var elem='#'+options.gid;
if (cellvalue != 1) {
jQuery('#list2').setRowData(options.rowID,'',
{'background-color':'#FF6F6F'});
jQuery('#list2').setRowData('27.05.2010_00:00:00-27.05.2010_00:00:00',
'',{'background-color':'#FF6F6F'});
for (var cnt=0;cnt<rowObject.length;cnt=cnt+1) {
jQuery(elem).setCell(options.rowId,cnt,'','state_inactive','');
jQuery(elem).setCell('"'+options.rowId+'"',cnt,'','state_inactive');
jQuery(elem).setCell('"'+options.rowId+'"',cnt,'5',
{'background-color':'#FF6F6F'},'');
}
} else {
for (var cnt=0;cnt<rowObject.length;cnt=cnt+1) {
jQuery(elem).setCell(options.rowId,cnt,'','state_active','');
}
}
<!-- dont modify, we simply added the class above-->
return cellvalue;
}
.state_非活动{
背景色:红色!重要;
}
.state_激活{
背景色:绿色!重要;
}
函数格式\状态(单元格值、选项、行对象)
{
var elem='#'+options.gid;
如果(单元格值!=1){
jQuery('#list2').setRowData(options.rowID',
{'background-color':'#FF6F6F'});
jQuery(“#list2”).setRowData('27.05.2010_00:00:00-27.05.2010_00:00:00',
'',{'background-color':'#FF6F6F'});
对于(var cnt=0;cnt,我建议您尝试这样做。
这实际上将允许您访问整行
afterInsertRow: function(rowid, aData, rowelem)
{
if (aData.field =='value'){
jQuery("#list1").setCell(rowid,'message','',{color:'red'});
}
}
在我看来,您的主要问题是没有设置“背景色”样式。您应该从行中删除“ui小部件内容”类(从
元素)
在添加类state\u activ
或state\u inactive
之前,因为jQuery UI类“UI小部件内容”定义为。UI小部件内容类似
{
border: 1px solid #fad42e;
background: #fbec88 url(images/ui-bg_flat_55_fbec88_40x100.png) 50% 50% repeat-x;
color: #363636;
}
只有设置CSS'background-color'
时,你的背景色才不会真正改变
var trElement = jQuery("#"+ options.rowId,jQuery('#list2'));
trElement.removeClass('ui-widget-content');
trElement.addClass('state_active');
对于任何想在这个话题上找到真正答案的人
这管用
afterInsertRow : function(rowid, rowdata)
{
if (rowdata.colmodelnamefield == "something")
{
$(this).jqGrid('setRowData', rowid, false, 'StyleCss');
}
}
在另一个文件样式表中,自定义CSS
.StyleCss{ background-color:red !important; }
别忘了!重要的是覆盖主题用户界面滚轮我已经尝试了上述解决方案,但我认为其中一个是正确的:
afterInsertRow : function(rowid, rowdata)
{
if (parseFloat(rowdata.amount) > 500)
{
$(this).jqGrid('setRowData', rowid, false, {color:'red'});
}
}
如果css类位于撇号之间,则会被覆盖到原始类(您可以很容易地看到使用firebug):
用{color:'red'}更正:
<tr class="ui-widget-content jqgrow ui-row-ltr" style="background: none repeat scroll 0pt 0pt red;" ...>
根据setRowData的文档:
如果cssprop参数是字符串,我们使用addClass向行中添加类。如果参数是object,我们使用css添加css属性
我尝试了很长一段时间的解决方案,最后从所有的例子和建议中结合了一些对我有用的东西。当然,你需要定义自定义css样式来实现这一点。希望这能有所帮助,尽管它可能会产生潜在的速度问题
loadComplete:function(){
var rowIDs=jQuery(“#grid”).getDataId();
对于(vari=0;i5){
removeClass('ui-widget-content');
addClass('rowColorRED');
}否则{
if(rowData.statusID==1){
removeClass('ui-widget-content');
addClass('rowColorGREEN');
}
}
}
},
非常简单且有效假设其他单元格值为Y/N
下面的代码进入loadComplete事件
var rowIDs = jQuery("#GRID").getDataIDs(); //Get all grid row IDs
for (var i = 0; i < rowIDs.length; i++) { //enumerate rows in the grid
var rowData = $("#GRID").jqGrid('getRowData', rowIDs[i]);
//If condition is met (update condition as req)
if (rowData["COLNAME_CHECKED"] == "N") {
//set cell color if other cell value is matching condition
$("#GRID").jqGrid('setCell', rowIDs[i], "COLNAMEModified", "", { color: 'red' });
//for row color, update style. The code is given above by **Ricardo Vieira**
}
}
var rowIDs=jQuery(#GRID”).getDataIDs();//获取所有网格行ID
对于(var i=0;i
听起来合乎逻辑,但不幸的是它不起作用-ui小部件内容类未被删除。我将其放入格式化程序调用和gridComplete函数中-无:(@Thomas.InloadComplete
中的行已填充,而gridComplete
中的行未填充。在我看来,它在loadComplete
中工作。我建议您始终使用gridview:true
wnd no time useafterInsertRow
事件,这会破坏gridview:true
参数的快速执行行为。您可以调用jQuery(“#list2”).getDataIDs();
内部或loadComplete
,使用getCell()
测试单元格值,然后删除并添加该类。它仍然不起作用:(很明显,它的b/c jquery选择器找不到行id-虽然id在那里,但对象为空…id=25.05.2010_00:00-26.05.2010_00:00:00可能是由于id
中的特殊符号而出现了这样的问题。您使用了“:”、“-”和“.”。jqGrid在id中的一些符号出现了问题de>。要验证这一点,请尝试使用更简单的ID形式。此外,一些字符对jQuery具有空间意义。因此,类似于jQuery(“#”+options.rowId)的结构
被jQuery解释可能是错误的。如果所有的问题都能用简单的id解决,那么你可以对id值进行某种形式的编码/解码。@BhavikAmbani:一般来说,这是一个新问题。如果你不在注释中问这个问题,对其他用户来说会更好,因为这样的答案在搜索过程中找不到。对于你的问题:你可以对边框使用transparent
color。例如.ui-jqgrid tr.ui-row-ltr td{border right color:transparent;}
删除单元格之间的垂直边框。使用相同的方法.ui-jqgrid tr.ui-row-ltr td{边框底部颜色:transparent;}
将删除行之间的边框。显示如何删除列标题中的边框。这至少有效:)我将尝试使用setRowData而不是setCell,我希望从执行角度来看这更便宜-这在我的测试vm上花费了相当长的时间…同意。这一点
<tr class="ui-widget-content jqgrow ui-row-ltr" style="background: none repeat scroll 0pt 0pt red;" ...>
loadComplete: function() {
var rowIDs = jQuery("#grid").getDataIDs();
for (var i=0;i<rowIDs.length;i=i+1){
rowData=jQuery("#grid").getRowData(rowIDs[i]);
var trElement = jQuery("#"+ rowIDs[i],jQuery('#grid'));
if (rowData.statusID > 5) {
trElement.removeClass('ui-widget-content');
trElement.addClass('rowColorRED');
}else{
if (rowData.statusID == 1){
trElement.removeClass('ui-widget-content');
trElement.addClass('rowColorGREEN');
}
}
}
},
afterInsertRow: function (rowid, rowdata) {
$(grid).jqGrid('setRowData', rowid, false, { background: 'red' });
}
var rowIDs = jQuery("#GRID").getDataIDs(); //Get all grid row IDs
for (var i = 0; i < rowIDs.length; i++) { //enumerate rows in the grid
var rowData = $("#GRID").jqGrid('getRowData', rowIDs[i]);
//If condition is met (update condition as req)
if (rowData["COLNAME_CHECKED"] == "N") {
//set cell color if other cell value is matching condition
$("#GRID").jqGrid('setCell', rowIDs[i], "COLNAMEModified", "", { color: 'red' });
//for row color, update style. The code is given above by **Ricardo Vieira**
}
}