jqGrid colModel 动态搜索选项答案

【问题标题】：jqGrid colModel dynamic SearchoptionsjqGrid colModel 动态搜索选项
【发布时间】：2014-03-09 23:49:50
【问题描述】：

是否可以为 jqGrid 列提供动态（非硬编码）搜索过滤器值？

所以在例子中如：

 $('#my-grid').jqGrid({
            datatype: 'json',
            loadonce: true,
            jsonReader: common.jqgrid.jsonReader('Workorder'),
            mtype: 'POST',
            colNames: ['Project', 'PO Number', 'Type', 'Folder'],
            colModel: [
                { name: 'Project', index: 'Project', width: 80, sortable: false, search:false},
                { name: 'PONumber', index: 'PONumber', width: 60, sortable: false, search: true },
                { name: 'Type', index: 'Type', width: 60, sortable: false, search: true},
                { name: 'Folder', index: 'Folder', width: 60, sortable: false, search: false },
                           ],
            scroll: true,
                   });

我希望该类型有一个下拉过滤器，其值是来自数据子集的不同值的数组。

我将如何实现这一目标？

编辑

jqGrid 数据可以直接访问吗？我正在寻找类似的东西 Data.Cols[2].Distinct 这将为我提供第 3 列中不同的值数组（在本例中）。这可能吗？

编辑 2

这是代码：

onLoadComplete: function (data) {
        var $this = $('#gridReport');

        if ($this.jqGrid("getGridParam", "datatype") === "json") {
           
            // first loading from the server
            // one can construct now DISTINCT for 'Type' column and
            // set searchoptions.value
            $this.jqGrid("setColProp", "Type", {
                stype: "select",
                searchoptions: {
                    value: buildSearchSelect(getUniqueNames("Type")),
                    sopt: ["eq", "ne"]

                }
            });            
        }
    },

【问题讨论】：

标签： javascript jquery search jqgrid

【解决方案1】：

我不确定我是否理解正确。可能您想使用具有不同网格 3-d 列值的下拉菜单 (stype: 'select') 的高级搜索对话框？我建议您阅读the answer，它展示了如何动态设置searchoptions.value 的主要思想。你使用loadonce: true。所以你可以在第一次从服务器加载数据时调用loadComplete 内的setColProp。。您可以对datatype 的值进行额外测试。从服务器加载时，值为"json"。稍后将更改为"local"。所以代码可能是这样的：

loadComplete: function () {
    var $this = $(this);

    if ($this.jqGrid("getGridParam", "datatype") === "json") {
        // first loading from the server
        // one can construct now DISTINCT for 'Type' column and
        // set searchoptions.value
        $this.jqGrid("setColProp", "Type", {
            stype: "select",
            searchoptions: {
                value: buildSearchSelect(getUniqueNames("Type")),
                sopt: ["eq", "ne"]
            }
        });
    }
}

【讨论】：

谢谢，我会试着解释我需要什么——它实际上非常简单，我很惊讶没有更简单的方法来做到这一点。我在这里有一个类型列。我需要在过滤器中有一个下拉列表，它只包含返回的数据集中出现的值。因为我已经有了数据，所以我假设我可以简单地执行 gridData.col['Type'].GetDistinct 之类的操作并将这个数组推入过滤器。而已。以上是伪代码。有没有一种简洁的方法可以做到这一点？对于这么简单的事情，您建议的答案似乎有点太复杂了。
Oleg，您的示例看起来应该可以，但事实并非如此。在 onLoadComplete 事件中，jqgrid 告诉我我有 0 列。您确定此事件在数据加载后运行吗？在这一点上，任何帮助将不胜感激。
抱歉，我的意思是说 0 个类型（不是列）。
@sarsnake：我确信您在移动 loadComplete 回调代码中的旧示例中的代码时会出错。您可以发布您使用的当前 JavaScript 代码。数据加载并放入网格后，将调用回调loadComplete。有很多方法可以解决问题。如果您在编写 JavaScript 代码时遇到问题，您可以在服务器响应中包含 gridData.col['Type'].GetDistinct 的值。见the answer 和this one
我设法让它工作，但我只看到 LoadComplete 中的部分数据。所以它认为我有 20 行而不是 60 行。有没有办法利用 LoadComplete 中的整个数据集？当用户滚动时，会显示更多行，但 LoadComplete 不再触发。这是 jqgrid 中的错误吗？我该如何解决它。

【解决方案2】：

这就是我最终这样做的方式，我最终使用 jquery 直接填充下拉列表，因为 jqgrid 过滤器在任何时候都不可用（如果有，我希望看到一个记录的示例）：

 onLoadComplete: function (data) {

        if ($('#mygrid').jqGrid("getGridParam", "datatype") === "json") {

            //get the distinct types from the data set coming back
            var length = data.length;
            var types = [];

            for (var i = 0; i < length; i++) {
                types.push(data[i]['Type']);
            }

            var uniqueTypes = getUnique(types);

            $('#gridId select[name="Type"]').empty().html('<option value="">All</option>');

            for (var i = 0; i < uniqueTypes.length; i++) {
                  $('#gridId select[name="Type"]').append($('<option value="' + uniqueTypes[i] + '">' + uniqueTypes[i] + '</option>'));
            }
        }

【讨论】：