jqgrid冻结前后列

jqgrid冻结列3步设置：

cellEdit=true的时候frozencolumn是无效

第一步设置colModel 列内的 frozen: true；

第二步设置表格初始时宽度 shrinkToFit: false,

第三步在最后设置 jQuery("#table").jqGrid(‘setFrozenColumns’);冻结前列
或
第三步在最后设置 jQuery("#table").jqGrid(‘setTableFrozenColumns’);冻结前后列

var _colmodel=[ {name:"id",index:"id", width:80,hidden:true,frozen : true,tfixed: 'left'},//冻结列，从第一列开始frozen : true,tfixed: 'left'
{name:"operate",index:"operate",frozen : true,tfixed: 'right',}];//冻结列，从最后一列开始frozen : true,tfixed: 'right'

demo
在源码里添加方法setTableFrozenColumns

setTableFrozenColumns : function () {return this.each(function() {if ( !this.grid ) {return;}var $t = this, cm = $t.p.colModel,i=0,l=0, len = cm.length, maxfrozen = -1,maxleftfrozen = 0, maxrightfrozen = 0, frozen= false,leftarr=[],rightarr=[];// TODO treeGrid and grouping  Supportif($t.p.subGrid === true || $t.p.treeGrid === true || $t.p.cellEdit === true || $t.p.sortable || $t.p.scroll ){return;}if($t.p.multiselect) { i++;}if($t.p.rownumbers) { i++;}for (var l=0;l<len;l++ ) {if (cm[l].frozen === true && cm[l].tfixed === 'left') {maxleftfrozen =i;maxleftfrozen ++;frozen = true;}if (cm[l].frozen === true && cm[l].tfixed === 'right') {maxrightfrozen =l - 1;maxrightfrozen ++;frozen = true;}}// get the max index of frozen while(i<len){// from left, no breaking frozenif(cm[i].frozen === true){frozen = true;maxfrozen = i;} else {break;}i++;}if( maxfrozen>=0 && frozen) {var top = $t.p.caption ? $($t.grid.cDiv).outerHeight() : 0,hth = $(".ui-jqgrid-htable","#gview_"+$.jgrid.jqID($t.p.id)).height();//headersif($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();}}//top:'+top+'px;$t.grid.leftfhDiv = $('<div style="position:absolute;left:0px;top:1px; " class="frozen-div ui-state-default ui-jqgrid-hdiv left-frozen-hdiv"></div>');$t.grid.leftfbDiv = $('<div style="position:absolute;left:0px;top:'+(parseInt(top,10)+parseInt(hth,10))+'px;overflow-y:hidden;    z-index: 11;background-color: #fff;" class="frozen-bdiv ui-jqgrid-bdiv left-frozen-bdiv"></div>');$t.grid.rightfhDiv = $('<div style="position:absolute;right:0px;top:0px; " class="frozen-div ui-state-default ui-jqgrid-hdiv right-frozen-hdiv"></div>');$t.grid.rightfbDiv = $('<div style="position:absolute;right:0px;top:'+(parseInt(top,10)+parseInt(hth,10))+'px;overflow-y:hidden;  z-index: 11;background-color: #fff;" class="frozen-bdiv ui-jqgrid-bdiv right-frozen-bdiv"></div>');$("#gview_"+$.jgrid.jqID($t.p.id)).append($t.grid.leftfhDiv);$("#gview_"+$.jgrid.jqID($t.p.id)).append($t.grid.rightfhDiv);var lefthtbl = $(".ui-jqgrid-htable","#gview_"+$.jgrid.jqID($t.p.id)).clone(true);var righthtbl = $(".ui-jqgrid-htable","#gview_"+$.jgrid.jqID($t.p.id)).clone(true);// groupheader support - only if useColSpanstyle is falseif($t.p.groupHeader) {$("tr.jqg-first-row-header, tr.jqg-third-row-header", lefthtbl).each(function(){$("th:gt("+maxfrozen+")",this).remove();});var swapfroz = -1, fdel = -1, cs, rs;$("tr.jqg-second-row-header th", lefthtbl).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 === maxfrozen) {return false;}});if(swapfroz !== maxfrozen) {fdel = maxfrozen;}$("tr.jqg-second-row-header", lefthtbl).each(function(){$("th:gt("+fdel+")",this).remove();});} else {$("tr",lefthtbl).each(function(){$("th:gt("+maxleftfrozen+")",this).remove();});$("tr",righthtbl).each(function(){$("th:lt("+maxrightfrozen+")",this).remove();});}$(lefthtbl).width(1);$(righthtbl).width(1);// resizing stuff$($t.grid.leftfhDiv).append(lefthtbl).mousemove(function (e) {if($t.grid.resizing){ $t.grid.dragMove(e);return false; }});$($t.grid.rightfhDiv).append(righthtbl).mousemove(function (e) {if($t.grid.resizing){ $t.grid.dragMove(e);return false; }});$($t).bind('jqGridResizeStop.setTableFrozenColumns', function (e, w, index) {var rhth = $(".ui-jqgrid-htable",$t.grid.leftfhDiv);$("th:eq("+index+")",rhth).width( w ); var btd = $(".ui-jqgrid-btable",$t.grid.leftfbDiv);$("tr:first td:eq("+index+")",btd).width( w ); });// sorting stuff$($t).bind('jqGridSortCol.setTableFrozenColumns', function (e, index, idxcol) {var previousSelectedTh = $("tr.ui-jqgrid-labels:last th:eq("+$t.p.lastsort+")",$t.grid.leftfhDiv), newSelectedTh = $("tr.ui-jqgrid-labels:last th:eq("+idxcol+")",$t.grid.leftfhDiv);$("span.ui-grid-ico-sort",previousSelectedTh).addClass('ui-state-disabled');$(previousSelectedTh).attr("aria-selected","false");$("span.ui-icon-"+$t.p.sortorder,newSelectedTh).removeClass('ui-state-disabled');$(newSelectedTh).attr("aria-selected","true");if(!$t.p.viewsortcols[0]) {if($t.p.lastsort !== idxcol) {$("span.s-ico",previousSelectedTh).hide();$("span.s-ico",newSelectedTh).show();}}});// data stuff//TODO support for setRowData$("#gview_"+$.jgrid.jqID($t.p.id)).append($t.grid.leftfbDiv);$("#gview_"+$.jgrid.jqID($t.p.id)).append($t.grid.rightfbDiv);$($t.grid.bDiv).scroll(function () {$($t.grid.leftfbDiv).scrollTop($(this).scrollTop());$($t.grid.rightfbDiv).scrollTop($(this).scrollTop());});if($t.p.hoverrows === true) {$("#"+$.jgrid.jqID($t.p.id)).unbind('mouseover').unbind('mouseout');}$($t).bind('jqGridAfterGridComplete.setTableFrozenColumns', function () {$("#"+$.jgrid.jqID($t.p.id)+"_frozen").remove();$("#"+$.jgrid.jqID($t.p.id)+"_rightfrozen").remove();/*console.log($($t.grid.leftbDiv).height()-16)$($t.grid.leftfbDiv).height($($t.grid.leftbDiv).height()-16);$($t.grid.rightfbDiv).height($('.left-frozen').height());*/var leftbtbl = $("#"+$.jgrid.jqID($t.p.id)).clone(true);var rightbtbl = $("#"+$.jgrid.jqID($t.p.id)).clone(true);$("tr[role=row]",leftbtbl).each(function(){$("td[role=gridcell]:gt("+maxleftfrozen+")",this).remove();});$("tr[role=row]",rightbtbl).each(function(){$("td[role=gridcell]:lt("+maxrightfrozen+")",this).remove();});$(leftbtbl).width(1).attr("id",$t.p.id+"_frozen");$(rightbtbl).width(1).attr("id",$t.p.id+"_rightfrozen");$($t.grid.leftfbDiv).append(leftbtbl);$($t.grid.rightfbDiv).append(rightbtbl);if($t.p.hoverrows === true) {$("tr.jqgrow", "#"+$.jgrid.jqID($t.p.id)).hover(function(){$(this).addClass("ui-state-hover"); // $("#"+$.jgrid.jqID(this.id)).addClass("ui-state-hover");$("#"+$.jgrid.jqID(this.id), "#"+$.jgrid.jqID($t.p.id)+"_frozen").addClass("ui-state-hover");$("#"+$.jgrid.jqID(this.id), "#"+$.jgrid.jqID($t.p.id)+"_rightfrozen").addClass("ui-state-hover");},function(){ $(this).removeClass("ui-state-hover"); $("#"+$.jgrid.jqID(this.id), "#"+$.jgrid.jqID($t.p.id)+"_frozen").removeClass("ui-state-hover");$("#"+$.jgrid.jqID(this.id), "#"+$.jgrid.jqID($t.p.id)+"_rightfrozen").removeClass("ui-state-hover");// $("#"+$.jgrid.jqID(this.id), "#"+$.jgrid.jqID($t.p.id)+"_leftfrozen", "#"+$.jgrid.jqID($t.p.id)+"_rightfrozen").removeClass("ui-state-hover");});}leftbtbl=null;rightbtbl=null;});if(!$t.grid.hDiv.loading) {$($t).triggerHandler("jqGridAfterGridComplete");}$t.p.frozenColumns = true;}});},

修改源码
2196行:方法setHeadCheckBox

setHeadCheckBox = function ( checked ) {//追加代码var rightfid = ts.p.frozenColumns ? ts.p.id+"_rightfrozen" : "";if(rightfid) {$('#cb_'+$.jgrid.jqID(ts.p.id),ts.grid.fhDiv)[ts.p.useProp ? 'prop': 'attr']("checked", checked);}},

2676行方法getColumnHeaderIndex

if(this.p.multiselect) {$('#cb_'+$.jgrid.jqID(ts.p.id),this).bind('click',function(){//追加代码var rightfroz = ts.p.frozenColumns === true ? ts.p.id + "_rightfrozen" : "";if(froz) {......}//追加代码if(rightfroz) {$("#jqg_"+$.jgrid.jqID(ts.p.id)+"_"+$.jgrid.jqID(this.id), ts.grid.fbDiv )[ts.p.useProp ? 'prop': 'attr']("checked",true);$("#"+$.jgrid.jqID(this.id), ts.grid.fbDiv).addClass("ui-state-highlight");}})//2709行 //追加代码rightfrozif(froz || rightfroz) {$("#jqg_"+$.jgrid.jqID(ts.p.id)+"_"+$.jgrid.jqID(this.id), ts.grid.fbDiv )[ts.p.useProp ? 'prop': 'attr']("checked",false);$("#"+$.jgrid.jqID(this.id), ts.grid.fbDiv).removeClass("ui-state-highlight");}//2060行$(ts).before(grid.hDiv).click(function(e) {//2891行追加代码var frz = ts.p.frozenColumns ? ts.p.id+"_frozen" : "";var rightfrz = ts.p.frozenColumns ? ts.p.id+"_rightfrozen" : "";//2902行追加代码if(frz) {......}if(rightfrz) {$("#"+$.jgrid.jqID(n),"#"+$.jgrid.jqID(rightfrz)).removeClass("ui-state-highlight");$("#jqg_"+$.jgrid.jqID(ts.p.id)+"_"+$.jgrid.jqID(n), "#"+$.jgrid.jqID(rightfrz))[ts.p.useProp ? 'prop': 'attr']("checked", false);}})
}

3174行方法setSelection

//3176行 代码修改为
var $t = this, stat,pt, ner, ia, tpsr, fid,rightfid;
//3201行 代码修改为
if($t.p.frozenColumns === true ) {fid = $t.p.id+"_frozen";rightfid = $t.p.id+"_rightfrozen";
}
//3216行追加
if(fid){......}
if(rightfid) {$("#"+$.jgrid.jqID($t.p.selrow), "#"+$.jgrid.jqID(rightfid)).removeClass("ui-state-highlight");$("#"+$.jgrid.jqID(selection), "#"+$.jgrid.jqID(rightfid)).addClass("ui-state-highlight");
}
//3256行追加
if(fid){......}
if(rightfid) {if(ia === -1) {$("#"+$.jgrid.jqID(selection), "#"+$.jgrid.jqID(rightfid)).addClass("ui-state-highlight");} else {$("#"+$.jgrid.jqID(selection), "#"+$.jgrid.jqID(rightfid)).removeClass("ui-state-highlight");}$("#jqg_"+$.jgrid.jqID($t.p.id)+"_"+$.jgrid.jqID(selection), "#"+$.jgrid.jqID(rightfid))[$t.p.useProp ? 'prop': 'attr']("checked",stat);
}

3280行方法resetSelection

//3283代码修改为
if( t.p.frozenColumns === true ) {fid = t.p.id+"_frozen";rightfid = t.p.id+"_rightfrozen";
}
//3291行 追加代码
if (fid) {...... }
if (rightfid) { $("#"+$.jgrid.jqID(sr), "#"+$.jgrid.jqID(rightfid)).removeClass("ui-state-highlight"); }
// 3295 行追加代码
if(fid) { ...... }
if(rightfid) { $("#jqg_"+$.jgrid.jqID(t.p.id)+"_"+$.jgrid.jqID(sr), "#"+$.jgrid.jqID(rightfid))[t.p.useProp ? 'prop': 'attr']("checked",false); }
//3303行代码追加
if(fid) {......}
if(rightfid) { $("#"+$.jgrid.jqID(t.p.selrow), "#"+$.jgrid.jqID(rightfid)).removeClass("ui-state-highlight"); }
//3311行代码追加
if(fid) { ......}
if(rightfid) { $("#"+$.jgrid.jqID(n), "#"+$.jgrid.jqID(rightfid)).removeClass("ui-state-highlight"); $("#jqg_"+$.jgrid.jqID(t.p.id)+"_"+$.jgrid.jqID(n), "#"+$.jgrid.jqID(rightfid))[t.p.useProp ? 'prop': 'attr']("checked",false);
}

//3286行方法setGridHeight

//添加代码
if ($($t.grid.bDiv).height() < $("table#"+$.jgrid.jqID($t.p.id)).height()) {var u = navigator.userAgent;
if (u.indexOf('Trident') > -1) {$('.right-frozen-bdiv,.right-frozen-hdiv').css({'padding-right':'16px'})
}else if(u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1){$('.right-frozen-bdiv,.right-frozen-hdiv').css({'padding-right':'18px'})
}else{$('.right-frozen-bdiv,.right-frozen-hdiv').css({'padding-right':'10px'})
}}
if($t.p.frozenColumns === true){var u = navigator.userAgent;
if (u.indexOf('Trident') > -1) {$('#'+$.jgrid.jqID($t.p.id)+"_frozen").parent().height(bDiv.height() - 16);$('#'+$.jgrid.jqID($t.p.id)+"_rightfrozen").parent().height(bDiv.height() - 16);
}else if(u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1){$('#'+$.jgrid.jqID($t.p.id)+"_frozen").parent().height(bDiv.height() - 17);$('#'+$.jgrid.jqID($t.p.id)+"_rightfrozen").parent().height(bDiv.height() - 17);
}else{$('#'+$.jgrid.jqID($t.p.id)+"_frozen").parent().height(bDiv.height() - 10);$('#'+$.jgrid.jqID($t.p.id)+"_rightfrozen").parent().height(bDiv.height() - 10);
}
/*trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,*/
//follow the original set height to use 16, better scrollbar width detection}

效果图

jqgrid冻结前后列相关推荐

java冻结行列,poi冻结行和列 - osc_0k23td2u的个人空间 - OSCHINA - 中文开源技术交流社区...
在poi中提供了一个Sheet.createFreezePane()方法用于冻结行和列. @param colSplit Horizonatal position of split. @param r ...
UltraWebGrid 冻结行和列效果以及出现的问题
前台属性 StationaryMargins="Header" 和TableLayout="Fixed" <DisplayLayout AutoGener ...
关于jqGrid动态改变列的解决方案
项目中使用了jqGrid列表控件,碰到"通过选择不同的日期段,出现该日期段中每一天的统计数据"这样的需求.因为之前对这个列表控件不是很熟悉,网上的资料显示和列相关的两个属性:col ...
excel 冻结多列窗口
例如: 冻结前三列: 先选中第四列,选择"视图",点击"拆分", 然后点击"冻结窗格",选择"冻结拆分窗格",就
jqGrid实现当前页列合计与总计
当前页列合计 js代码如下: ...footerrow: true,gridComplete: function () {var rowNum = parseInt($(this).getGridPa ...
html表格table冻结行和列
2019独角兽企业重金招聘Python工程师标准>>> 转自http://liyinlei.iteye.com/blog/2077714 这种固定行列的方式只适用于IE,并且只适用于 ...
扩展gridview轻松实现冻结行和列
在实际的项目中,由于项目的需要,数据量比较大,同时显示栏位也比较多,要做gridview里显示完整,并做到用户体验比较好,这就需要冻结表头和关键列.由于用到的地方比较多,我们可以护展一个gridvie ...
excel同时冻结行和列
http://jingyan.baidu.com/article/5225f26b06035ce6fa09080d.html 转载于:https://www.cnblogs.com/boot/p/59 ...
jqgrid 设置冻结列
有时,jqgrid表格的列非常多,而表格的宽度值是固定的,我们需要在表格底部出现滚动条,并且固定前面几个列作为数据参照项,如何实现? 需要用的jqgrid冻结列,步骤如下: 1)设置需要冻结的列属性, ...
axure中怎么做出固定首行_办公软件操作技巧078：如何在excel表格中冻结行与列...
在日常工作中,有时我们编辑的excel表格会比较大,数据内容有很多行和列,当我们拖动滚动条找到了离表头比较远的数据行或列的内容时,又看不到行或列表头标题信息了,这时再去处理数据信息就会感觉很不方便,如 ...

jqgrid冻结前后列

jqgrid冻结前后列相关推荐

最新文章

热门文章