Używam programu HandsOnTable do edytowania tabel bazy danych bardziej interaktywnych w mojej witrynie.Ręczne wymienianie Zastąp wartości autouzupełniania kluczem przed opublikowaniem
HandsOnTable spełnia prawie wszystkie moje wymagania, z tym że niektóre kolumny w mojej bazie danych faktycznie przechowują klucze obce zamiast lokalnych wartości łańcuchowych.
W interfejsie użytkownika chciałbym, aby te kolumny były wyświetlane jako menu rozwijane, w których użytkownik wybiera czytelną wartość odwzorowaną na poprzednio wymieniony klucz obcy (tj. Coś takiego jak nazwa/wartość HTML select
).
Niestety HandsOnTable nie ma takiego typu komórki. Najbliższą rzeczą jest autocomplete
. To pozwala mi utworzyć menu rozwijane, ale zawiera tylko wartości; brak odpowiednich kluczy. Oto w jaki sposób tworzony jest:
"source": ["Jebediah", "Bob", "Bill", "Buzz"]
Więc co mam zamiar to wysłać dwa ciągi JSON z serwera:
jeden zawierający parametry potrzebne HandsOnTable do renderowania tabeli:
{
"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"]}
]
}
drugi klucze do mapowania wartości
{
"mappings": [
{"key": 0, "value": "Jebediah"},
{"key": 0, "value": "Bob"},
{"key": 0, "value": "Bill"},
{"key": 0, "value": "Buzz"}
]
}
tej pory tak dobrze. Teraz najtrudniejsza część:
HandsOnTable ma funkcję (getData()
), który umożliwia mi do pobierania danych tabele ciąg Json gotowe do wysłania z powrotem do serwera:
var jdata = myHandsOnTable.getData();
Gdzie jdata będzie wyglądać mniej tak:
"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" }
]
teraz przed wysłaniem, chciałbym wymienić, że wartości dla węzła z kluczem ich dopasowanie pary w ciągu mappings
json Customer
.
Jak najlepiej to osiągnąć w JavaScript/JQuery?
Czy istnieje funkcja, która działa mniej więcej następująco ?:
jdata.replaceNode('node', mappings)
Dzięki
Dzięki @PostureOfLearning, można wyjaśnić, co następuje: Jeśli dobrze rozumiem użytkownik wchodzi w interakcję z 'CategoryName' kolumna, która jest typu 'autouzupełniania' i zewnętrzna' dropdown/select' '# CategoriesFilterDropdown' nie jest widoczna dla użytkownika, ale służy do uproszczenia procesu mapowania. Jak ukryć kolumnę 'CategoryID'? Czy po prostu używasz 'renderer' i ustawiasz css' visible visibility' na 'hidden'? – Chopo87
@ Chopo87, zobacz "streszczenie", które dodałem. Jako moje "narzędzie do mapowania" używam CategoriesFilterDropdown, które jest widoczne i znajduje się gdzie indziej na stronie. Robię to, ponieważ potrzebowałem menu widocznego dla innych celów i nie odczuwałem potrzeby duplikowania danych. w twoim przypadku możesz użyć hashtable zamiast szukać identyfikatorów. – PostureOfLearning
Świetnie, bardzo dziękuję @ PostureOfLearning !!! – Chopo87