jqGrid 问题笔记(3)

 

所谓问题可能不是jqgrid本身问题，而是浏览器或应用的特殊需要而产生的问题。关于jqgrid，最好的参考是它的官网的wiki 和在线的Demo 。 另外这是 http://forestkqq.iteye.com/ 的原创，本文也会有后续的补充，转载的朋友请标明出处并及时更新。

 

问题索引：

 

18. 如何使用 jqGrid 生成合计行

19. 如何读取 jqGrid 生成的合计行

20. 如何设定单元格的背景色

 

-------------------------------------------------------------------------------------------------

 

18. 如何使用 jqGrid 生成合计行

 

设定 Options.footerrow 为 true ，jqGrid 将在页数据行的底部添加一个尾行。

 

更详细的信息可以参考jqgrid提供的demo - grouping[summary footer]

 

 

19. 如何读取 jqGrid 生成的合计行

 

 

        var crud_jqGrid = jQuery( '#jqgridTest' );
        var rowdata = crud_jqGrid.footerData( 'get' );  // 取得合计行       
        alert( rowdata['sum_Fld1'] );  // 显示合计行的某个字段

 

 

 

20. 如何设定单元格的背景色

 

    调用 setCell 方法可设定单元格的值和属性：

    jQuery("#jqgridTest").setCell (row,col,val,{background:'#ff0000'});

 

    如果只修改单元格的背景色，则需要先读取它的值，然后再进行设定：

 

    var val = jqgrid.getCell( rowId,iCol );
    jqgrid.setCell ( rowId,iCol,val,{background:bkColor});

 

    当然，在实际应用的时候，一般需要在 jqgrid 显示数据的时候，根据单元格的值的不同而显示不同的背景色。所以设定背景色的时机应该在 jqgrid 数据加载完成之后进行，即在 loadComplete 事件中进行各行的特定列的背景色处理。

	jqgrid_using.jqGrid({ 	
		...... ,
		loadComplete: function(){			

	  		// 设定背景色	  		
			var ids = jqgrid_using.getDataIDs();
			for ( var i=0; i<ids.length;i++ ){				
				var val = jqgrid_using.getCell( ids[i],"CheckStatus" );
				var bkcolor = "#FFFFFF";				
				if ( val == "已授权" ) bkcolor = "#00CC00";					
				jqgrid_using.setCell ( ids[i],"CheckStatus",val,{background:bkcolor});
			};			
		},
		multiselect: true
	}); 	

在检索数据列时，也可以使用 getCol 方法。

 

补充说明:   当 setCell 方法的 第三个参数为''时，单元格内的html值将保持不变。这样，我们改变单元格的背景色就不需要再顾及单元格的原有值了：

 

jqgrid_using.setCell ( ids[i],"CheckStatus",'',{background:bkcolor});

 

另外，在 loadComplete 事件中，如果设定了单元格的背景色，那么在鼠标滑动事件和选中行时，该单元格的背景色将保持为这个指定的颜色(如下图)，除非你在相应的事件中再指定相应的样式。造成这个问题的原因是指定的td单元格的样式覆盖了它的上级元素tr所指定的背景色样式。所以为了避免这种现象，不建议随意改变单元格的背景色。 

 

 

 

21. 如何设定单元格的前景色

 

同上面的方法类似。只是如果你不知道前景色的属性名，还是看看下面的例子。

 

jQuery("#jqgridTest").setCell (row,col,'',{color:'#ff0000'});

 

另外一个同时设定前景色和背景色的例子是：

var cell_color={background:'#ffffff',color:'#ff0000'};
jQuery("#jqgridTest").setCell (row,col,'',cell_color);

 

单元格还有什么属性呢 ? 应该还有字体之类的吧，我们在下一个问题中再详述。

 

setCell 方法的官网解释地址是： jqgrid 方法

 

 

 

系列文章列表：

jqGrid 问题笔记(3)

jqGrid 问题笔记(2)

jqGrid 问题笔记(1)

 

 

 

评论

3 楼 leeyea 2015-11-25  

写的很好！

2 楼 forestkqq 2011-10-31  

更详细的信息可以参考jqgrid提供的demo - grouping[summary footer]

1 楼 xiaowugegzh 2011-10-20  

最近在学些jgGrid，想请教你个问题，就是这里你说的合计行问题，能给个demo吗，不要group功能，只要合计功能，谢谢，我QQ418416015