Question

我有一个jqGrid，我试图让用户选择保存自己的视图。这些视图存储在带有所有参数的db中。我有大约30列，所以它不可能在一个页面中适应整个网格，所以我给了选择移动行，调整宽度等，然后能够保存参数。

为此我有这个代码将整个网格保存在DB

中

var saveLayoutDialog =
    "<div title='Save Layout'>"+
    "<label style='width: 100%; !important;'>Name the layout</label></br>" +
    "<input type='text' name='nameOfLayout' id='nameOfLayout' placeholder='Name of Layout' style='width: 100%; !important;'>" +
    "</div>";
$(saveLayoutDialog).dialog({
    modal: true,
    buttons: {
        'OK': function () {
            $.ajax({
                type: 'POST',
                url: Routing.generate('save_grid_parameters_homepage', { gridName: 'PODetail' }) ,
                data: {
                    'layoutName': $("#nameOfLayout").val(),
                    'gridData': JSON.stringify($("#list").getGridParam())
                },
                success: function(data){
                    if(data.success == 'success')
                    {
                    }
                    else if(data.success == 'fail')
                    {
                    }
                }
            });
            $(this).dialog('close');
        },
        'CANCEL': function () {
            $(this).dialog('close');
        }
    }
});

这工作正常，我可以将数据保存在dB上。

在网格上我有一个按钮来改变布局的设计。因此，当用户点击按钮时，会出现可用的布局（以前保存在dB中），用户可以选择一个，网格的设计也应相应改变。

这是按钮的代码：

.navButtonAdd("#pager",{
    id: "changeDesign",
    caption:"Change Design",
    onClickButton: function(){
        var htmlForPopup = "<div id='changeDesign' title='Change Design'>"+
            "<label style='width: 100%; !important;'>SELECT A DESIGN</label>" +
            "<div class='radio'>";

        $.ajax({
            url: Routing.generate('get_grid_layouts_homepage', { gridName: 'PODetail' }),
            success: function(data){
                $.each (data, function (bb) {
                    htmlForPopup +=
                        "<input type='radio' name='gridLayouts' id='"+data[bb].layoutName+"' value='"+data[bb].gridData+"' style='width: 20%; !important;'>"+data[bb].layoutName+"</br>";
                });
                htmlForPopup += "</div></div>";
                $(htmlForPopup).dialog({
                    modal: true,
                    buttons: {
                        'OK': function() {
                            //console.log(JSON.parse($('input[name=gridLayouts]:checked').val()));
                            $("#list").setGridParam(JSON.parse($('input[name=gridLayouts]:checked').val())).trigger("reloadGrid");
                            $(this).dialog('close');
                        }
                    }
                });
            }
        });
    }
});

问题：所需功能无法正常运行。行没有四处移动，移动的列数据没有正确显示。

示例： 这是默认加载的理想网格。这是弹出窗口，显示单击上面显示的按钮代码。

点击其中一个选项后，理想情况下，Discount列和Cost列也应使用各自的数据切换其位置。但事实并非如此，相反，这种情况正在发生：折扣和成本列的数据正在切换，但标题本身未切换。同样位于Cost下（理想情况下，Discount列的数据会转换为NaN（我假设这是因为数据类型不匹配）

我在这里做错了什么？

编辑1： jqGrid版本4.8.2，如果需要完整的jqGrid，请告诉我，我会用代码更新问题。

编辑2 ：工作fiddle

Answer 1

您使用一个参数调用setGridParam：您从$('input[name=gridLayouts]:checked').val()获得的值。之后，您只需调用reloadGrid即可重新加载数据，而无需重新加载jqGrid的许多其他选项。如果网格的外部部分必须使用相应的jqGrid方法进行一些更改。例如，您必须使用remapColumns或更好remapColumnsByName来切换列（例如，列＃34;折扣＆＃34;和＆＃34;费用＆＃34;例如）。同样，您需要使用showCol / hideCol方法来显示/隐藏网格列，依此类推。 jqGrid参数的某些更改需要重新创建网格。

我建议您尝试为the demo创建的the answer。该演示展示了如何在Web浏览器的localStorage中保存网格的状态。尝试重新排序演示中的列，隐藏一些列，更改排序顺序，选择一行，然后使用F5重新加载页面（重新打开同一页面）。这不完全是你做的，但最技术问题是一样的。我希望它能帮助您实现您的要求。

P.S。再次感谢free jqGrid中的错误报告。我将the corresponding fix发布到了GitHub。

JqGrid持久化网格参数并检索它 - 无法设置它

1 个答案:

JqG​​rid持久化网格参数并检索它 - 无法设置它

1 个答案:

JqGrid持久化网格参数并检索它 - 无法设置它