0
jqGridに1つ以上の左端の列をフリーズさせ、列のバランスを左右にスクロールさせる方法はありますか？ JQGridで列をフリーズ
は、私はここでそれを行っていると主張し、少なくとも1人がGoogleにアップしました： http://www.trirand.com/blog/?page_id=393/discussion/new-freeze-column-plugin/を...しかし、サンプルコードがなくなっています。 （皮肉にも痛ましいことに、screencast of it workingは依然として私を嘲笑しています）
some here have gotten it working tooのように見えますが、コードは含まれていません。
フリーズした列をスクロールしてjqGridでそのプラグインまたは別の同様のプラグインを使用している人は誰ですか？誰でもそのコードは&が便利ですか？
私はあなたがその仲間のコードが含まれるだろうと ...それは自動的にあなたが彼のスクリーンキャストで見ることができる画鋲を生成する、それがなかった場合は、魔法がで実現するだろうと思っているだろう
$(document).ready(function() {
//$("#tblImz").jqGrid().freezingSetup(); // initially tried without this line; same error (reporting different function, natch)
$("#tblImz").jqGrid().freezeColumn(2);
});
Microsoft JScript runtime error: Object doesn't support property or method 'freezeColumn'
または
Microsoft JScript runtime error: Object doesn't support property or method 'freezingSetup'
だけのためにここでは、私がと考えているのコードは、post aboveのペーストから取られています。 I は、投稿者がtrirand.comのフォーラム投稿に投稿した内容を正確に中継しています。からlinojさんが提案した2件の編集内容を正確に中継しています。さて、コードダンプ...
(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[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);
任意のアイデア？
完璧！ jQuery（ "＃tblImz"）。jqGrid（ 'setFrozenColumns'）; 'への1回の' 'frozen：true''と' '素晴らしいドロップイン交換。そして同じ日のサービスも！私はちょうど私のために4.3がリリースされたふりをします。 ;^Dありがとう。私は今どのように受け入れるかを考え出すでしょう。 – ruffin
これを使って他の人に追加するべきでしょうか... 1.） 'frozen：false'を列モデルに入れます。2. jqGridセットアップに' shrinkToFit：false'を追加してスクロールさせます左と右、そして3.） 'setFrozenColumns'を使った最後の呼び出しは、Olegのデモのように、グリッドが設定された後になります。デモの直後にそれがあり、それを私の '$（document）.ready（function（）{'ブロックに貼り付けました。 – ruffin