JQGrid中的凍結列

Question

有沒有辦法讓jqGrid凍結一個或多個最左邊的列並讓列的剩餘部分左右滾動？

我做了谷歌至少有一人誰聲稱，他們已經在這裏做了： 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的粘貼。我認爲這準確地傳達了作者在他的trirand.com論壇帖子中[無意中損壞]的內容，linoj提出了here的兩個編輯。好的，代碼轉儲...

(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); 

任何想法？

Answer 1

凍結列現在在jqGrid 4.3中實現。看the official demo，選擇「冷凍Cols.Group頭（新）」在樹的左側底部，然後選擇演示「冷凍柱」或「與組標題冷凍柱」。