使用带有jqGrid的select2时，选择正确的值进行选择

我正在使用select2和jqGrid。 对于“选择”元素，我做了以下事情：

{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元素显示“选择工作地点”。 结果编辑forms现在有选择的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创建的dropdownCssClass的字体大小和样式。

该演示演示了上述代码。 它用

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

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

  FedEx TNT DHL  

该演示适用于内联编辑和表单编辑。 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},