//此方法在IE中能正常显示,在火狐中就会出现一些瑕疵,表头和内容会出现对不齐的情况
//jqGrid-htable-colspan
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*用法
* options={
* colspan:[
* {cols:'14,15,16',title:'一级指标体系' },
* {cols:'17,18,19',title:'二级指标体系' }
* ]
* }
* $("#tableId").jqGridTableTHColSpan(options);
*
*
* 仅仅只适用于jqGrid
* */
jQuery.fn.jqGridTableTHColSpan = function(options){
var id="gbox_"+$(this).attr("id");
var colspan=eval(options.colspan);
var thead_tr=$("#"+id+" table thead tr:first");
thead_tr.before(thead_tr.clone());
$("#"+id+" table thead tr:nth-child(1)").hide();
thead_tr.after(thead_tr.clone());
var th_size= $("#"+id+" table thead tr:nth-child(2) th").length;
var allcolspanths=new Array();
for(var i=0;i<colspan.length;i++){
var cols=eval("([" + colspan[i].cols + "])");
var title=colspan[i].title;
var ths=new Array();
var width=0;
for(var k=0;k<cols.length;k++){
allcolspanths.push(cols[k]);
ths[k]=$("#"+id+" table thead tr:nth-child(2)
th:nth-child("+cols[k]+")");
width+=(Number)(ths[k].attr("style").substring(ths[k].attr("style").lastIndexOf(":")+1,ths[k].attr("style").lastIndexOf("px")));
if(k!=0){
ths[k].hide();
}
}
var h=ths[0].html();
var s=ths[0].children(".ui-jqgrid-sortable").html();
var t=s.substring(0,s.indexOf("<"));
var be=h.substring(0,h.indexOf(t));
var af=h.substring(h.indexOf(t)+t.length,h.length);
ths[0].html(be+title+af);
ths[0].attr("style","width:"+width+"px;");
ths[0].attr("colspan",cols.length);
}
//删除不需要合并的列rowspan
for(var m=1;m<=th_size;m++){
for(var n=0;n<allcolspanths.length;n++){
if(allcolspanths[n]==m){
break;
}else if(n==allcolspanths.length-1){
$("#"+id+" table thead tr:nth-child(2) th:nth-child ("+m+")").attr("rowspan",2);
$("#"+id+" table thead tr:nth-child(3) th:nth-child("+m+")").hide();
}
}
}
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
分享到:
相关推荐
NULL 博文链接:https://474904099.iteye.com/blog/1846666
jqgrid合并行、合并列 ... /* 这个代码是解决表头有一点点错位的问题 */ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 2px solid #e2e2e2; }
jqGrid 中的锁定固定的列并且关于jqGrid 中的一些排序的实现细节
jqgrid中文文档API,使用JQGRID
JqGrid中文API文档,包含了基础的JqGrid控件的属性方法事件等,有如何使用JqGrid的Demo.
jgrid中实现显示的列的动态显示值,列可配置生成
NULL 博文链接:https://vipshow.iteye.com/blog/1812381
tableExport 中文修正+jqgrid...解决jqgrid无法获取表头问题;2.jqgrid开头有一空行问题;3.部分格式导出无扩展名问题;4.但xml中文还是乱码,ppt输出不对;5.注意参数大小写问题,必须一致,因此将所有参数名改成了小写。
Jqgrid中文使用手册,直接从jqgrid官网翻译。非常适合查阅
完美实现jqgrid合并单元格,可实现合并行、合并列,具体使用方法有注释说明。
利用jquery的插件jqgrid实现表头合并、分组、合计、例子
jqgrid_demo40-----可用的-使用方法请查看README文件.rar-----------经我修改过的demo40,官网上面demo40下载下来是没法用的,因为里面有些东西是错的,当然我这个demo40还是还有是些不足,比喻说数据库中少表导致...
Jqgrid 中文文档 Jqgrid 属性参数详细解释 Jqgrid 属性大全
var id=$(‘#gridTable').jqGrid(‘getGridParam','selrow'); 如果想要获取选择多行的id,那这些id便封装成一个id数组,那可以使用以下: var ids=$(‘#gridTable').jqGrid(‘getGridParam','selarrrow'); 如果想...
在你开始jqGrid之前,你需要具有基本的JavaScript和jQuery知识。有关jQuery的知识可访问jQuery网站jquery.com。当你已有了这些基础知识后,我们从jqGrid的系统需求开始。
jqGrid 按多个条件 或单个条件进行查询
JqGrid 中文 帮助文档 api jQuery
自定义的用于处理GridView的固定(冻结)表头,单行或多行复杂表头不限,能兼容多种济览器版本,对tableLayout:fixed和auto这两种情况都是支持的。
jqGrid 中文语言js,grid.locale-cn.js
jqGrid_api中文文档.其中有一些案例。方便初学者学习。