Handsontable投稿前にオートコンプリート値をキーで置き換えてください

Question

私はHandsOnTableを使用して、自分のサイトでより多くのインタラクティブなデータベーステーブルを編集しています。

HandsOnTableは、データベースの一部の列が実際にローカル文字列値ではなく外部キーを実際に格納することを除いて、ほぼすべての要件を満たしています。

これらの列は、ユーザーが前述の外部キー（つまり、HTML名/値selectのようなもの）にマップされた読み取り可能な値を選択するドロップダウンメニューとして表示されます。

残念ながら、HandsOnTableにはこのようなセルタイプはありません。それに最も近いのはautocompleteです。これにより、ドロップダウンを作成することができますが、値は含まれています。対応するキーはありません。ここではそれが作成される方法です。

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

：テーブルをレンダリングするためにHandsOnTableで必要なパラメータを含む

ワン：

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

それでは、私が予定しており、サーバから2つのJSON文字列を送信することです値これまで

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

とても良いと

第2のマッピングキー。今トリッキーな部分のため：

HandsOnTableは私が戻ってサーバーに送信する準備ができてJSON文字列としてテーブルデータを取得することを可能にする機能（getData()）を持つ：

JDATAは何かを見てしまう

var jdata = myHandsOnTable.getData(); 

このように：投稿する前に今すぐ

"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

私は同様の問題を持っていたし、ここで私がやったことだ...それぞれの外部キー列の場合

、私はhandontableに2つの値を格納しました。 1つはID自体のために、私は非表示の列として設定し、もう1つはドロップダウンとしてのユーザーフレンドリーな読み取り可能なテキスト値です。

ドロップダウンの値が変更されるたびに、対応する隠しIDも変更します。私の場合は、私はキーと値のペアをマップするために使用するフィルタとしてhandsontableの外にドロップダウンを持っていますが、ハッシュテーブルや他のものを使うことができます。

ここでコード...

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

この方法で、あなたはあなたのように外部キーを変更します保存する前にループする必要はありません。また、テーブルデータをサーバーに戻すのも簡単です。

で要約、

• ユーザが（タイプautocompleteである）CategoryNameカラムと相互作用します。
• colWidthsオプションのhandsontableを使用して列幅を0に設定すると、CatgoryID列がユーザーに表示されなくなります。
• CategoryNameフィールドが変更された場合は、afterChangeイベントを使用して対応するCategoryID列を設定します。私の場合は、ページ上のドロップダウンを使用してName => IDをマップしますが、ハッシュテーブルなどの他の手段を使用することもできます。私はそれが理にかなって願っています

...

Answer 2

jExcelがk => Vのドロップダウンを完全にサポートしていhandsontableための代替プラグインです。おかげで@PostureOfLearning 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>