Правильно Заменить значения автозаполнения ключом перед отправкой

Question

Я использую HandsOnTable, чтобы сделать таблицы базы данных редактирования более интерактивными на моем сайте.

HandsOnTable выполняет почти все мои требования, за исключением того, что некоторые столбцы в моей базе данных фактически хранят внешние ключи, а не локальные строковые значения.

В пользовательском интерфейсе я бы хотел, чтобы эти столбцы отображались в виде раскрывающихся меню, где пользователь выбирает читаемое значение, сопоставленное с ранее упомянутым внешним ключом (например, что-то вроде имени/значения HTML select).

К сожалению, HandsOnTable не имеет такого типа ячейки. Самое близкое к этому - autocomplete. Это позволяет мне создать выпадающий список, но он содержит только значения; нет соответствующих клавиш. Вот как он создается:

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

Так что я планирую, чтобы отправить две строки JSON с сервера:

One, содержащий параметры, необходимые 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

У меня была аналогичная проблема, и вот что я сделал ...

Для каждого столбца внешнего ключа, Я сохранил 2 значения в режиме handsontable; один для самого идентификатора, который я устанавливаю как скрытый столбец, а другой - удобное для чтения текстовое значение в виде выпадающих меню.

Каждый раз, когда изменяется значение выпадающего списка, я также изменяю соответствующий скрытый идентификатор. В моем случае у меня есть раскрывающийся список за пределами 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 скрыт от пользователя, установив ширину столбца на 0, используя опцию colWidths.
• При изменении поля CategoryName используйте событие afterChange, чтобы установить соответствующий столбец CategoryID. В моем случае я использую раскрывающийся список где-то еще на странице, чтобы сопоставить Name => ID, но вы можете использовать другие средства, такие как хеш-таблица.

Я надеюсь, что это имеет смысл ...

Answer 2

jExcel альтернативный плагин для handsontable, который имеет полную поддержку к => 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>