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

现在，在发布之前，我想将 Customer 节点的值替换为 mappings json 字符串中的匹配键对。

如何在 JavaScript/JQuery 中最好地实现这一点？

是否有一个函数可以按如下方式工作？

jdata.replaceNode('node', mappings)

谢谢

Answer 1

我遇到了类似的问题，这就是我所做的......

对于每个外键列，我在 handsontable 中存储了 2 个值；一个用于 ID 本身，我将其设置为隐藏列，另一个是作为下拉列表的用户友好的可读文本值。

每次更改下拉列表的值时，我也会更改相应的隐藏 ID。在我的例子中，我在 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)进行交互。
• 通过使用 handsontable 的 colWidths 选项将列宽设置为 0，用户可以隐藏 CatgoryID 列。
• 当CategoryName字段发生变化时，使用afterChange事件设置相应的CategoryID列。就我而言，我在页面的其他地方使用下拉列表来映射名称 => ID，但您可以使用其他方式，例如哈希表。

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