Question

我在jqGrid中使用select2。对于＆＃34;选择＆＃34;我做的是：

{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中选择正确的值？

=======

其他信息。我有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元素显示＆＃34;选择工作地点＆＃34;。 result editform现在已经选择了vaule。但我尝试编辑行，这是行已经选择的元素。当我尝试编辑行时，为什么select2没有显示正确的选择值？正如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},

使用带有jqGrid

2 个答案: