框架jqGrid只能实现左冻结列,现模仿该方法进行改造,实现右冻结列的功能。
在源代码中只增加一个方法,对框架原功能无影响。
具体用法和关键改造点见代码
注:只需要在源代码中指定位置增加setFrozenColumns_right这个方法,源代码中其它方法均不要改动
/**
*
* @license Guriddo jqGrid JS - v5.0.2 - 2016-01-18
* Copyright(c) 2008, Tony Tomov, tony@trirand.com
* 再见残月
* License: http://guriddo.net/?page_id=103334
*/
(function( factory ) {
"use strict";
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define([
"jquery"
], factory );
} else {
// Browser globals
factory( jQuery );
}
}(function( $ ) {
// jqGrid高度,根据分辨率的改变而手动调整
var jqGridHeight = 500;
//分页查询全部最大展示条数
var maxPagesize = 1000000;
$.jgrid.extend({
setFrozenColumns : function () {
return this.each(function() {
// setFrozenColumns函数实现,再见残月
});
},
/**
* 4948行函数setFrozenColumns后面
* 框架自定义函数,用于数据网格中将指定的列冻结在网格右侧。
* 用法:
* 1、将需要冻结的列放在网格最后边
* 2、给列添加frozen: true属性
* 3、调用jqGrid方法setFrozenColumns_right:$("#jqGrid").jqGrid('setFrozenColumns_right');
* 注:
* 1、冻结列与多表头会产生冲突,可能出现错位问题,不建议二者同时使用
* 2、冻结列必须放在最后面,如果两个冻结列之间有一个非冻结列(无frozen: true属性),则非冻结列之前的冻结列会失效
* 3、冻结列是通过将指定列复制悬浮实现的,为页面样式的美观性,如果列表较窄无横向滚动条时,冻结列将不生效
* author:再见残月
* @returns {*}
*/
setFrozenColumns_right : function () {
return this.each(function() {
if ( !this.grid ) {return;}
// 数据网格数据宽度小于列表所占空间的宽度时(既网格不会出现横向滚动条),右冻结列不生效,再见残月
if (this.p.tblwidth < this.p.width) {return;}
// TODO 重要修改点,再见残月
var $t = this, cm = $t.p.colModel,i=cm.length - 1, len = cm.length, minfrozen = cm.length, frozen= false,
hd= $($t).jqGrid('getStyleUI',$t.p.styleUI+".base",'headerDiv', true, 'ui-jqgrid-hdiv'),
hover = $($t).jqGrid('getStyleUI',$t.p.styleUI+".common",'hover', true);
// TODO treeGrid and grouping Support
if($t.p.subGrid === true || $t.p.treeGrid === true || $t.p.cellEdit === true || $t.p.sortable || $t.p.scroll ) {
return;
}
// TODO 重要修改点,再见残月
// if($t.p.rownumbers) { i++; }
// if($t.p.multiselect) { i++; }
// 从右侧遍历,找到连续带冻结列属性的列的顺序编码
while(i >= 0) {
// from right, no breaking frozen
if(cm[i].frozen === true) {
frozen = true;
minfrozen = i;
} else {
break;
}
i--;
}
// 有配置冻结列
if( minfrozen < len && frozen) {
// 数据网格标题
var top = $t.p.caption ? $($t.grid.cDiv).outerHeight() : 0,
// 数据网格表头高度
hth = $(".ui-jqgrid-htable","#gview_"+$.jgrid.jqID($t.p.id)).height();
// 表头数据数据填充
//headers
if($t.p.toppager) {
top = top + $($t.grid.topDiv).outerHeight();
}
if($t.p.toolbar[0] === true) {
if($t.p.toolbar[1] !== "bottom") {
top = top + $($t.grid.uDiv).outerHeight();
}
}
// 冻结列头部 TODO 重要修改点,再见残月
$t.grid.fhDiv = $('<div style="position:absolute;' + ($t.p.direction === "rtl" ? 'left:0;' : 'right:0;') + 'top:'+top+'px;height:'+hth+'px;" class="frozen-div ' + hd +'"></div>');
// 冻结列数据 TODO 重要修改点,再见残月
$t.grid.fbDiv = $('<div style="position:absolute;' + ($t.p.direction === "rtl" ? 'left:0;' : 'right:0;') + 'top:'+(parseInt(top,10)+parseInt(hth,10) + 1)+'px;overflow-y:hidden" class="frozen-bdiv ui-jqgrid-bdiv"></div>');
$("#gview_"+$.jgrid.jqID($t.p.id)).append($t.grid.fhDiv);
var htbl = $(".ui-jqgrid-htable","#gview_"+$.jgrid.jqID($t.p.id)).clone(true);
// groupheader support - only if useColSpanstyle is false
if($t.p.groupHeader) {
$("tr.jqg-first-row-header, tr.jqg-third-row-header", htbl).each(function(){
$("th:gt("+minfrozen+")",this).remove();
});
var swapfroz = -1, fdel = -1, cs, rs;
$("tr.jqg-second-row-header th", htbl).each(function(){
cs= parseInt($(this).attr("colspan"),10);
rs= parseInt($(this).attr("rowspan"),10);
if(rs) {
swapfroz++;
fdel++;
}
if(cs) {
swapfroz = swapfroz+cs;
fdel++;
}
if(swapfroz === minfrozen) {
fdel = minfrozen;
return false;
}
});
if(swapfroz !== minfrozen) {
fdel = minfrozen;
}
$("tr.jqg-second-row-header", htbl).each(function(){
$("th:gt("+fdel+")",this).remove();
});
} else {
$("tr",htbl).each(function(){
// TODO 重要修改点 删除标记的冻结列之前所有的数据
$("th:lt("+minfrozen+")",this).remove();
// 设置冻结列表头的左边框样式
$(this).parents('table').css('border-left','1px solid rgb(60, 118, 194)');
});
}
$(htbl).width(1);
// resizing stuff
$($t.grid.fhDiv).append(htbl).mousemove(function (e) {
if($t.grid.resizing){ $t.grid.dragMove(e);return false; }
});
if($t.p.footerrow) {
var hbd = $(".ui-jqgrid-bdiv","#gview_"+$.jgrid.jqID($t.p.id)).height();
$t.grid.fsDiv = $('<div style="position:absolute;left:0px;top:'+(parseInt(top,10)+parseInt(hth,10) + parseInt(hbd,10)+1)+'px;" class="frozen-sdiv ui-jqgrid-sdiv"></div>');
$("#gview_"+$.jgrid.jqID($t.p.id)).append($t.grid.fsDiv);
var ftbl = $(".ui-jqgrid-ftable","#gview_"+$.jgrid.jqID($t.p.id)).clone(true);
$("tr",ftbl).each(function(){
$("td:gt("+minfrozen+")",this).remove();
});
$(ftbl).width(1);
$($t.grid.fsDiv).append(ftbl);
}
$($t).bind('jqGridResizeStop.tailong_setFrozenColumns_right', function (e, w, index) {
var rhth = $(".ui-jqgrid-htable",$t.grid.fhDiv);
$("th:eq("+index+")",rhth).width( w );
var btd = $(".ui-jqgrid-btable",$t.grid.fbDiv);
$("tr:first td:eq("+index+")",btd).width( w );
if($t.p.footerrow) {
var ftd = $(".ui-jqgrid-ftable",$t.grid.fsDiv);
$("tr:first td:eq("+index+")",ftd).width( w );
}
});
// 列表数据填充
// data stuff
//TODO support for setRowData
$("#gview_"+$.jgrid.jqID($t.p.id)).append($t.grid.fbDiv);
$($t.grid.fbDiv).bind('mousewheel DOMMouseScroll', function (e) {
var st = $($t.grid.bDiv).scrollTop();
if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
//up
$($t.grid.bDiv).scrollTop( st - 25 );
} else {
//down
$($t.grid.bDiv).scrollTop( st + 25 );
}
e.preventDefault();
});
if($t.p.hoverrows === true) {
$("#"+$.jgrid.jqID($t.p.id)).unbind('mouseover').unbind('mouseout');
}
$($t).bind('jqGridAfterGridComplete.tailong_setFrozenColumns_right', function () {
$("#"+$.jgrid.jqID($t.p.id)+"_frozen").remove();
$($t.grid.fbDiv).height($($t.grid.bDiv).height()-16);
var btbl = $("#"+$.jgrid.jqID($t.p.id)).clone(true);
$("tr[role=row]",btbl).each(function(){
// TODO 重要修改点
$("td[role=gridcell]:lt("+minfrozen+")",this).remove();
// 设置冻结列数据列的左边框样式
$(this).parents('table').css('border-left','1px solid rgb(221, 221, 221)');
});
$(btbl).width(1).attr("id",$t.p.id+"_frozen");
$($t.grid.fbDiv).append(btbl);
// 设置鼠标悬浮效果
if($t.p.hoverrows === true) {
$("tr.jqgrow", btbl).hover(
function(){ $(this).addClass( hover ); $("#"+$.jgrid.jqID(this.id), "#"+$.jgrid.jqID($t.p.id)).addClass( hover ); },
function(){ $(this).removeClass( hover ); $("#"+$.jgrid.jqID(this.id), "#"+$.jgrid.jqID($t.p.id)).removeClass( hover ); }
);
$("tr.jqgrow", "#"+$.jgrid.jqID($t.p.id)).hover(
function(){ $(this).addClass( hover ); $("#"+$.jgrid.jqID(this.id), "#"+$.jgrid.jqID($t.p.id)+"_frozen").addClass( hover );},
function(){ $(this).removeClass( hover ); $("#"+$.jgrid.jqID(this.id), "#"+$.jgrid.jqID($t.p.id)+"_frozen").removeClass( hover ); }
);
}
btbl=null;
});
if(!$t.grid.hDiv.loading) {
$($t).triggerHandler("jqGridAfterGridComplete");
}
$t.p.frozenColumns = true;
}
});
},
destroyFrozenColumns : function() {
return this.each(function() {
// destroyFrozenColumns函数实现
});
},
});
})
);
项目保密原因,无法截图,有兄弟成功用上了,请帮我补张图。。。