网格单元中 jqwidget 下拉列表的数据库绑定答案

【问题标题】：database binding of jqwidget dropdownlist in grid cell网格单元中 jqwidget 下拉列表的数据库绑定
【发布时间】：2012-07-09 15:30:55
【问题描述】：

在 jqwidget 网格cellediting 示例中（在 jqxGrid 左侧菜单下，打开 Editing/Editing），在客户端生成数据。如何将下拉列表绑定到 asp .net MVC3 项目中的数据库？（您可以在演示选项卡的产品列下查看下拉列表）

【问题讨论】：

标签： jquery asp.net-mvc-3 javascript-framework jqwidget

【解决方案1】：

使用数据库初始化下拉列表时，应将其绑定到数据源（或数据适配器），并应设置 selectedIndex。然后，对于行更新，所选值应保留在选择上。

列定义可能如下：

{ text: 'Urun', columntype: 'dropdownlist', datafield: 'UrunAdi', width: 177,
                  initeditor: function (row, cellvalue, editor) {
                      var urunId = $('#jqxgrid').jqxGrid('getcellvalue', row, "UrunId");
                      editor.jqxDropDownList({ displayMember: 'UrunAdi', source: dropdownListAdapter, selectedIndex: urunId });
                      $(document).on('select', editor, function (event) {
                          selectedUrunId = editor.jqxDropDownList('getSelectedIndex');
                      });
                  }
}

变量“selectedUrunId”应该是全局定义的，可能像var selectedUrunId = -1;在jqxgrid初始化之前。然后在更新行定义中（它在源定义中）应该使用下拉列表的选定值。可能是这样的：

if (selectedUrunId != undefined && selectedUrunId != -1) {
                    rowdata.UrunId = selectedUrunId;
                    selectedUrunId = -1;
                }

这个场景的整体场景是：

        // prepare the data
        var gridSource = {
            datatype: "json",
            datafields: [{ name: 'KargoId' }, { name: 'UrunAdi' }, { name: 'UrunId', type: 'int' }],
            url: 'BindGrid',
            updaterow: function (rowid, rowdata) {
                // synchronize with the server - send update command  
                if (selectedUrunId != undefined && selectedUrunId != -1) {
                    rowdata.UrunId = selectedUrunId;
                    selectedUrunId = -1;
                }                   

                var data = $.param(rowdata);

                $.ajax({
                    dataType: 'json',
                    url: 'UpdateEditGrid',
                    data: data,
                    success: function (data, status, xhr) {
                        gridDataAdapter.dataBind();                            
                    },
                    error: function (xhr, status, error) {
                        alert(JSON.stringify(xhr));
                    }
                });
            }
        };

        var gridDataAdapter = new $.jqx.dataAdapter(gridSource);

        var dropdownSource = {
            datatype: "json",
            datafields: [{ name: 'UrunId' }, { name: 'UrunAdi'}],
            url: 'BindDropdown'
        };

        var selectedUrunId = -1;
        var dropdownListAdapter = new $.jqx.dataAdapter(dropdownSource);

        // initialize jqxGrid
        $("#jqxgrid").jqxGrid(
        {
            width: 670,
            source: gridDataAdapter,
            editable: true,
            theme: theme,
            selectionmode: 'singlecell',
            columns: [
              { text: '#', datafield: 'KargoId', width: 40 },                  
              { text: 'Urun', columntype: 'dropdownlist', datafield: 'UrunAdi', width: 177,
                  initeditor: function (row, cellvalue, editor) {
                      var urunId = $('#jqxgrid').jqxGrid('getcellvalue', row, "UrunId");
                      editor.jqxDropDownList({ displayMember: 'UrunAdi', source: dropdownListAdapter, selectedIndex: urunId });
                      $(document).on('select', editor, function (event) {
                          selectedUrunId = editor.jqxDropDownList('getSelectedIndex');
                      });
                  }
              }]
        });

【讨论】：

【解决方案2】：

您可以使用名为“createeditor”的函数并在其中初始化 DropDownList。

列定义：

{ text: 'Proyecto', columntype: 'dropdownlist', datafield: 'jobid', width: 10,
                      createeditor: function (row, cellvalue, editor) {
                          editor.jqxDropDownList({ displayMember: 'displaylabel', valueMember: 'catalogvalue', source: dropdownListAdapter });
                      }
}

DropDownList 的数据适配器可以使用类似的代码进行初始化：

source = {
    datatype: "xml",
    datafields: [
    { name: 'CompanyName' },
    { name: 'ContactName' },
    { name: 'ContactTitle' },
    { name: 'City' },
    { name: 'Country' },
    { name: 'Address' }
    ],
    async: false,
    record: 'Table',
    url: 'Default.aspx/GetCustomers',
};
var dropdownListAdapter = new $.jqx.dataAdapter(source,
    {  contentType: 'application/json; charset=utf-8'}
);

【讨论】：

最初 valueMember 来了（数字来了，不是文本）；然后，如果您尝试选择另一个项目，您可以看到下拉菜单的 displayMember 文本。另一个问题是，如果您尝试更新，错误的 id 值（或错误的 valueMember）会发送到服务器。