Select 将 select2 与 jqGrid 一起使用时 select 的正确值

Question

我正在使用 select2 和 jqGrid。对于 "select" 个元素，我执行以下操作：

{label:"Teacher",name:"teacher",index:"teacher",editable:true,edittype:"select",
                editoptions:{
                    dataUrl:"../ajax/selects/select_teachers.php",
                    width:"400px",
                    dataInit: function (elem) {
                        $(elem).select2({
                            placeholder: "Choose teacher",
                            allowClear: true,
                            language:"ru"
                        });
                        setTimeout(function() {
                            $(".select2-container").width("300");
                        }, 
                        0);
                    },
                },

但是在默认模式下打开editForm时select。如何在 editform 中获得 select2 到 select 的正确值？

=======

补充信息。我有 jqGrid。 colModel 中的一列如下所示：

{label:"Jobplace",name:"job_place",index:"job_place",editable:true,edittype:"select",
                editoptions:{
                    dataUrl:"../ajax/selects/select_spr_companies.php",
                    dataInit: function (elem) {
                        $(elem).select2({
                            placeholder: "Choose job place",
                            allowClear: true,
                        });
                        setTimeout(function() {
                            $(".select2-container").width("300");
                        }, 
                        0);
                    }
                },hidden:false,align:"center",sortable:true,search:true,searchoptions:{sopt:["cn"]},width:50},

因此，select2 个元素显示 "Choose job place"。 result editform现在有 selected vaule。但我尝试编辑行，这是行已经有 selected 元素。为什么 select2 在我尝试编辑行时没有显示正确的 selected 值？正如 Oleg 在下面所写，我尝试像这样更改我的 colModel：

{label:"Job place",name:"job_place",index:"job_place",editable:true,edittype:"select",
                editoptions:{
                    dataUrl:"../ajax/selects/select_spr_companies.php",
                    selectFilled: function (elem) {
                        $(elem).select2({
                            placeholder: "Choose job place",
                            allowClear: true,
                        });
                        setTimeout(function() {
                            $(".select2-container").width("300");
                        }, 
                        0);
                    }
                },hidden:false,align:"center",sortable:true,search:true,searchoptions:{sopt:["cn"]},width:50},

但是我在 editform 上得到以下信息：select2 完全停止按预期工作。

Answer 1

看来问题的原因很简单。您以错误的方式使用 selectFilled。 free jqGrid 中引入的大多数回调都有一个参数 options，这些参数具有不同的属性，可供回调使用。这样一来，您可以在不声明未使用参数的情况下编写简短的代码，并且可以在以后扩展回调的选项列表而不会破坏与以前版本的兼容性。换句话说，您可以通过以下方式使用 select2，例如：

selectFilled: function (options) {
    $(options.elem).select2({
        dropdownCssClass: "ui-widget ui-jqdialog",
        width: "100%"
    });
}

dropdownCssClass 的用法修复了 select2 创建的下拉菜单的字体大小和样式。

The demo 演示了上面的代码。它使用

edittype: "select", editoptions: {
    dataUrl: "ShippedVia.htm",
    defaultValue: "DHL",
    selectFilled: function (options) {
        $(options.elem).select2({
            dropdownCssClass: "ui-widget ui-jqdialog",
            width: "100%"
        });
    }
}

从 dataUrl 加载的数据具有以下 HTML 片段

<select>
    <option value="FedEx">FedEx</option>
    <option value="TNT">TNT</option>
    <option value="DHL">DHL</option>
</select>

该演示适用于内联编辑和表单编辑。 GUI 如下图所示：

和

Answer 2

谢谢你，奥列格。不管怎样，你让我换个方式思考。这就是我根据需要完成这项工作的方式。

 {label:"Job Place",name:"job_place",index:"job_place",editable:true,edittype:"select",
                editoptions:{
                    dataUrl:"../ajax/selects/select_spr_companies.php",
                    jqGridAddEditAfterSelectUrlComplete:function() {
                        var rid = $("#liststudents").getGridParam('selrow');
                        if (rid != null) {
                            var rowData = jQuery("#liststudents").jqGrid('getRowData',rid);
                            $(this).select2({
                                placeholder: "Choose company",
                                allowClear: true,
                            });
                            var mydata = $(this).select2();
                            mydata.val(rowData.job_place).trigger("change");
                        }
                        $(this).select2({
                            placeholder: "Choose company",
                            allowClear: true,
                        });
                        setTimeout(function() {$(".select2-container").width("300");},0);
                    }
                },hidden:false,align:"center",sortable:true,search:true,searchoptions:{sopt:["cn"]},width:50},

Select 将 select2 与 jqGrid 一起使用时 select 的正确值

Select right value for select when using select2 with jqGrid

jquery

jqgrid

select2