asp.net jqGrid下拉多选 [英] asp.net jqGrid dropdown multiselect

问题描述

我试图使用jQuery multiselect插件在表单编辑jqGrid（添加表单）。

这是我使用的代码（ colModel extract）来构建下拉菜单：

  {
 name：'CaratteristicheCamera'，
 index：'CaratteristicheCamera'，
 width：50，
 hidden：true，
 edittype：'select'，
 editable：true，
 editrules：{edithidden：true，required：true}，
 editoptions：{
 multiselect：true，
 dataUrl：'<％＃ResolveUrl（〜/ Service / Domain / ServiceRoom.asmx / GetRoomFeatureList）％>'，
 buildSelect：function（data）{
 var retValue = $ .parseJSON（data）; 
 var response = $ .parseJSON（retValue.d）; 
 
 var s ='< select id =CaratteristicheCameraname =CaratteristicheCamera>'; 
 
 if（response&& response.length）{
 for（var i = 0，l = response.length; i< l; i ++）{
s + ='< option value ='+ response [i] [Id] +'>'+ 
 response [i] [Descrizione] +'< / option& 
} 
} 
 
 return s +< / select>; 
}，
 dataInit：function（）{
 $（＃CaratteristicheCamera）。 
} 
} 
 
}，
  

你们可以看到，jqGrid调用webmethod放在asmx文件中。一切似乎工作确定，但我不能收到用户从下拉菜单中选择的所有值。似乎系统向服务器发送最后一次选择。

编辑：这是asmx webservice声明

  [WebMethod] 
 public string SaveRoom（string id，string codice，string Numero，string NumeroPiano，
 string Nome，string TipoCamera，string StatoCamera，
 string CaratteristicheCamera，string TipoSdoppiabilita）
 {} 
  

解决方案

我试过， Firebug 或开发人员工具的IE或Chrome（参见HTTP流量在网络选项卡）演示发布数据像

  {name ：test8，closed：No，ship_via：FE，TN，oper：edit，id：8} 
  

到 http://www.ok-soft-gmbh.com/jqGrid/test.asmx/dummy 。因此，所选项 FedEx，TNT 的值FE，TN将按预期发送。在您的情况下， CaratteristicheCamera 参数 SaveRoom 应该初始化为逗号分隔的选定值列表。我希望你会发现你的代码中的问题，如果你比较我的演示与青春。

您发布的代码中的另一个小问题是，你手动序列化到JSON在 WebMethod GetRoomFeatureList 中，并返回 string 。因此，字符串将序列化为JSON 两次。所以你使用

  var retValue = $ .parseJSON（data）; 
 var response = $ .parseJSON（retValue.d）; 
  

正确的将是返回类似 List< Room> 。 ASP.NET将自动序列化它。如果你使用jqGrid选项

  ajaxSelectOptions：{
 contentType：'application / json; charset = utf-8'，
 dataType：json
} 
  

将不需要解析 buildSelect 中的数据。您可以直接在循环中使用 data.d [i] .Id 和 data.d [i] .Descrizione 中。我对您的旧问题另一个答案提出了同样的问题。

i'm trying to use jQuery multiselect plugin in a form editing jqGrid (add form).

This is the code (colModel extract) I'm using to build the dropdown:

{ 
    name: 'CaratteristicheCamera',
    index: 'CaratteristicheCamera', 
    width: 50, 
    hidden: true, 
    edittype: 'select',
    editable: true, 
    editrules: { edithidden: true, required: true }, 
    editoptions: {
        multiselect: true,
        dataUrl: '<%# ResolveUrl("~/Service/Domain/ServiceRoom.asmx/GetRoomFeatureList") %>',
        buildSelect: function (data) {
            var retValue = $.parseJSON(data);
            var response = $.parseJSON(retValue.d);

            var s = '<select id="CaratteristicheCamera" name="CaratteristicheCamera">';

            if (response && response.length) {
                for (var i = 0, l = response.length; i < l; i++) {
                    s += '<option value="' + response[i]["Id"] + '">' +
                        response[i]["Descrizione"] + '</option>';
                }
            }

            return s + "</select>";
        },
        dataInit: function() {
            $("#CaratteristicheCamera").multiselect();
        }
    }

},

As you guys can see, jqGrid call webmethod placed in asmx file. Everything seems to work ok, but I can't receive all the values user select from the dropdown. It seems that the system send to the server the last selection. Do u have any tips on it?

EDIT: this is the asmx webservice declaration

[WebMethod]
public string SaveRoom(string id, string codice, string Numero, string NumeroPiano,
                       string Nome, string TipoCamera, string StatoCamera,
                       string CaratteristicheCamera, string TipoSdoppiabilita)
{}

解决方案

I tried Eric Hynds jQuery UI MultiSelect Widget together with jqGrid 3.4.1 and couldn't see any problem which you described. I recommend you compare your demo with my to find the differences.

One bad thing which I see in your code is that you set id="CaratteristicheCamera" attribute on the <select> which you generate in buildSelect. You should just use <select> without any additional attributes. The jqGrid will set itself all attributes like id or multiple="multiple".

In the demo I used editurl: 'test.asmx/dummy' which not exist on the server. So one sees the error message like

after choosing and submitting the selected items

Nevertheless one can see with respect of tools like Fiddler, Firebug or Developer Tools of IE or Chrome (see HTTP traffic in "Network" tab) that the demo post the data like

{"name":"test8","closed":"No","ship_via":"FE,TN","oper":"edit","id":"8"}

to the http://www.ok-soft-gmbh.com/jqGrid/test.asmx/dummy. So the values "FE,TN" of selected items FedEx, TNT will be send as expected. In your case the CaratteristicheCamera parameter of SaveRoom should be initialized to the comma separated list of selected values. I hope you will find the problem in your code if you compare my demo with youth.

Another small problem in the code which you posted is that you make serialization to JSON manually in the WebMethod GetRoomFeatureList and returns string. So the string will be serialized to JSON twice. So you use

var retValue = $.parseJSON(data);
var response = $.parseJSON(retValue.d);

Correct will be to return something like List<Room>. ASP.NET will serialize it automatically. If you would use the jqGrid option

ajaxSelectOptions: {
    contentType: 'application/json; charset=utf-8',
    dataType: "json"
}

the data in buildSelect will be not needed to parsed at all. You can directly use data.d[i].Id and data.d[i].Descrizione in the loop. I wrone you about the same problem in another answer on your old question.

这篇关于asp.net jqGrid下拉多选的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！