将select2与jqGrid一起使用时，为select选择正确的值 [英] Select right value for select when using select2 with jqGrid

问题描述

我在jqGrid中使用 select2 . 对于选择"要素，我遵循:

I'm using select2 with jqGrid. For "select" elemets I do folowing:

{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时，请在默认模式下选择.如何让select2在editform中选择正确的值?

But when open editForm select in in default mode. How to get select2 to select right value in editform ?

=======

其他信息. 我有jqGrid. colModel中的一列如下所示:

Additional info. I have jqGrid. One of the column in the colModel looks like this:

{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},

因此，选择2元素，显示选择工作地点". 结果编辑表单现在已选择了有效值.但是我尝试编辑行，并且这是行已选择的元素.为什么在尝试编辑行时select2不显示正确的选定值? 正如Oleg在下面写的那样，我尝试像这样更改colModel:

So, select2 element showing "Choose job place". result editformThere is now selected vaule. But I try to edit row and this is row already have selected element. Why select2 not showing right selected value when I try do edit row? As Oleg wrote below I try to change my colModel like this:

{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完全停止按预期工作.

But I get folowing on editform: select2 completely stop to work as expected.

推荐答案

在我看来，问题的原因很容易.您以错误的方式使用selectFilled. 免费jqGrid 中引入的大多数回调具有一个参数options具有不同的属性，供回调使用.这样一来，无需声明未使用的参数就可以编写短代码，而以后又可以扩展回调的选项列表而又不破坏对先前版本的兼容性.换句话说，您可以通过以下方式使用select2例如:

It seems to me that the reason of the problem very easy. You use selectFilled in the wrong way. The most callbacks introduced in free jqGrid have one parameter options which have different properties which can be used by the callback. In the way one can write short code without declaring unused parameters and one can extend the list of option of the callback later without breaking compatibility to the previous versions. In other words you can use select2 in the following way for example:

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

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

The usage of dropdownCssClass fixes the font size and the style of the dropdown created by select2.

该演示演示了上述内容代码.它使用

The demo demonstrates the above code. It uses

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

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

where the data loaded from dataUrl has the following HTML fragment

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

该演示同时适用于内联编辑和表单编辑. GUI如下图所示:

The demo works with both inline editing and form editing. The GUI looks like on the pictures below:

和

这篇关于将select2与jqGrid一起使用时，为select选择正确的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！