有没有什么办法让自由jQgrid的第一列变宽？

Question

我使用下面的代码中创建一个网格：

var grid_type = 'grid_agreement'; 
var status_action; 
var lastSel; 
$(function() { 
    $.extend($.fn.fmatter, { 
     GridAgreementActions: function (cellvalue, options, rowdata) { 
      var data = cellvalue.split('|'); 
      var actions = ''; 
      if (data[1] == 1) { 
       actions += "<a class='actionimage' href='/sf/agreement/show/" + data[0] + "' title='View' onClick='load_start();'><img src='/images/icons/16x16/document_view.png' width='16' height='16' alt='' /></a>"; 
      } 
      if (data[2] == 1) { 
       actions += "<a id='cedit" + options.rowId + "' href='javascript:updateAgreement(" + data[0] + ");' onClick='load_start();' title='Edit'><img src='/images/icons/16x16/document_edit.png' width='16' height='16' alt='' /></a>"; 
      } 
      $('#exportlink_link_form_grid_agreement').attr('action', data[5]); 
      $('#permexportlink_link_grid_agreement').html('<a href="' + data[6] + '"><img src="/images/icons/16x16/document_out.png" width="16" height="16" alt="" />Permission Export List</a>'); 

      return actions; 
     } 
    }); 

    $("#grid_agreement").jqGrid({ 
     url: "/sf/agreement/", 
     datatype: "json", 
     mtype: "post", 
     colModel: [{ 
      "name": "actions", 
      "width": 60, 
      "fixed": true, 
      "sortable": false, 
      "resize": true, 
      "formatter": "GridAgreementActions", 
      "formatoptions": "", 
      "index": "actions", 
      "align": "left", 
      "hidden": false, 
      "edittype": "", 
      "classes": false, 
      "editable": false, 
      "label": "Actions", 
      "key": "", 
      "autoResizable": false, 
      "frozen": true, 
      "resizable": false, 
      "search": false, 
      "hidedlg": false, 
      "viewable": true 
     }, { 
      "name": "agreement.id", 
      "width": 100, 
      "fixed": false, 
      "sortable": true, 
      "resize": true, 
      "formatter": "", 
      "formatoptions": "", 
      "index": "agreement.id", 
      "align": "left", 
      "hidden": true, 
      "edittype": "", 
      "classes": false, 
      "editable": false, 
      "label": "ID", 
      "key": true, 
      "autoResizable": true, 
      "frozen": true, 
      "resizable": true, 
      "search": false, 
      "hidedlg": false, 
      "viewable": true 
     }, { 
      "name": "agreement.AgreementNumber", 
      "width": 109, 
      "fixed": false, 
      "sortable": true, 
      "resize": true, 
      "formatter": "", 
      "formatoptions": "", 
      "index": "agreement.AgreementNumber", 
      "align": "left", 
      "hidden": false, 
      "edittype": "", 
      "classes": false, 
      "editable": false, 
      "label": "AgreementNumber", 
      "key": "", 
      "autoResizable": true, 
      "frozen": true, 
      "resizable": true, 
      "search": false, 
      "hidedlg": false, 
      "viewable": true 
     }], 
     postData: {}, 
     rowNum: 50, 
     rowList: [50, 100, 150, 200, 250], 
     pager: "grid_agreement-gridpager", 
     toppager: true, 
     hoverrows: true, 
     ajaxRowOptions: {async: true}, 
     sortname: "", 
     sortorder: "desc", 
     sortable: { 
      options: { 
       items: ">th:not(:has(#jqgh_grid_agreement_cb,#jqgh_grid_agreement_rn,#jqgh_grid_agreement_actions),:hidden)" 
      } 
     }, 
     rownumbers: true, 
     viewrecords: true, 
     caption: "", 
     multiselect: true, 
     height: "auto", 
     width: 3991, 
     editurl: "", 
     shrinkToFit: true, 
     cellEdit: true, 
     cellsubmit: "remote", 
     cellurl: "/sf/agreement/cell/1", 
     resizeStop: function (width, index) { 
      saveColumnConfiguration($("#grid_agreement"), "/sf/agreement/", 1); 
     }, 
     onSortCol: function (index, iCol, sortorder) { 
      $("#msg_msg").html("Sorting..."); 
      var content = {sortname: index, sortorder: sortorder}; 
     }, 
     loadComplete: function (data) { 
      $("#msg_msg").html(""); 
      if (data.records === 0) { 
       $("#grid_agreement-gridpager").parent().find(".loading").removeClass("error_msg success_msg").addClass("info_msg").html($("<span>", { 
        "class": "grid-empty", 
        "text": "No results were found." 
       })); 
       $("#grid_agreement-gridpager").parent().find(".loading").delay(800).fadeIn(400); 
      } 
     }, 
     beforeRequest: function() { 
      $("#grid_agreement-gridpager").parent().find(".loading").removeClass("error_msg success_msg").addClass("info_msg").html("Loading..."); 
     }, 
     afterEditCell: function (rowid, cellname, value, iRow, iCol) { 
      $(".gridcalendar").datepicker({dateFormat: ""}); 
     }, 
     beforeSubmitCell: function (rowid, cellname, value, iRow, iCol) { 
      var cm = $(this).jqGrid("getGridParam", "colModel")[iCol]; 
      return { 
       table: cm.table, //tableField[0], 
       field: cm.field, // tableField[1], 
       fieldvalue: value 
      }; 
     }, 
     afterSubmitCell: function (serverresponse, rowid, cellname, value, iRow, iCol) { 
      if (serverresponse.responseText) { 
       if (serverresponse.responseText == "reload") { 
        $("#grid_agreement").trigger("reloadGrid"); 
        return [true, ""]; 
       } 

       try { 
        var obj = $.parseJSON(serverresponse.responseText); 
        if (typeof(obj) != "undefined" && parseInt()) { 
         reloadDetailsHeader(); 
         if (obj.customer_price) { 
          $("#grid_agreement").jqGrid("setCell", rowid, "customer_price", obj.customer_price); 
         } 

         if (obj.reseller_price) { 
          $("#grid_agreement").jqGrid("setCell", rowid, "reseller_price", obj.reseller_price); 
         } 
         return [true, ""]; 
        } 
       } catch (err) { 
       } 

       return [false, serverresponse.responseText]; 
      } else { 
       return [true, ""]; 
      } 
     }, 
     subGrid: false 
    }); 

    $('#grid_agreement').jqGrid('navGrid', '#grid_agreement-gridpager', { 
     edit: false, 
     add: false, 
     del: false, 
     search: false, 
     refresh: true 
    }); 

    $('#grid_agreement').jqGrid('navButtonAdd', '#grid_agreement-gridpager', { 
     caption: 'Columns | ', 
     title: 'Remove or Add Columns', 
     onClickButton: function() { 
      jQuery('#grid_agreement').jqGrid('columnChooser', { 
       done: function (perm) { 
        if (perm) { 
         $('#grid_agreement').jqGrid('remapColumns', perm, true, false); 
        } 

        saveColumnConfiguration($('#grid_agreement'), '/sf/agreement/', 1); 
        $('#grid_agreement').trigger("reloadGrid"); 
       } 
      }); 
     } 
    }); 

    $('#grid_agreement').jqGrid('navButtonAdd', '#grid_agreement-gridpager', { 
     caption: 'Save Settings | ', 
     title: 'Save Grid Columns', 
     onClickButton: function() { 
      saveColumnConfiguration($('#grid_agreement'), '/sf/agreement/', 1); 
     } 
    }); 

    $('#grid_agreement').jqGrid('navButtonAdd', '#grid_agreement-gridpager', 
     { 
      caption: 'Edit | ', 
      title: 'Edit', 
      onClickButton: function() { 
       var gsr = $('#grid_agreement').jqGrid('getGridParam', 'selarrrow'); 
       if (gsr.length > 0 && gsr[0] != '') { 
        $('#edit_agreement_dialog #agreements_id').val(gsr); 
        $('#form_message').addClass('hidden'); 
        $('#edit_agreement_dialog').dialog('open'); 
       } 
       else { 
        alert('Please select at least one item.'); 
       } 
      } 
     }); 

    $('#gbox_grid_agreement').bind('sortstop', function() { 
     saveColumnConfiguration($('#grid_agreement'), '/sf/agreement/', 1); 
    }); 
    $('#grid_agreement-gridpager_left').addClass('navigationcontrols'); 
    $('#grid_agreement-gridpager_left').clone(true).insertBefore('#grid_agreement_toppager_left'); 
    $('#grid_agreement_toppager_left').remove(); 
    $('#grid_agreement_toppager_right').html('<div class="quicksearchsection"><input type="text" id="grid_agreement-quicksearchtext" placeholder="Search" /><input type="button" class="search_button" style="position: relative; left: -1px" value="&nbsp;" id="grid_agreement-quicksearchbutton" /> <a id="grid_agreement-quicksearchreset" href="javascript:void(0);" style="text-decoration:underline;">X</a></div>'); 
    $('#grid_agreement_right').clone(true).insertAfter('#grid_agreement_toppager_right'); 
    $('#grid_agreement-quicksearchbutton').click(function() { 
     var value = $('#grid_agreement-quicksearchtext').val(); 
     $('#grid_agreement').jqGrid('setGridParam', { 
      postData: { 
       'quicksearch': 1, 
       'val': value 
      } 
     }).trigger('reloadGrid', [{page: 1}]); 
    }); 

    $('#grid_agreement-quicksearchtext').on('keydown', function (key) { 
     if (key.keyCode === 13) { 
      $('#grid_agreement-quicksearchbutton').click(); 
     } 

    }); 
    $('#grid_agreement-quicksearchreset').click(function() { 
     $('#grid_agreement-quicksearchtext').val(''); 
     $('#grid_agreement-quicksearchbutton').click(); 
    }); 
}); 

但第一列看起来像一个图片：

当然，如果我移动鼠标到数字它会弹出，但我想使这个专栏自动大小，如果可能的话。任何帮助？

Answer 1

您可以使用该选项rownumWidth，默认为25。它始终是最好先咨询文档