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插件。