Einfrieren von Spalten in JQGrid
Gibt es einen Weg, um jqGrid frieren ein oder mehrere Links-die meisten Säulen und das Gleichgewicht der Spalten navigieren Sie nach Links-und-rechts?
Habe ich Google mindestens eine person, die behauptet, es gemacht zu haben hier:
http://www.trirand.com/blog/?page_id=393/discussion/new-freeze-column-plugin/
... aber der Beispiel-code ist Weg. (Ironisch und schmerzhaft, die screencast es funktioniert ist noch aktuell, über mich lustig.)
Sieht es aus wie einige hier haben, bekommen Sie zu arbeiten., aber nicht die code enthalten.
Hat jemand bekommen eingefrorenen Spalten mit Scroll-Arbeit in einem jqGrid mit das plugin oder ein anderes ähnliches plugin? Jemand, der code funktioniert & praktisch?
Ich hätte gedacht Sie würde beinhalten, dass der Kerl den code, und es würde automatisch produzieren die Pins, die Sie sehen können, in seinem screencast, und wenn es nicht du wärst, wie die Magie geschieht mit...
$(document).ready(function() {
//$("#tblImz").jqGrid().freezingSetup(); //initially tried without this line; same error (reporting different function, natch)
$("#tblImz").jqGrid().freezeColumn(2);
});
... aber das gibt mir...
Microsoft JScript runtime error: Objekt unterstützt keine Eigenschaft oder
die Methode 'freezeColumn'
oder
Microsoft JScript runtime error: Objekt unterstützt keine Eigenschaft oder
die Methode 'freezingSetup'
Nur zum Spaß, hier ist der code bereinigt, dass ich denke ist fast direkt aus der paste aus dem post oben. Ich denke dieses relais genau das, was der Autor hatte [unabsichtlich entstellt bis] in seinem trirand.com forum-post, mit den zwei Bearbeitungen aus hier vorgeschlagen, linoj. Okay, code-dump...
(function ($) {
/**
* jqGrid extension
* Tim Heckel [email protected] *
* 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[]").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[]");
//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);
Irgendwelche Ideen?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Die eingefrorenen Spalten werden jetzt umgesetzt in jqGrid 4.3. Blick auf die offizielle demo, wählen Sie "Eingefroren Cols.Group Header(neu)" am unteren Rand der Baum auf der linken Seite und wählen Sie dann das demo "Eingefroren Spalte" oder "Eingefroren Spalte mit Kopfzeile der Gruppe".
frozen:true
und ein AnrufjQuery("#tblImz").jqGrid('setFrozenColumns');
- und es funktioniert. Große drop-in-Ersatz. Und same-day-service auch! Ich werde behaupten, dass 4.3 veröffentlicht wurde, nur für mich. ;^D Danke. Ich werde herausfinden, wie Sie zu akzeptieren.frozen:false
in Ihre Spalte Modell, 2.) Sie ll hinzufügen möchtenshrinkToFit: false
zu Ihrem jqGrid-setup, um sicherzustellen, dass es scrollt nach Links und rechts, und 3.) der Letzte Aufruf mitsetFrozenColumns
wie in Oleg ' s demo kommt, nachdem das raster eingerichtet. Die demo hat es sofort nach, und ich steckte es in meine$(document).ready(function() {
block.