使用Handsontable保存下拉选项

时间:2015-11-22 00:00:40

标签: jquery json ajax handsontable

我在Handsontable中的列上设置了ajax调用,以返回存储在我的数据库中的选项。

columns: [
    {data: 'firstName'},
    {data: 'lastName'},
    {data: 'department',  
        type: 'dropdown',
        strict: false, 
        source: function(query, process){ 
            $.ajax({
            url: '/getDepartments',
            dataType: 'json',
            success: function (response) {
              var values = [];
              for (i in response) values.push(response[i].name);
              process(values);
            }
        });
    }

我的部门列表填写正常,但是当我持续进行任何更改时,我需要发送部门的ID(因为此ID是我的用户表中的外键)。我想知道如何使用HOT实现这一点 - 他们是否提供了一种方法来将int值绑定到字符串以用于此类情况?

我还以为我可以将ID存储在一个隐藏的单元格中,但是在创建比我需要的更多工作之前,我还要更多地阅读API

2 个答案:

答案 0 :(得分:1)

隐藏的单元格是去这里的方式。典型的解决方案是将隐藏的单元格作为数据对象的一部分,并通过不在DONE定义中定义它来隐藏它。没有其他方法可以使用HOT将ID绑定到行。

答案 1 :(得分:0)

我使用https://github.com/trebuchetty/Handsontable-select2-editor来解决这个问题。

您必须包含repo中提供的.js文件,并定义所需的customDropdownRenderer。

function customDropdownRenderer(instance, td, row, col, prop, value, cellProperties)
{
    var selectedId;
    for (var index = 0; index < optionsList.length; index++)
    {
        if (parseInt(value) === optionsList[index].id)
        {
            selectedId = optionsList[index].id;
            value = optionsList[index].text;            
        }
    }
    Handsontable.TextCell.renderer.apply(this, arguments);
    // you can use the selectedId for posting to the DB or server
    $('#selectedId').text(selectedId);
}

工作示例在这里:http://jsfiddle.net/trebuchetty/tLp0dnga/