Handsontable

Question

gönderilmeden önce otomatik tamamlama değerlerini anahtarla değiştirin. Düzenleme veritabanı tablolarını sitemde daha etkileşimli yapmak için HandsOnTable kullanıyorum.

HandsOnTable veritabanımdaki bazı sütunların aslında yerel dize değerleri yerine yabancı anahtarları depolaması dışında neredeyse tüm gereksinimlerimi karşılar.

Kullanıcı Arabirimi'nde, bu sütunların, kullanıcının daha önce bahsedilen yabancı anahtarla eşlenmiş bir okunabilir değer seçtiği açılır menüler olarak görünmesini istiyorum (örneğin, bir HTML adı/değeri gibi bir select gibi).

Ne yazık ki HandsOnTable'in böyle bir hücre tipi yok. Buna en yakın şey autocomplete. Bu, bir açılır menü oluşturmamı sağlar, ancak yalnızca değerleri içerir; karşılık gelen anahtar yok. İşte böyle ortaya çıkıyor:

{ 
    "data": [ 
     { "ID": 1, "Description": "Crude", "Volume": 204, "Customer": "jebediah" }, 
     { "ID": 2, "Description": "Hidrogen", "Volume": 513, "Customer": "Bob" }, 
     { "ID": 3, "Description": "Coal", "Volume": '67', "Customer": "Bill" }, 
     { "ID": 4, "Description": "Wood", "Volume": '513', "Customer": "Buzz" } 
    ], 
    "columns": [ 
     { "data": "ID", "type": "numeric" }, 
     { "data": "Description", "type": "text"}, 
     { "data: "Volume", "type": "numeric" }, 
     { "data": "color", "type": "autocomplete", "strict": "true", 
      "source": ["Jebediah", "Bob", "Bill", "Buzz"]} 
    ] 
} 

: tabloyu işlemek için HandsOnTable ihtiyaç duyduğu parametreleri içeren

Bir:

"source": ["Jebediah", "Bob", "Bill", "Buzz"] 

Yani ne planlıyorum sunucudan iki Json dizeleri göndermektir değerler Şimdiye kadar

{ 
    "mappings": [ 
     {"key": 0, "value": "Jebediah"}, 
     {"key": 0, "value": "Bob"}, 
     {"key": 0, "value": "Bill"}, 
     {"key": 0, "value": "Buzz"} 
    ] 
} 

çok iyi için

ikinci haritalama tuşları. Şimdi zor kısmı için:

HandsOnTable bir işlev (getData()) sahiptir hazır bir Json dize sunucuya geri gönderilmek üzere olduğu bana tabloları veri almak için izin verir:

var jdata = myHandsOnTable.getData(); 

jdata görünecektir böyle:

"data": [ 
    { "ID": 1, "Description": "Crude", "Volume": 204, "Customer": "jebediah" }, 
    { "ID": 2, "Description": "Hidrogen", "Volume": 513, "Customer": "Bob" }, 
    { "ID": 3, "Description": "Coal", "Volume": '67', "Customer": "Bill" }, 
    { "ID": 4, "Description": "Wood", "Volume": '513', "Customer": "Buzz" } 
] 

Şimdi göndermeden önce, bunu değiştirmek istiyorum mappings json dize içinde bunların eşleme çifti anahtarla Customer düğüm değerleri.

Bunu JavaScript/JQuery'de nasıl en iyi şekilde yapabilirim?

?:

jdata.replaceNode('node', mappings) 

Teşekkür

Answer 1

ben benzer bir sorunu vardı ve burada ne yaptım aşağıdaki gibi bir şey çalışan bir işlevi var mı ... Her yabancı anahtar sütun için

, Elde edilebilir 2 değer kaydettim; Gizli bir sütun olarak belirlediğim id'in kendisi için, diğeri açılır menü olarak kullanıcı dostu okunabilir metin değeridir.

Bir açılır kapanışın değeri her değiştirildiğinde, ilgili gizli kimliği de değiştiririm. Benim durumumda, anahtar/değer çiftlerini eşlemek için kullandığım bir filtre olarak, bir handikapın dışında bir düşüş var, ancak Hashtables'i ya da başka bir şey kullanabilirsiniz.

Şimdi kod ...

Handsontable yapılandırma:

afterChange: function (changes, source) { AfterChange(changes, source); } 

değişiklik olayı (denilen her tabloda bir değişiklik olduğu) sonra:

function AfterChange(Changes, Source) { 

    if (Source === 'loadData') { 
     return; //don't save this change 
    } 
    var rowIndex = 0, columnID = 1, oldTextVal = 2, newTextVal = 3, ntv = '', nv = ''; 
    $(Changes).each(function() { 
     if (this[columnID] === 'CategoryID') { 
      // Do nothing... 
      //To make sure nothing else happens when this column is set through below 
     } 
     else if (this[columnID] === 'CategoryName') { 
      ntv = this[newTextVal]; 
      //This is where I do my mapping using a dropdown. 
      nv = $('#CategoriesFilterDropdown option').filter(function() { return $(this).text() === ntv; }).val(); 
      //13 is my CategoryID column 
      $container.handsontable('setDataAtCell', this[rowIndex], 13, nv); 
     } 
    }); 
    } 
} 

Bu şekilde, istediğiniz gibi yabancı anahtarları değiştirmek ve kaydetmeden önce tüm bunların arasında döngü yapmanıza gerek yok. Ayrıca, tablo verilerini sunucuya geri gönderilmesini de kolaylaştırır. Özetle olarak

,

• kullanıcı (tip autocomplete ait) CategoryName kolonu ile etkileşime girer.
• CatgoryID sütun, colWidths handsontable seçeneğini kullanarak sütun genişliğini 0 olarak ayarlayarak kullanıcıya gizlenmiştir.
• CategoryName alanı değiştiğinde, ilgili CategoryID sütununu ayarlamak için afterChange olayını kullanın. Benim durumumda, Name => ID'yi haritaya yerleştirmek için sayfada başka bir yere kullanıyorum, ancak hashtable gibi diğer yöntemleri kullanabilirsiniz. Bunun mantıklı umut

...

Answer 2

JExcel k => v açılır menülerini tam destek var handsontable için alternatif eklentidir. Aşağıdaki açıklamak olabilir, http://jsfiddle.net/orz8frko/3/

data = [ 
 
    [3, 'Cheese'], 
 
    [1, 'Apples'], 
 
    [2, 'Carrots'], 
 
    [1, 'Oranges'], 
 
]; 
 

 
$('#my').jexcel({ 
 
    data:data, 
 
    colHeaders: ['Model','Color'], 
 
    colWidths: [ 300, 80 ], 
 
    columns: [ 
 
     { type: 'dropdown', source:[ 
 
      {'id':'1', 'name':'Fruits'}, 
 
      {'id':'2', 'name':'Legumes'}, 
 
      {'id':'3', 'name':'General Food'}] 
 
     }, 
 
     { type: 'text' }, 
 
    ] 
 
});

body { background-color:#eee }

<link rel="stylesheet" type="text/css" href="https://bossanova.uk/components/bossanova-ui/css/jquery.jexcel.css"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://bossanova.uk/components/bossanova-ui/js/jquery.jexcel.js"></script> 
 

 
<div id="my"></div>