Jqgrid根据其内容可编辑列宽

Question

我已经包含Oleg在此提供的代码link。它完美地根据其内容设置列的大小。我现在面临的唯一问题是，当我为列值设置“editble：true”时，跨度也随着元素一起显示。此跨度被添加到单个单元格以获取文本的宽度目前在cells.now编辑coloumn显示的列值是：

<span class="mywrapping">text</span>

请帮助。

Answer 1

你说得对。在我看来，现在我会更有效地包括<span>只是暂时测量单元格的宽度。在这种情况下，包裹范围不会留在细胞中，而且您所描述的任何问题看起来都不会更多。

The demo在网格中提供修改版本的实现“autowidth”行为。它使用下面的代码

var autosizeColumn = function (iCol) { 
     var $this = $(this), iRow, rows, row, colWidth, 
      cm = typeof iCol === "string" ? $this.jqGrid("getColProp", iCol) : $this.jqGrid("getGridParam", "colModel")[iCol], 
      getOuterWidth = function ($elem) { 
       var $wrappingSpan, width; 

       $elem.wrapInner("<span class='mywrapping'></span>"); 
       $wrappingSpan = $elem.find(">.mywrapping"); 
       width = $wrappingSpan.outerWidth(); 
       $elem.html($wrappingSpan.html()); 

       return width; 
      }; 

     if (cm == null || cm.hidden) { 
      return; // don't change the width of hidden columns 
     } 
     colWidth = getOuterWidth($(this.grid.headers[iCol].el).find(">div")) + 25; // 25px for sorting icons 
     for (iRow = 0, rows = this.rows; iRow < rows.length; iRow++) { 
      row = rows[iRow]; 
      if ($(row).hasClass("jqgrow")) { 
       colWidth = Math.max(colWidth, getOuterWidth($(row.cells[iCol]))); 
      } 
     } 
     $this.jqGrid("setColWidth", iCol, colWidth); 
    }, 
    autosizeColumns = function() { 
     var $this = $(this), iCol, 
      colModel = $this.jqGrid("getGridParam", "colModel"), 
      n = $.isArray(colModel) ? colModel.length : 0; 

     for (iCol = 0; iCol < n; iCol++) { 
      autosizeColumn.call(this, iCol); 
     } 
    }; 

$grid.bind("jqGridAfterLoadComplete jqGridRemapColumns jqGridInlineAfterSaveRow", autosizeColumns); 

修订。或者可以使用autoWidthColumns插件，我发布为jQuery.jqGrid.addColumn.jshere。在这种情况下，只需要包括jQuery.jqGrid.setColWidth.js和jQuery.jqGrid.autoWidthColumns.js，并使用$("#gridid").jqGrid("autoWidthColumns").jqGrid({/*option*/});而不是标准$("#gridid").jqGrid({/*option*/});来创建网格。

The demo使用autoWidthColumns插件。