Jqgrid 获取和设置列宽

Question

我在这里查看了其他答案，但没有运气。我有一个 jqgrid，我想保持列宽。我将调整大小停止事件的宽度保存到数据库，然后每次加载网格时，我将 colModel 中的宽度设置为存储在数据库中的宽度，但它永远不是正确的宽度。例如，我在 db 中存储了 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 方法，其作用与我最初在 the old answer 中建议的 setColWidth 相同。我将setColWidth 包含在我发布的免费 jqGrid 的第一个版本中。

我建议您阅读the answer，其中包括the demo。在我看来，该演示实现了非常接近年轻人的要求。它在 Web 浏览器的localStorage 中保存/恢复网格状态（包括列宽和许多其他），而不是通过 Ajax 将数据发送到服务器。我认为您可以根据您的要求修改代码。