無法獲得的jqGrid 4.5.2凍結列正常工作 - 只有頭被移動

我已經嘗試過要自己解決通過閱讀這樣一個=>why doesn't Jqgrid frozen column seem to work with filter rows and filter heading?無法獲得的jqGrid 4.5.2凍結列正常工作 - 只有頭被移動

一些其他的問題，但我客串網格具有從那時起改變，因爲我無法調用完整的方法（或者我做錯了什麼）。

所以現在只有一個標題的副本移動，而不是數據，標題的高度是不正確的，但我認爲這是因爲我旋轉標題，然後在JavaScript中調整高度。這是相當開箱，除了旋轉標題，但沒有它它也不工作:(

我做了一個乾淨的代碼示例，所以幫助會更容易，在我的情況我也使用一些自定義代碼旋轉我的頭，但即使沒有它凍結的列不工作。

任何幫助將非常感激:)

在HTML

<html> 
<head> 
    <title>Jqgridtest</title> 
    <link rel="stylesheet" type="text/css" media="screen" href="styles/jquery-ui/jquery-ui-1.10.3.custom.css" /> 
    <link rel="stylesheet" href="jqgrid/css/ui.jqgrid.css" type="text/css" /> 
    <link rel="stylesheet" href="styles/demo.css" type="text/css" /> 
    <script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script> 
    <script src="jqgrid/js/i18n/grid.locale-nl.js" type="text/javascript"></script> 
    <script src="jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script> 
    <script type="text/javascript" src="scripts/generatedata.js"></script>  

</head> 
<body> 
    <div> 
     <table id="jqgrid"> 

     </table> 
    </div> 
</body> 
</html>

的generatedata JavaScript和正確dataloading +固定頭

$(document).ready(function() { 
    processDataToGrid('#jqgrid') ; 
}); 


function getInternetExplorerVersion() 
// Returns the version of Windows Internet Explorer or a -1 
// (indicating the use of another browser). 
{ 
    var rv = -1; // Return value assumes failure. 
    if (navigator.appName == 'Microsoft Internet Explorer') { 
     var ua = navigator.userAgent; 
     var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})"); 
     if (re.exec(ua) != null) 
      rv = parseFloat(RegExp.$1); 
    } 
    return rv; 
} 

var fixPositionsOfFrozenDivs = function() { 
    var $rows; 
    if (typeof this.grid.fbDiv !== "undefined") { 
     $rows = $('>div>table.ui-jqgrid-btable>tbody>tr', this.grid.bDiv); 
     $('>table.ui-jqgrid-btable>tbody>tr', this.grid.fbDiv).each(function (i) { 
      var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height(); 
      if ($(this).hasClass("jqgrow")) { 
       $(this).height(rowHight); 
       rowHightFrozen = $(this).height(); 
       if (rowHight !== rowHightFrozen) { 
        $(this).height(rowHight + (rowHight - rowHightFrozen)); 
       } 
      } 
     }); 
     $(this.grid.fbDiv).height(this.grid.bDiv.clientHeight); 
     $(this.grid.fbDiv).css($(this.grid.bDiv).position()); 
    } 
    if (typeof this.grid.fhDiv !== "undefined") { 
     $rows = $('>div>table.ui-jqgrid-htable>thead>tr', this.grid.hDiv); 
     $('>table.ui-jqgrid-htable>thead>tr', this.grid.fhDiv).each(function (i) { 
      var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height(); 
      $(this).height(rowHight); 
      rowHightFrozen = $(this).height(); 
      if (rowHight !== rowHightFrozen) { 
       $(this).height(rowHight + (rowHight - rowHightFrozen)); 
      } 
     }); 
     $(this.grid.fhDiv).height(this.grid.hDiv.clientHeight); 
     $(this.grid.fhDiv).css($(this.grid.hDiv).position()); 
    } 
}; 



