調整列寬寬度在jqGrid的

Question

我想通過數據列表的最大長度來調整列寬數據表的最大長度，我嘗試在觸發loadComplete事件添加代碼，並使用功能

$myGrid.jqGrid('setColProp', 'column1', { width: 300 }); 
$myGrid.jqGrid('setColProp', 'column1', { width: 80 }); 

但仍不適合我。

Answer 1

試試這個：

$(function() { 
    setTimeout(function() { 
     $('span.ui-jqgrid-resize').dblclick(function() { 
      var id = jQuery(this).parent().attr('id'); // First get the ID of the column that this separator belongs to. This is a tag with an ID for the column. 
      var colName = id.split('_')[1]; 

      var testDiv = jQuery('#stringWidth'); // Test DIV for measuring string widths 

      testDiv.addClass('ui-jqgrid ui-jqgrid-htable ui-jqgrid-sortable ui-th-column ui-state-hover ui-widget-content ui-widget-header ui-state-focus'); // Assign jqGrid header style classes 
      var padding = parseInt(jQuery(jQuery(this).parent()).css('padding-left')) + parseInt(jQuery(jQuery(this).parent()).css('padding-right')); // Calculate jqGrid header padding 
      testDiv.html(jQuery(jQuery(this).parent()).html()); // Assign jqGrid header text to test DIV 
      var nw = testDiv.width() + padding; // Calculate jqGrid header text width 

      testDiv.removeClass('ui-jqgrid ui-jqgrid-htable ui-jqgrid-sortable ui-th-column ui-state-hover ui-widget-content ui-widget-header ui-state-focus'); // De-assign jqGrid header style classes 
      testDiv.addClass('ui-jqgrid ui-row-ltr jqgrow ui-widget-content'); // Assign jqGrid cell style classes 

      jQuery.each(jQuery('td[aria-describedby=' + id + ']'), function() // Iterate over all of the rows and figure out which row is the widest. 
      { 
       padding = parseInt(jQuery(this).css('padding-left')) + parseInt(jQuery(this).css('padding-right')); // Calculate jqGrid cell padding 
       testDiv.html(jQuery(this).html()); // Assign jqGrid cell text to test DIV 
       w = testDiv.width() + padding; // Calculate jqGrid cell text width 
       if (w > nw) { nw = w; } 
      }); 

      // Code below adapted from the grid's "dragEnd" event handler 
      var ts = jQuery('#grid')[0]; 
      var grid = ts.grid; 
      var p = ts.p; 
      var idx = jQuery.jgrid.getCellIndex(jQuery(this).parent()); 

      jQuery("#rs_m" + jQuery.jgrid.jqID(p.id)).css("display", "none"); 

      p.colModel[idx].width = nw; 

      grid.headers[idx].width = nw; 
      grid.headers[idx].el.style.width = nw + "px"; 
      grid.cols[idx].style.width = nw + "px"; 
      if (grid.footers.length > 0) { grid.footers[idx].style.width = nw + "px"; } 

      if (p.forceFit === true) { 
       nw = grid.headers[idx + p.nv].newWidth || grid.headers[idx + p.nv].width; 
       grid.headers[idx + p.nv].width = nw; 
       grid.headers[idx + p.nv].el.style.width = nw + "px"; 
       grid.cols[idx + p.nv].style.width = nw + "px"; 
       if (grid.footers.length > 0) { grid.footers[idx + p.nv].style.width = nw + "px"; } 
       p.colModel[idx + p.nv].width = nw; 
      } 
      else { 
       jQuery('table:first', grid.bDiv).css("width", p.tblwidth + "px"); 
       jQuery('table:first', grid.hDiv).css("width", p.tblwidth + "px"); 
       grid.hDiv.scrollLeft = grid.bDiv.scrollLeft; 
       if (p.footerrow) { 
        jQuery('table:first', grid.sDiv).css("width", p.tblwidth + "px"); 
        grid.sDiv.scrollLeft = grid.bDiv.scrollLeft; 
       } 
      } 
     }); 
    }, 10); 

});