Jqgrid獲取並設置列寬

Question

我在這裏看過其他答案，並沒有運氣。我有一個jqgrid，我想保持列的寬度。我將resize Stop事件的寬度保存到一個數據庫，然後每次加載網格時，我將colModel中的寬度設置爲存儲在數據庫中的寬度，但它永遠不會是正確的寬度。例如我有420存儲爲在列名稱的數據庫中的寬度，但當我加載網格，並檢查col模型，它有150的寬度。我檢查並確保正確的價值被傳回，所以我不能理解爲什麼jqgrid不會使用它。

我不知道爲什麼，但它的jqgrid忽略了我在colmodel中傳遞的寬度。我在下面列出了我的jqgrid的減少版本。感謝您的任何幫助。

$('#ProjectTable').jqGrid({ 
     datatype: 'json', 
     url: '<%= Url.Action("projectGridData", "SampleSelection") %>', 
     mType: 'POST', 
     colNames: [ 
     htmlDecode("<%=Atmis.EncodedLabel("Sample.Project.ProjectId", "ID") %>"), 
     "", 
     htmlDecode("<%=Atmis.EncodedLabel("Sample.Project.Name", "Name") %>"), 
      htmlDecode("<%=Atmis.EncodedLabel("Sample.Project.Code", "Code") %>"), 
      htmlDecode("<%=Atmis.EncodedLabel("Sample.Project.Manager", "Manager") %>"), 
       htmlDecode("<%=Atmis.EncodedLabel("Sample.Project.StartDate", "Start Date") %>"), 
       htmlDecode("<%=Atmis.EncodedLabel("Sample.Project.CompletionDate", "CompletionDate") %>"), 
       htmlDecode("<%=Atmis.EncodedLabel("Sample.Project.Remark", "Remark") %>"), 
       htmlDecode("<%=Atmis.EncodedLabel("Sample.Project.Status", "Status") %>"), 
       "" 
       ], 
     colModel:[ 
     {name: 'FieldProjectId', width: 10, align: 'center', key: true, search: false, hidden: true}, 
     {name: 'Edit', width: 30, search: false, sortable: false, align: 'center'}, 
     {name: 'Name', width: ColumnManager.GetColumnWidth('ProjectTable', 'Name'), index: 'Name', editable: true}, 
     {name: 'Code', width: 50, index: 'Code', editable: true}, 
     {name: 'Manager', width: 100, index: 'Manager', editable: true}, 
     {name: 'StartDate', width: 65, index: 'StartDate', search: true, formatter : 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'd/m/Y'}, editable: true,editoptions : { dataInit: function (elem) { $(elem).datepicker({ 
         changeMonth: true, 
         changeYear: true, 
         showWeek: true, 
         onSelect : function() { $('#ProjectTable')[0].triggerToolbar(); } 
        }).keyup(function(e) { 
         if (e.keyCode == 8 || e.keyCode == 46) { 
          $.datepicker._clearDate(this); 
         } 
        }); 
       }}, searchoptions: { dataInit: function (elem) { $(elem).datepicker({ 
         changeMonth: true, 
         changeYear: true, 
         showWeek: true, 
         onSelect : function() { $('#ProjectTable')[0].triggerToolbar(); } 
        }).keyup(function(e) { 
         if (e.keyCode == 8 || e.keyCode == 46) { 
          $.datepicker._clearDate(this); 
         } 
        }); 
       } }}, 
     {name: 'CompletedDate', width: 65, index: 'CompletedDate', formatter : 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'd/m/Y'}, editable: true, editoptions : { dataInit: function (elem) { $(elem).datepicker({ 
         changeMonth: true, 
         changeYear: true, 
         showWeek: true, 
         onSelect : function() { $('#ProjectTable')[0].triggerToolbar(); } 
        }).keyup(function(e) { 
         if (e.keyCode == 8 || e.keyCode == 46) { 
          $.datepicker._clearDate(this); 
         } 
        }); 
       }}, sorttype:'date' , searchoptions: { dataInit: function (elem) { $(elem).datepicker({ 
         changeMonth: true, 
         changeYear: true, 
         showWeek: true, 
         onSelect : function() { $('#ProjectTable')[0].triggerToolbar(); } 
        }).keyup(function(e) { 
         if (e.keyCode == 8 || e.keyCode == 46) { 
          $.datepicker._clearDate(this); 
         } 
        }); 
       }}}, 
     {name: 'Remark', width: 200, index: 'Remark', search: false, editable: true}, 
     {name: 'Status', width: 95, index: 'Status', editable: true }, 
     {name: 'Delete', width: 20, search: false, sortable: false, align: 'center'}, 
     ], 
     caption: htmlDecode("<%=Atmis.EncodedLabel("Sample.Project.Caption", "Project") %>"), 
     width: $('#tabs-projects').width() - 20, 
     //shrinkToFit: false, 
     sortname: 'FieldProjectId', 
     loadui: 'block', 
     rowNum: 20, 
     rowList: [10,25,50,100,200], 
     sortorder : 'desc', 
     headertitles:true, 
     resizeStop: function(width, index) { 
      var colModel = $("#ProjectTable").jqGrid('getGridParam','colModel'); 

      ColumnManager.SetColumnWidth("ProjectTable",colModel[index].name,width); 
      alert(JSON.stringify(colModel)); 

     }, 
     height: 'auto', 
     viewrecords: true, 
     toolbar: [true, "top"], 
     pager: $('#ProjectPager') 
           } 
          }); 
        }, 1000); 

       }); 
     } 
     } 
     ).filterToolbar(); 

     $('#ProjectTable').navGrid('#ProjectPager', { 
     search: false, 
     add: false, 
     edit: false, 
     del: false, 
     refresh: true 
     }); 

而且設置和獲取列寬的功能：

 var ColumnManager = { 
     SetColumnWidth : function(grid, column, value) 
     { 
      $.ajax({ 
        url: '<%= Url.Action("SaveGridColumWidthPreference", "SampleSelection") %>', 
        dataType: 'json', 
        type: 'POST', 
        data: { 
         gridID: grid, 
         width: value, 
         colName: column 
        }, 
        success:function(data) { 
        } 
       }); 
     }, 
     GetColumnWidth : function(grid, column) 
     { 
      $.ajax({ 
        url: '<%= Url.Action("GetGridColumWidthPreference", "SampleSelection") %>', 
        dataType: 'json', 
        type: 'POST', 
        data: { 
         gridID: grid, 
         colName: column 
        }, 
        success:function(data) { 
         if(data > 0) 
         { 
          alert(data); 
          return data; 
         } 
         else 
         { 
          alert(projectDefaults["name"]); 
          return projectDefaults["name"]; //should return default here 
         } 
        } 
       }); 
     }, 
     ReturnColumnWidth : function(){ 

     } 
    }; 

Answer 1

我不跟隨Guriddo jqGrid JS因爲我開發free jqGrid開始其變化的jqGrid 4.7.1的許可協議，並在Guriddo重命名jqGrid JS。儘管如此，我發現你使用的Guriddo jqGrid JS 5.0.1有resizeColumn方法，它與setColWidth相同，我最初在the old answer中建議過。我在我發佈的免費jqGrid的第一個版本中包含了setColWidth。

我建議您閱讀the answer其中包括the demo。在我看來，這個演示實現了非常緊密的需求。它在Web瀏覽器的localStorage中保存/恢復網格狀態（包含列寬和許多其他），而不是通過Ajax將數據發送到服務器。我認爲你可以修改對應你的requiremnets的代碼。