Handsontable在發佈之前用鍵替換自動完成值

Question

我正在使用HandsOnTable在我的網站上使編輯數據庫表更具交互性。

HandsOnTable滿足幾乎所有我的要求，除了我的數據庫中的某些列實際存儲外鍵而不是本地字符串值。

在UI中，我希望這些列顯示爲下拉菜單，其中用戶選擇映射到前面提到的外鍵的可讀值（即，如HTML名稱/值select）。

不幸的是，HandsOnTable沒有這樣的單元類型。最接近它的是autocomplete。這允許我創建一個下拉列表，但它只包含值;沒有相應的鍵。下面是它是如何創建的：

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

那麼我計劃是從服務器發送兩個的Json字符串：

一個含HandsOnTable所需的參數來渲染表：

{ 
    "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"]} 
    ] 
} 

第二映射鍵到值

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

到目前爲止好。現在到了棘手的部分：

HandsOnTable有一個函數（getData()），讓我來檢索表中的數據作爲一個JSON字符串準備發送回服務器：

var jdata = myHandsOnTable.getData(); 

凡jdata看起來會像這樣：

"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" } 
] 

現在發佈之前，我想更換，對於與mappings JSON字符串內的匹配對關鍵的Customer節點值。

如何在JavaScript/JQuery中最好地實現這一點？

有如下?:

jdata.replaceNode('node', mappings) 

感謝

Answer 1

我也有類似的問題，這是我做的作品的東西...功能

對於每一個外鍵列，我在handsontable中存儲了2個值;一個用於id本身，我將其設置爲隱藏列，另一個用戶友好的可讀文本值作爲下拉列表。

每次更改下拉列表的值時，我也會更改相應的隱藏標識。在我的情況下，我有一個在handsontable之外的下拉菜單，作爲我用來映射鍵/值對的過濾器，但是您可以使用Hashtables或其他任何東西。

現在代碼...

Handsontable配置：

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

後更改事件（稱爲每次出現在表中的變化）：

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

這樣，你改變了外鍵，你並且在保存之前不需要循環。它還可以很容易地將表格數據發送回服務器。

在摘要，

• 用戶與CategoryName柱（其是autocomplete類型的）相互作用。
• CatgoryID列通過使用handontable的colWidths選項將列寬設置爲0而對用戶隱藏。
• 當CategoryName字段更改時，使用afterChange事件來設置相應的CategoryID列。在我的情況下，我使用頁面上其他地方的下拉列表來映射Name => ID，但是您可以使用其他方法，如散列表。

我希望這是有道理的......

Answer 2

jExcel是一種替代插件handsontable有對於k => v的下拉列表中的全力支持。使用您的下拉條件選項更高級的演示，可以發現：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>