function processDataToGrid(gridId) { 

    var data = [ 
    {id:1, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } , 
    {id:2, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true } , 
    {id:3, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: true, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: true, x14 : false, x15:true } , 
    {id:4, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } , 
    {id:5, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: false, x6:true, x7: true, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } , 
    {id:6, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:false, x13: false, x14 : false, x15:true } , 
    {id:7, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: true, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } , 
    {id:8, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } , 
    {id:9, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: true, x3:false, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: true , x11: false, x12:true, x13: false, x14 : false, x15:true } , 
    {id:10, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } , 
    {id:11, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } , 
    {id:12, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:false, x4: true, x5: false, x6:true, x7: false, x8: false, x9:true, x10: true , x11: false, x12:true, x13: true, x14 : false, x15:true } , 
    {id:13, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } , 
    {id:14, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } , 
    {id:15, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: true, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:false, x13: false, x14 : false, x15:true } , 
    {id:16, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: true, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : true, x15:true } , 
    {id:17, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } , 
    {id:18, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } , 
    {id:19, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: true, x3:false, x4: false, x5: true, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } , 
    {id:20, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: true , x11: true, x12:true, x13: false, x14 : false, x15:true } , 
    {id:21, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: true, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } , 
    {id:22, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:false, x13: false, x14 : false, x15:true } , 
    {id:23, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : true, x15:true } , 
    {id:24, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true } , 
    {id:25, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: true, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } , 
    {id:26, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:false, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } , 
    {id:27, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true } , 
    {id:28, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: true, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } , 
    {id:29, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : true, x15:true } , 
    {id:30, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } , 
    {id:31, fixed1: 'Fixed1', fixed2:'Fixed2', x1: false, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } , 
    {id:32, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true } , 
    {id:33, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } , 
    {id:34, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } , 
    {id:35, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } , 
    {id:36, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true } , 
    {id:37, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } , 
    {id:38, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } , 
    {id:39, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: true , x11: false, x12:true, x13: false, x14 : false, x15:true } , 
    {id:40, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:false, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: true, x14 : true, x15:true } , 
    {id:41, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: false, x12:true, x13: false, x14 : false, x15:true } , 
    {id:42, fixed1: 'Fixed1', fixed2:'Fixed2', x1: true, x2: false, x3:true, x4: false, x5: false, x6:true, x7: false, x8: false, x9:true, x10: false , x11: true, x12:true, x13: false, x14 : false, x15:true } , 
    ]; 



    $(gridId).jqGrid({ 
     datatype: "local", 
     gridview: true, 
     forcefit: false, 
     data:data, 
     shrinkToFit: false, 
     width: 780, 
     height: 400, 
     rowNum: 100, 
     columnsheight: 150, 
     colNames: ['Fixed1', 'Fixed2' ,'Col1', 'Col2', 'Col3' , 'Col4', 'Col5','Col6', 'col7', 'Col8', 'Col9', 'Col10', 'Col11', 'Col12', 'Col13', 'Col4', 'Col15' ], 
     ignoreCase: true, 
     colModel: [ 
     { name: 'fixed1', sorttype: 'text', search:true, width:300, align: 'left', frozen : true ,sortable:false }, 
     { name: 'fixed2', sorttype: 'text', search: true, width: 130, align: 'left', frozen: true, sortable: false }, 
     { name: 'x1', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false }, 
     { name: 'x2', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false }, 
     { name: 'x3', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false }, 
     { name: 'x4', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false }, 
     { name: 'x5', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false }, 
     { name: 'x6', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false }, 
     { name: 'x7', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false }, 
     { name: 'x8', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false }, 
     { name: 'x9', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false }, 
     { name: 'x10', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false }, 
     { name: 'x11', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false }, 
     { name: 'x12', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false }, 
     { name: 'x13', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false }, 
     { name: 'x14', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false }, 
     { name: 'x15', stype: 'select', "searchoptions": { "value": ":Alle;true:Geselecteerd;false:Niet geselecteerd" }, width: 50, search: true, formatter: boolFormatter, align: 'center', sortable: false }, 


     ] 
    }); 



    //enable group headers 
    $(gridId).jqGrid('setGroupHeaders', { 
     groupHeaders: [ 
    { startColumnName: 'x1', numberOfColumns: 10, titleText: 'TopHeader1' }, 
    { startColumnName: 'x10', numberOfColumns: 3, titleText: 'TopHeader2' }, 
    { startColumnName: 'x13', numberOfColumns: 1, titleText: 'TopHeader3' } 
    ] 
    }); 

    $(gridId).jqGrid('setGroupHeaders', { 

     groupHeaders: [ 
    { startColumnName: 'x1', numberOfColumns: 7, titleText: 'SubHeader1' }, 
    { startColumnName: 'x8', numberOfColumns: 2, titleText: '' }, 
    { startColumnName: 'x10', numberOfColumns: 6, titleText: 'Subheader2' }, 
    ] 
    }); 

    $(gridId).jqGrid('setFrozenColumns'); 


    RotateColumnHeaders($(gridId), 150, 100); 
    //enable search and contains searchmethod 
    $(gridId).jqGrid('filterToolbar', { searchOnEnter: false, defaultSearch: 'cn' }); 
     $(gridId).triggerHandler("jqGridAfterGridComplete"); 
    fixPositionsOfFrozenDivs.call($(gridId)[0]); 
} 


// Rotates the (x1-x24) columnheaders 90 degrees 
var RotateColumnHeaders = function (grid, headerHeight, headerWidth) { 
    var trHead = $("thead:first tr")[3]; 
    var cm = grid.getGridParam("colModel"); 

    $("th", trHead).height(headerHeight); 

    for (var iCol = 0; iCol < cm.length; iCol++) { 
     var cmi = cm[iCol]; 
     //check if name starts with x because our modelnames that should be rotated start with x as well  
     if (cmi.name.match("^x")) { 
      var headDiv = $("th:eq(" + iCol + ") div", trHead); 
      headDiv.addClass("VerticalHeader"); 
      headDiv.css("overflow", "initial"); 
      var ieVersion = getInternetExplorerVersion(); 
      if (ieVersion != -1 && ieVersion <= 9) { 
       headDiv.addClass("VerticalHeaderIE"); 
       //set height to prevent text clipping 
       headDiv.height(23); 
       //set background color of parent since background color of child element has been set so the text is readable 
       //and the parent color is different = very ugly so set parent color 
       headDiv.parent().css("background", "#EDEDED"); 
      } 
     } 
    } 

}; 


function boolFormatter(cellvalue, options, rowObject) { 

      if (cellvalue == "*") { 
       return '<span class="BoolCell Talks">*</span>'; /* null*/ 
      } 
      else if (cellvalue) { 
       return '<span class="BoolCell Allowed">&#x25CF;</span>'; /* true */ 
      } 
      else { 
       return '<span class="BoolCell NotAllowed">-</span>'; /* false */ 
      } 

    return new_format_value 
}

我的自定義CSS的旋轉頭

.VerticalHeader 
{ 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
    transform: rotate(90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 
    margin-top:-40px; 
    position: relative; 
    font-size: 0.8em; 

} 

.VerticalHeaderIE /* _EXTRA_ style voor VerticalHeader in IE */ 
{ 
    text-align:left; 
    width:150px; 
    height:50px; 
    margin-top:-40px; 
    margin-left: 20px; 
    background-color: #EDEDED; 

    zoom: 1; 
}

來源

2013-06-24 Martijn

，我建議你到包括行

$(gridId).triggerHandler("jqGridAfterGridComplete");

行$(gridId).jqGrid('setFrozenColumns');後。有關更多信息，請參閱我的錯誤報告以及相應的建議here。順便說一下，相應的後期4.5.2修復已經在主代碼jqGrid中（請參閱here）。所以這個問題應該在下一個版本的jqGrid中修復。

對您的代碼的補充說明：請不要在循環中使用addRowData填充具有datatype: "local"的網格。而不是你可以設置額外的id屬性到data數組的每個項目，並使用jqGrid的data: data選項。它允許你創建jqGrid 和的數據。如果您使用gridview: true選項，那麼這種類型的網格填充將更有效。有關更多詳細信息，請參閱the answer。

來源

2013-06-24 21:12:14 Oleg

已經感謝，現在凍結:)。你還可以給我一些建議，哪些元素設置正確的高度，使標題與我調整的其他標題對齊？（當我嘗試調整元素的高度時，我總是會收到滾動條，改變父元素的高度也無濟於事）。 +將使用gridview填充，謝謝指出 – Martijn

@Martijn：不客氣！看看[答案]（http://stackoverflow.com/a/8771429/315935）和[這一個]（http://stackoverflow.com/a/16517257/315935）。我希望它能解決你的問題與凍結標題的高度。 – Oleg

好，太棒了！標題現在就位，但filtertoolbar正在消失。任何快速的想法如何解決這個問題？ – Martijn

無法獲得的jqGrid 4.5.2凍結列正常工作 - 只有頭被移動

回答

相關問題