冻结JQGrid中的列 [英] Freezing Columns in JQGrid
问题描述
有没有办法让jqGrid冻结一个或多个最左边的列并使列的其余部分左右滚动?
Is there a way to get jqGrid to freeze one or more left-most columns and have the balance of the columns scroll left-and-right?
我对至少一个声称在此完成过此工作的人做了Google的调查: http://www.trirand.com/blog/?page_id = 393/discussion/new-freeze-column-plugin/
I did Google up at least one person who claims to have done it here: http://www.trirand.com/blog/?page_id=393/discussion/new-freeze-column-plugin/
...但是示例代码不见了. (具有讽刺意味的是，它的屏幕截图仍在工作，嘲笑我.)
... but the sample code is gone. (Ironically and painfully, the screencast of it working is still up, mocking me.)
看起来这里有些也可以正常工作，但是没有包含代码.
It looks like some here have gotten it working too, but didn't include code.
有人在带有该插件或其他类似插件的jqGrid中通过滚动来获得冻结列吗?任何人都可以使用该代码，并且方便吗?
Has anyone gotten frozen columns with scrolling working in a jqGrid with that plugin or another similar plugin? Anyone have that code working & handy?
我本以为您会包括该同伴的代码，它会自动生成您可以在他的截屏视频中看到的图钉，如果没有，您会用...来实现魔术的.
I would have thought you'd include that fellow's code and it would automagically produce the pushpins that you can see in his screencast, and if it didn't you'd make the magic happen with...
$(document).ready(function() {
//$("#tblImz").jqGrid().freezingSetup(); // initially tried without this line; same error (reporting different function, natch)
$("#tblImz").jqGrid().freezeColumn(2);
});
...但是那给了我...
... but that gives me...
Microsoft JScript运行时错误:对象不支持属性或 方法"freezeColumn"
Microsoft JScript runtime error: Object doesn't support property or method 'freezeColumn'
或
Microsoft JScript运行时错误:对象不支持属性或 方法"freezingSetup"
Microsoft JScript runtime error: Object doesn't support property or method 'freezingSetup'
只是为了好玩，这是我认为几乎正确的清理代码，摘录自此处，由linoj建议.好的，代码转储...
Just for fun, here's the cleaned up code that I think is nearly right, taken from the paste from the post above. I think this accurately relays what the author had [unintentionally mangled up] in his trirand.com forum post, with the two edits from here suggested by linoj. Okay, code dump...
(function ($) {
/**
* jqGrid extension
* Tim Heckel timheckel@gmail.com *
* from here: http://www.trirand.com/blog/?page_id=393/discussion/new-freeze-column-plugin/
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl-2.0.html *
*/
$.jgrid.extend({
//overrides existing
getCellIndex: function (cell) {
var c = jQuery(cell);
if (c.is('tr')) {
return -1;
}
var index = -1;
if (c.parent().hasClass("ui-jqgrid-frozenColumnHeader")) {
index = parseInt(c.attr("rel"));
} else {
c = (!c.is('td') && !c.is('th') ? c.closest("td,th") : c)[0];
if (jQuery.browser.msie) {
index = jQuery.inArray(c, c.parentNode.cells);
} else {
index = c.cellIndex;
}
}
return index;
}
});
$.jgrid.extend({
removeFreezeIcons: function () {
jQuery(".toggleFrozenColumn").remove();
},
freezingSetup: function () {
// [1]
return this.each(function () {
var grid = this;
var colIndex = -1;
jQuery(".ui-th-column").each(function () {
colIndex++;
if (colIndex <= grid.p.colModel.length - 1) {
if (jQuery(this).is(":visible") && grid.p.colModel[colIndex].freezing) {
if (jQuery(".toggleFrozenColumn[rel=" + colIndex + "]").length === 0) {
jQuery(this).children(".ui-jqgrid-sortable").prepend("<img href='javascript:' class='toggleFrozenColumn' rel='" + colIndex + "' src='" + grid.p.imageDir + "/pinup.png'/>");
}
}
} else {
return;
}
});
jQuery(".toggleFrozenColumn").unbind();
jQuery(".toggleFrozenColumn").click(function (e) {
e.stopPropagation();
var img = this;
jQuery.extend(grid.p, { currentFrozenIndex: parseInt(jQuery(this).attr("rel")) });
process(img);
});
function process(img) {
jQuery(".toggleFrozenColumn").hide();
jQuery(img).show();
var _ci = parseInt(jQuery(img).attr("rel"));
var _name = grid.p.colModel[parseInt(jQuery(img).attr("rel"))].name;
if (jQuery(img).attr("src").indexOf("pindown") > -1) {
jQuery("#" + grid.p.id + "_" + _name).find('.toggleFrozenColumn').attr("src", grid.p.imageDir + "/pinup.png");
for (ci = parseInt(jQuery(img).attr("rel")); ci > -1; ci--) {
jQuery("#" + grid.p.id).jqGrid("unfreezeColumn", ci);
}
jQuery(".toggleFrozenColumn").show();
} else {
jQuery(img).attr("src", grid.p.imageDir + "/pindown.png");
for (ci = parseInt(jQuery(img).attr("rel")); ci > -1; ci--) {
jQuery("#" + grid.p.id).jqGrid("freezeColumn", ci);
}
}
}
if (grid.p.currentFrozenIndex !== undefined) {
var img = jQuery(".toggleFrozenColumn[rel=" + grid.p.currentFrozenIndex + "]");
//unfreeze all
process(img[img.length - 1]);
//freeze all
process(img[0]);
}
});
// [1]
//
},
unfreezeColumn: function (colIndex) {
return this.each(function () {
var t = this;
var _name = t.p.colModel[colIndex].name;
if (jQuery("#frozenColumn_" + _name).length > 0) {
jQuery("#frozenColumnHeader_" + _name).remove();
jQuery("#frozenColumn_" + _name).remove();
}
});
},
freezeColumn: function (colIndex) {
jQuery(".ui-jqgrid-bdiv").scroll(function () {
jQuery(".ui-jqgrid-frozenColumn").scrollTop(jQuery(this).scrollTop());
});
return this.each(function () {
var t = this;
var _name = t.p.colModel[colIndex].name;
var _allow = t.p.colModel[colIndex].freezing;
if (jQuery("#frozenColumn_" + _name).length === 0 && _allow) {
var _id = t.p.id;
var c = jQuery("#" + _id + "_" + _name);
if (c.is(":visible")) {
var th = c.clone(true).css("height", c.height() + "px").css("vertical-align", "middle"); //.css("background-color", t.p.frozenColumnHorizontalBorderColor); //.css("font-weight", c.css("font-weight"));
var ct = "";
var cell = jQuery('td[aria-describedby=' + _id + '_' + _name + ']');
var dimen = { height: 0, top: 0, width: 0, top: 0, left: 0 };
dimen.height = jQuery(".ui-jqgrid-bdiv").outerHeight(true) - 16;
jQuery.each(cell, function () {
var cls = new Array();
var classList = $(this).attr('class').split(/s+/);
jQuery.each(classList, function (index, item) {
cls.push(item);
});
ct += "<div class='ui-jqgrid-frozenColumnCell " + cls.join(' ') + "' style='border-right:1px solid " + t.p.frozenColumnVerticalBorderColor + ";border-left:1px solid transparent;border-bottom:1px solid " + t.p.frozenColumnHorizontalBorderColor + ";background-color:#FFF;padding-top:1px;height:" + (jQuery(this).height() - 1) + "px;'>" + jQuery(this).html() + "</div>";
// +5 is from here:
// http://www.trirand.com/blog/?page_id=393/discussion/new-freeze-column-plugin/#p21071
if (dimen.width === 0) dimen.width = jQuery(this).width() + 1 + 5;
if (dimen.top === 0) {
dimen.top = jQuery(".ui-jqgrid-titlebar").outerHeight(true) + c.outerHeight(true) + 1;
dimen.left = jQuery(this).position().left - 1;
}
});
var titleBarHeight = jQuery(".ui-jqgrid-titlebar").outerHeight(true);
// "dimen.width" in first call below replaces c.width() in the original, from same link.
// http://www.trirand.com/blog/?page_id=393/discussion/new-freeze-column-plugin/#p21071
jQuery(".ui-jqgrid-view").append("<div class='ui-jqgrid-frozenColumnHeader' id='frozenColumnHeader_" + _name
+ "' style='height:" + c.height()
+ "px;width:" + c.width()
+ "px;top:" + titleBarHeight
+ "px;left:" + dimen.left
+ "px;position:absolute;overflow:hidden;border-right:1px solid " + t.p.frozenColumnVerticalBorderColor + "'></div>");
jQuery(".ui-jqgrid-view").append("<div class='ui-jqgrid-frozenColumn' id='frozenColumn_" + _name
+ "' style=';overflow:hidden;position:absolute;height:" + dimen.height
+ "px;width:" + dimen.width
+ "px;top:" + dimen.top
+ "px;left:" + dimen.left + "px;'>"
+ ct
+ "</div>");
c = (!c.is('td') && !c.is('th') ? c.closest("td,th") : c)[0];
if (jQuery.browser.msie) {
th.attr("rel", jQuery.inArray(jQuery("#" + _id + "_" + _name), c.parentNode.cells));
} else {
th.attr("rel", c.cellIndex);
}
jQuery("#frozenColumnHeader_" + _name).append(th);
}
}
});
}
});
})(jQuery);
有什么想法吗?
推荐答案
冻结的列现在在jqGrid 4.3中实现.查看官方演示，选择"冻结Cols.Group标头(新)"在左侧树的底部，然后选择演示"冻结列"或"具有组标题的冻结列".
The frozen columns are implemented now in jqGrid 4.3. Look at the official demo, choose "Frozen Cols.Group Header(new)" at the bottom of the tree on the left side and then choose the demo "Frozen column" or "Frozen column with group header".
这篇关于冻结JQGrid中的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
