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

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”的检查意味着不要取行号和复选框列。

更新

您将需要一个类来表示列：

[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");
        }
});