Question

美好的一天！

我正在研究一个项目，我正在使用JQGrid来显示我的数据。作为其功能的一部分，用户可以选择列并将这些列作为其默认列。

我使用'columnChooser'让我的用户选择默认列。

我现在的问题是，如何检索用户所选的列？
以及如何将这些列设置为默认列？

有人可以帮我解决这个问题。

由于

杰森

Answer 1

用户更改列布局后，您可以从网格中获取colModel，遍历它并将配置推送到json对象数组中，然后将其发送到服务器。以下代码执行此操作：

function saveColumnConfiguration(grid, url) {
    if (url.length > 0) {
        var colArray = new Array();
        var colModel = grid[0].p.colModel;
        for (var i = 0; i < colModel.length; i++) {
            if (colModel[i].name != "rn" && colModel[i].name != "cb") {
                colArray.push({
                    Name: colModel[i].name,
                    Width: colModel[i].width,
                    Visible: !colModel[i].hidden
                });
            }
        }
        $.ajax({
            url: url,
            type: 'POST',
            data: 'columnConfiguration=' + JSON.stringify(colArray)
        });
    }
}

检查“rn”和“cb”表示不要使用rownumber和checkbox列。

<强>更新

您需要一个类来表示列：

[Serializable]
public class JqGridColumn
{
    public string Name { get; set; }
    public int Width { get; set; }
    public bool Visible { get; set; }
}

您还需要自定义模型绑定器来反序列化传入列表：

public class JqGridConfigurationModelBinder : IModelBinder
{
    public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
    {
        var conf = bindingContext.ValueProvider.GetValue("columnConfiguration").AttemptedValue;

        JavaScriptSerializer serializer = new JavaScriptSerializer();
        var configuration = serializer.Deserialize<IEnumerable<JqGridColumn>>(conf);

        return configuration;
    }
}

在应用程序开始时注册模型绑定器：

ModelBinders.Binders.Add(typeof(IEnumerable<JqGridColumn>), new JqGridConfigurationModelBinder());

处理列表的控制器中的操作将是这样的：

public void SaveColumnConfiguration(IEnumerable<JqGridColumn> columnConfiguration)
{
    // Save the list accordingly...
}

请注意，列的顺序由它们在列表中的位置表示。然后，您可以轻松读取此配置并渲染网格。

更新2

你的案例中的函数应该像这样调用

saveColumnConfiguration($("#freight_bill"), "/Controller/Action");

但是在调用columnChooser之后不是。您可以在用户选择时创建另一个按钮来保存更改，也可以从列选择器处理done事件，如下所示：

$("#freight_bill").jqGrid('columnChooser', {
    done: function (perm) {
            if (perm) { 
                $("#freight_bill").jqGrid("remapColumns", perm, true, false); 
            }
            saveColumnConfiguration($("#freight_bill"), "/Controller/Action");
        }
});

如何使用JQGrid中的columnchooser检索列值？

1 个答案: