所谓问题可能不是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)
- 大小: 9.2 KB
分享到:
相关推荐
jqGrid使用笔记.docx
NULL 博文链接:https://only-xxp.iteye.com/blog/768029
学习jqgrid自己整理的一些笔记,希望对大家有所帮助
博客专用: Jqgrid学习笔记__01__初来乍到 很多时候在网上下载一段代码,结果引用的CSS和JS文件不知道从哪里弄,结果上网下载,不是版本不对,就是完全不对。这里的JS是有对应的代码段的。请参考博客 ====> Jqgrid...
博客专用: Jqgrid学习笔记__01__初来乍到 很多时候在网上下载一段代码,结果引用的CSS和JS文件不知道从哪里弄,结果上网下载,不是版本不对,就是完全不对。这里的CSS是有对应的代码段的。请参考博客 ====> Jqgrid...
主要介绍了jqGrid 学习笔记整理——进阶篇(一 )的相关资料,需要的朋友可以参考下
主要介绍了Java中jqGrid 学习笔记整理——进阶篇(二)的相关资料,需要的朋友可以参考下
JqGrid的基础,我这里就不做介绍了,不知道的可以去看看博客园或Google,最好去看文档。先看效果图: 本Demo可以查询、修改、分组。新增、删除等一些基本功能都可以去JqGrid Demo中找到。 逻辑思路:第一次加载本...
NULL 博文链接:https://jean7155.iteye.com/blog/1835073
Jquery_jqGrid 帮助文档 因为项目中用到了 Jquery_jqGrid 所以自己整理了下,就当是一篇笔记吧。
下面我们将逐步讲解怎么在MVC模式下将MongoDB数据读取,并展示在前台Jqgrid表格上。这个“简易系统”的基本设计思想是这样的:我们在视图层展示表格,Jqgrid相关Js逻辑全部放在一个Js文件中,控制层实现了“增删查改...
主要介绍了jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能),想要学习jQuery的可以了解一下。
jqGrid表格数据修改删除代码.zip
博客专用: Jqgrid学习笔记__01__初来乍到 很多时候在网上下载一段代码,结果引用的CSS和JS文件不知道从哪里弄,结果上网下载,不是版本不对,就是完全不对。这里的CSS是有对应的代码段的。请参考博客 ====> Jqgrid...
博客专用: Jqgrid学习笔记__01__初来乍到 很多时候在网上下载一段代码,结果引用的CSS和JS文件不知道从哪里弄,结果上网下载,不是版本不对,就是完全不对。这里的JS是有对应的代码段的。请参考博客 ====> Jqgrid...
博客专用: Jqgrid学习笔记__01__初来乍到 很多时候在网上下载一段代码,结果引用的CSS和JS文件不知道从哪里弄,结果上网下载,不是版本不对,就是完全不对。这里的JS是有对应的代码段的。请参考博客 ====> Jqgrid...
有兴趣刚需的可以自己下载,非常实用的代码,可以完美运行,有能力的还可以二次修改!