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?

InformationsquelleAutor ruffin | 2011-12-12
Schreibe einen Kommentar