13

HandsOnTable を使用して、自分のサイトでデータベース テーブルをよりインタラクティブに編集できるようにしています。

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

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

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

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

したがって、私が計画しているのは、サーバーから 2 つの 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"]}
    ]
}

キーから値への 2 番目のマッピング

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

投稿する前に、ノードの値をjson 文字列Customer内の一致するペア キーに置き換えたいと思います。mappings

JavaScript/JQueryでこれを最もよく達成するにはどうすればよいですか?

次のように機能する関数はありますか?:

jdata.replaceNode('node', mappings)

ありがとう

4

1 に答える 1

8

私は同様の問題を抱えていましたが、これが私がしたことです...

外部キー列ごとに、handsontable に 2 つの値を格納しました。1 つは ID 自体用で、非表示の列として設定し、もう 1 つはユーザー フレンドリーで読みやすいテキスト値をドロップダウンとして設定します。

ドロップダウンの値が変更されるたびに、対応する隠し 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) と対話します。
  • 列は、handsontableCatgoryIDのオプションを使用して列幅を 0 に設定することにより、ユーザーに対して非表示になります。colWidths
  • CategoryNameフィールドが変更されたら、afterChangeイベントを使用して対応するCategoryID列を設定します。私の場合、ページの別の場所でドロップダウンを使用して Name => ID をマップしていますが、ハッシュテーブルなどの他の手段を使用することもできます。

私はそれが理にかなっていることを願っています...

于 2013-07-25T07:42:25.897 に答える