網格單元格中的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'} 
);