具有 select2 现有值的 JqGrid 搜索选项

Question

我正在尝试为 JqGrid 过滤器表单集成 select2。我正在使用 JqGrid 最小 4.6 和 Select2 最小 4.0.1。过滤器工作正常，但一旦过滤器表单关闭并重新打开，我就无法检索通过 select2 设置的值。即 dataInit e1 不 return select 输入的现有值。我一定是做错了什么？

JqGrid 列模型：

        {
            name: 'CurrencyID', hidden: true, search: true, stype: 'select', searchtype: 'number', searchoptions: {
                searchhidden: true,
                sopt: ['eq', 'ne'],
                dataInit: function (el) {
                    intiGridFilterSelecr2Field(el, paramFromView.CurrencyOptions);
                }
            },
            searchrules: { required: true }
        },

参数：

@section scripts{
<script>
   var paramFromView = {
        CurrencyOptions: {
            searchURL: '@Url.Action("GetCurrency", "Controller")',
            detailURL: '@Url.Action("CurrencyDetailsJson", "Controller")',
            idField: 'CurrencyID',
            txtField: 'Description'
        }
   };
</script>
}

选择 2 个助手：

function intiGridFilterSelecr2Field(element, options) {
var comboPageSize = 15;
var quietMillis = 200;
var placeHolderText = 'Choose...'

var defaults = {
    searchURL: '',
    detailURL: '',
    idField: '',
    txtField: ''
};
var options = $.extend({}, defaults, options);
var select2Element = $(element);

select2Element.select2({
    width: 'element',
    minimumInputLength: 1,
    placeholder: placeHolderText,
    ajax: {
        url: options.searchURL,
        dataType: 'json',
        quietMillis: quietMillis,
        cache: false,
        data: function (params) {
            return {
                name: params.term,
                page: params.page,
                pageSize: comboPageSize
            };
        },
        processResults: function (data) {
            var more = (data.page * comboPageSize) < data.total;

            var resultsArr = [];
            for (var i = 0; i < data.result.length; i++) {
                resultsArr.push({ id: data.result[i][options.idField], text: data.result[i][options.txtField] });
            }
            return { results: resultsArr, more: more };
        }
    },
}).each(function (index, element) {
    var idCombo = $(this);
     // The problem is that idCombo.val() is always empty.
     // element:select2-hidden-accessible
    if (idCombo.val() != null && idCombo.val().length > 0) {
        $.ajax(options.detailURL, {
            data: {
                id: idCombo.val()
            },
            dataType: 'json',
            cache: false
        }).done(function (data) {
            var optselected = select2Element.find('option').filter(function () { return this.value == data[idField] && this.text == data[txtField] && this.selected })
            if (optselected == undefined || optselected.length == 0) {
                var $optionContact = $("<option selected></option>").val(data[idField].toString()).text(data[txtField]);
                var toBeRemoved = select2Element.find('option').filter(function () { return this.value == data[idField] });
                if (toBeRemoved != undefined) {
                    toBeRemoved.remove();
                }
                select2Element.append($optionContact).trigger('change.select2');
            }
        });
    }

  });
}

正在设置过滤器时...

加载现有过滤器时。如何将此 CurrencyID = 1 传递给 select2 助手？

更新：

根据 Oleg 的回答，我更新了我的代码如下。

            {
            name: 'CurrencyID', hidden: true, searchtype: 'number', search: true,
            stype: "select", searchoptions: {
                searchhidden: true,
                sopt: ["eq", "ne"],
                dataUrl: paramFromView.CurrencyOptions.searchURL,
                buildSelect: function (data) {
                    var obj = jQuery.parseJSON(data);
                    var i, options = [];
                    for (i = 0; i < obj.result.length; i++) {
                        options.push("<option value='" + obj.result[i][paramFromView.CurrencyOptions.idField] + "'>" +
                            obj.result[i][paramFromView.CurrencyOptions.txtField] + "</option>");
                    }
                    return "<select>" + options.join("") + "</select>";
                },
                noFilterText: "Any",
                selectFilled: function (options) {
                    setTimeout(function () {
                        $(options.elem).select2({
                            width: 'element',
                        });
                    }, 0);
                }
            },
            searchrules: { required: true }
        },

我快要实现我想要实现的目标了。但是我仍然面临一些困难。

最初加载过滤器时，下拉列表中的值为 select，但查询值为空。即，如果用户在加载过滤器表单后立即单击查找按钮，则不会设置任何过滤器。
我仍然无法使用 select2 种样式。

Answer 1

我可以演示如何将select2与旧版本4.14.1（当前发布的版本为4.15.3）的free jqGrid fork of jqGrid, which I develop. I get the demo from the README一起使用，并对其进行修改以演示[=的用法72=]2.

代码的主要部分可以是

stype: "select",
searchoptions: {
    sopt: ["eq", "ne"],
    ...
    selectFilled: function (options) {
        setTimeout(function () {
            $(options.elem).select2({
                width: "100%"
            });
        }, 0);
    }
}

参见 https://jsfiddle.net/Lae6kee7/2/。您可以尝试在 "Shipped via" 列的过滤器工具栏中选择一个选项，然后打开搜索对话框。您会看到 select2 将具有相同的选项 selected.

如果您通过 select2 发布的 Ajax 请求加载数据，那么您的代码将会复杂得多。重要的是要理解，只有真正大量的可能值才真正需要这种方式。例如，我指的是大于 100000 件的物品数量。另一方面，大多数用例需要的选项少于 1000 个。在这种情况下，将所有数据加载为 select 的选项，然后将 select 转换为 select2 会更有效。 select2，它使用本地 select 从用户的角度来看工作得更快。

我认为如果您使用 dataUrl 而不是 select2 的 ajax 选项，代码会更简单。您可以从服务器使用 dataUrl 到 return 所有不同的值，这些值可以在 select2 中使用并使用 buildSelect 从 [=70 构建 <select> =] 数据 return 来自服务器。演示 https://jsfiddle.net/Lae6kee7/23/ demonstrates that. I made the demo for JSFiddle, which supports Echo service (see here)，它允许模拟服务器响应。您的真实代码应该主要只包含 dataUrl、buildSelect 和我在上面包含的 selectFilled 的代码。

此外，我建议您考虑使用 <datalist>（例如参见 [=33=]），这可能是替代 select2。所有现代网络浏览器都包含本机对 <datalist> 的支持，因此 <datalist> 运行速度非常快。尝试在我的演示的第一个 Client 列中搜索。您会看到控件，它非常接近 select2。 <datalist> 的额外优势：人们将不能只搜索精确的预定义值，如 test10、test11 或 test12，而是搜索子字符串，如 1。比较

和

或

和

具有 select2 现有值的 JqGrid 搜索选项

JqGrid searchoptions with select2 existing value

asp.net-mvc

jqgrid

jquery-select2-4