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

Question

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

Answer 1

当与数据库初始化下拉列表，应该将其绑定到数据源（或DataAdapter的） ，并应该设置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初始化之前。然后在updaterow定义中（它在源定义中）应该使用选定的下拉值。这可能是这样的：

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'); 
         }); 
        } 
       }] 
     }); 

Answer 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'} 
);