javascript - 是否有通过拖放重新排序firebase中的数据并保存的功能？
问题描述
我有一个由 Firebase Realtime-database 中的数据填充的 HTML 表。
此表的行顺序可使用拖放更改。
我的问题是，如果用户更改了订单，我想保存更改的订单。这只有在我可以更改 Firebase 中的数据顺序时才有可能，我猜？
我的问题是我找不到更改订单的功能。:(
Firebase 数据结构
表格元素 HTML
我为每个创建的行提供其任务 ID。如果创建了新任务，则该行会自动获取一个绑定到其任务的新 ID。
网页表
//Deklaration der Datenbank
var database = firebase.database();
var ref = database.ref('Worker');
var refKunde = database.ref('Kunde');
var refKunde1= database.ref('Kunde');
ref.on('value', gotData, errData);
refKunde.on('value', setKundenData, errKundeData);
refKunde1.on('value',setKundenListeDeleteData, errKundeDelteData)
var countRef = database.ref('count')
countRef.on('value', counterFunction)
//-----------------------------------------------------
var selectedUser = 0;
//--------------------------------------------------------
//-------------counter--------------------------------------------------------
var x = 1;
var counterTask;
function counterFunction(data){
var abc = data.val();
var keys = Object.keys(abc);
x = abc;
}
//-------------Create Worker----------------------------------------
function sendWorker() {
//console.log("test");
var txtWorker = document.getElementById("txtWorker")
if(txtWorker.value=="")
{
window.alert("Kein Mitarbeiter angelegt");
return false;
}
var msg = txtWorker.value;
//console.log(msg);
var data = {
name: "" + msg
}
ref.push(data);
txtWorker.value = '';
}
//-----------------WorkerList-------------------------
//var xHtml = document.getElementById("workerTxt");
function gotData(data) {
setWorkerData(data)
setDeleteData(data)
}
//-------KUNDEN Set and delete-----------------------------------------
function setKundenData(data){
var select = document.getElementById("selectKunde");
select.querySelectorAll('*').forEach(n => n.remove());
//console.log(data.val());
var Kunde = data.val();
var keys = Object.keys(Kunde);
//console.log(keys);
for (var i = 0; i < keys.length; i++) {
var k = keys[i];
var initials = Kunde[k].Kunde;
//console.log(initials);
//----------ToDoWorkerListOptions-------------
var el = document.createElement("option");
el.textContent = initials;
el.value = initials;
select.appendChild(el);
}
select.value = selectedUser;
}
//---------------------------
function selectKundenData(){
var e = document.getElementById("selectKunde");
var result = e.options[e.selectedIndex].value;
//console.log(result);
//var taskHtml = document.getElementById("peter");
var KundenRef = firebase.database().ref(result);
KundenRef.on("child_added", function (data, prevChildKey) {
var newWorker = data.val();
//taskHtml.innerText= newWorker.Aufgabe;ok
//console.log( prevChildKey ,newWorker.Aufgabe);
});
}
//-------KundenError------------------
function errKundeData(err) {
console.log("error!");
console.log(err);
}
//------------------Send Kunde-----------
function setKunde(){
var txtKunde = document.getElementById("txtKunde")
if(txtKunde.value=="")
{
window.alert("Kein Mitarbeiter angelegt");
return false;
}
var msg = txtKunde.value;
//console.log(msg);
var data = {
Kunde: "" + msg
}
refKunde.push(data);
txtKunde.value = '';
}
//------set delete Kunde data ----
function setKundenListeDeleteData(data){
var select = document.getElementById("SelectDeleteKundeId");
select.querySelectorAll('*').forEach(n => n.remove());
//console.log(data.val());
var Kunde = data.val();
var keys = Object.keys(Kunde);
//console.log(keys);
for (var i = 0; i < keys.length; i++) {
var k = keys[i];
var initials = Kunde[k].Kunde;
//console.log(initials);
//----------ToDoWorkerListOptions-------------
var el = document.createElement("option");
el.textContent = initials;
el.value = initials;
select.appendChild(el);
}
select.value = selectedUser;
}
//-----------
function selectKundenListeDelete(){
var e = document.getElementById("SelectDeleteKundeId");
var result = e.options[e.selectedIndex].value;
//console.log(result);
//var taskHtml = document.getElementById("peter");
var KundenRef1 = firebase.database().ref(result);
KundenRef1.on("child_added", function (data, prevChildKey) {
var newWorker = data.val();
//taskHtml.innerText= newWorker.Aufgabe;ok
//console.log( prevChildKey ,newWorker.Aufgabe);
});
}
//-----error Delete Kunde------
function errKundeDelteData(err) {
console.log("error!");
console.log(err);
}
//----------------------------------------------------------
function setWorkerData(data) {
var select = document.getElementById("setWorker");
select.querySelectorAll('*').forEach(n => n.remove());
//console.log(data.val());
var name = data.val();
var keys = Object.keys(name);
//console.log(keys);
for (var i = 0; i < keys.length; i++) {
var k = keys[i];
var initials = name[k].name;
//console.log(initials);
//----------ToDoWorkerListOptions-------------
var el = document.createElement("option");
el.textContent = initials;
el.value = initials;
select.appendChild(el);
}
select.value = selectedUser;
}
//------------DELETE DATAs
function setDeleteData(data) {
var select = document.getElementById("deleteWorker");
select.querySelectorAll('*').forEach(n => n.remove());
//console.log(data.val());
var name = data.val();
var keys = Object.keys(name);
//console.log(keys);
for (var i = 0; i < keys.length; i++) {
var k = keys[i];
var initials = name[k].name;
var el = document.createElement("option");
el.textContent = initials;
el.value = initials;
select.appendChild(el);
}
select.value = selectedUser;
}
function deleteWorker() {
var e = document.getElementById("deleteWorker");
var result = e.options[e.selectedIndex].value;
//console.log(result)
var workersRef = firebase.database().ref('Worker')
workersRef.once('value', function (snapshot) {
val = snapshot.val();
var keys = Object.keys(val);
workersRef.child(keys[e.selectedIndex]).remove()
})
}
function errData(err) {
console.log("error!");
console.log(err);
}
function deleteKunde()
{
var e = document.getElementById("SelectDeleteKundeId");
var result = e.options[e.selectedIndex].value;
//console.log(result)
var workersRef = firebase.database().ref('Kunde')
workersRef.once('value', function (snapshot) {
val = snapshot.val();
var keys = Object.keys(val);
workersRef.child(keys[e.selectedIndex]).remove()
})
}
//----------onChange-------------
function setWorkerList() {
var e = document.getElementById("setWorker");
if (selectedUser != 0) {
e.value = selectedUser;
}
selectedUser = 0;
var result = e.options[e.selectedIndex].value;
//console.log(result);
var taskHtml = document.getElementById("tasks");
var tableBody = document.getElementById("tablebody")
tableBody.querySelectorAll('*').forEach(n => n.remove());
var workersRef = firebase.database().ref('Worker')
workersRef.once('value', function (snapshot) {
val = snapshot.val();
var keys = Object.keys(val);
var tasksRef = snapshot.child(keys[e.selectedIndex]).child('Tasks')
//console.log(tasksRef.val())
var taskKeys = Object.keys(tasksRef.val());
for (var i = 0; i < taskKeys.length; i++) (function (i) {
var k = taskKeys[i];
var task = tasksRef.child(k).val()
var aufgabe = task.Aufgabe
var anmerkung = task.Anmerkung
var datumAnzeige = task.Datum
var wichtigValue = task.Wichtigkeit
var kundeValue = task.Kunde
var erledigtValue = task.Erledigt
var datumUserValue = task.DatumUser
var countValue = task.ID
//-----------------------------------------------
var row = tableBody.insertRow(i)
row.id=task.ID;
//--------------------------------------------------
var testButton = document.createElement("BUTTON")
testButton.innerHTML="test"
cell = row.insertCell()
cell.appendChild(testButton)
testButton.addEventListener("click", function(){
var L = document.getElementById("setWorker");
selectedUser = L.value
var workersRef = firebase.database().ref('Worker')
//------Aufgabe-----
var aufgabe = document.getElementById("aufgabeID"+i).value
//-----------
var wichtigSaveChange = document.getElementById("wichtigkeitsID" + i).value
//console.log(wichtigSaveChange)
//------------------------------------------------
workersRef.once('value', function (snapshot) {
val = snapshot.val();
var keys = Object.keys(val);
var doTask = workersRef.child(keys[L.selectedIndex]).child('Tasks/' + k)
var data = {
Wichtigkeit: wichtigSaveChange,
Aufgabe: aufgabe
}
doTask.set(data);
setWorkerList()
})
})
//----------Button Create-------------
var btn = document.createElement("BUTTON");
btn.innerHTML = "löschen"
btn.classList.add("button")
cell = row.insertCell()
cell.appendChild(btn)
//---------------Row Datum---------------------
var txtDatum= document.createElement("textarea")
txtDatum.disabled=true
txtDatum.value=datumAnzeige
txtDatum.classList.add("datum");
//txtDatum.innerHTML=datumAnzeige
cell = row.insertCell()
txtDatum.setAttribute("id", "datumID"+i)
cell.appendChild(txtDatum,i)
//--------------BUTTON------------------------------
btn.addEventListener("click", function () {
if(confirm("Bist du sicher, dass du die Zeile löschen willst?"))
{
selectedUser = e.value
tasksRef.child(k).ref.remove()
setWorkerList()
document.getElementById('deleteWorker').value = '';
}
else {
window.alert("nicht gelöscht!")
}
})
var txtAufgabe = document.createElement("textarea");
txtAufgabe.classList.add("anmerkungen")
txtAufgabe.innerHTML = aufgabe;
cell = row.insertCell()
txtAufgabe.setAttribute("id", "aufgabeID" + i)
cell.appendChild(txtAufgabe, i)
// var textNode = document.createTextNode(aufgabe)
//row.appendChild(textNode)
//------------Kunde---------------------
var txtKunde = document.createElement("textarea")
txtKunde.readOnly=true
txtKunde.disabled=true
txtKunde.innerHTML = kundeValue
txtKunde.classList.add("kunde");
cell = row.insertCell()
txtKunde.setAttribute("id", "kunde" + i)
cell.appendChild(txtKunde, i)
//----------wichtigkeit--------------
var selectWichtig = document.createElement("select")
var WichtigOptionsArray = ["Niedrig","Mittel","Hoch"];
selectWichtig.classList.add("wichtigkeit")
cell = row.insertCell()
selectWichtig.setAttribute("id", "wichtigkeitsID" + i)
cell.appendChild(selectWichtig, i)
if(wichtigValue=="Hoch")
{
selectWichtig.style.backgroundColor="red"
}
if(wichtigValue=="Mittel")
{
selectWichtig.style.backgroundColor="orange"
}
if(wichtigValue=="Niedrig")
{
selectWichtig.style.backgroundColor="green"
}
for (var y = 0; y < WichtigOptionsArray.length; y++) {
var option = document.createElement("option");
option.value = WichtigOptionsArray[y];
option.text = WichtigOptionsArray[y];
option.id= "testi"+y;
//option.style.backgroundColor="#92D54A"
selectWichtig.appendChild(option);
//console.log(option.id)
}
selectWichtig.value=wichtigValue;
//------------------Erledigt----------------
var txtErledigt = document.createElement("textarea");
txtErledigt.readOnly=true;
txtErledigt.disabled=true;
txtErledigt.classList.add("erledigt");
txtErledigt.innerHTML=erledigtValue;
cell = row.insertCell()
txtErledigt.setAttribute("id", "erledigt" + i)
cell.appendChild(txtErledigt, i)
//--------------------DatumUser-------------------
var datumUser = document.createElement("textarea")
datumUser.value=datumUserValue
datumUser.disabled=true
datumUser.classList.add("datum");
cell = row.insertCell()
datumUser.setAttribute("id", "datumUserID"+i)
cell.appendChild(datumUser,i)
//---------------Row anmerkung------------------
var txtAnmerkung = document.createElement("textarea")
txtAnmerkung.readOnly = true;
txtAnmerkung.disabled = true;
txtAnmerkung.classList.add("textfeld2")
txtAnmerkung.innerHTML = anmerkung
cell = row.insertCell()
txtAnmerkung.setAttribute("id", "anmerkung" + i)
cell.appendChild(txtAnmerkung, i)
//----------------Speichern------------------------
var btnSave = document.createElement("BUTTON");
btnSave.innerHTML = "Änderung übernehmen"
btnSave.classList.add("button")
cell = row.insertCell()
cell.appendChild(btnSave)
//Save Function
btnSave.addEventListener("click", function ()
{
var L = document.getElementById("setWorker");
selectedUser = L.value
var workersRef = firebase.database().ref('Worker')
//------Aufgabe-----
var aufgabe = document.getElementById("aufgabeID"+i).value
//-----------
var wichtigSaveChange = document.getElementById("wichtigkeitsID" + i).value
//console.log(wichtigSaveChange)
//------------------------------------------------
workersRef.once('value', function (snapshot) {
val = snapshot.val();
var keys = Object.keys(val);
var doTask = workersRef.child(keys[L.selectedIndex]).child('Tasks/' + k)
var data = {
Wichtigkeit: wichtigSaveChange,
Aufgabe: aufgabe
}
doTask.update(data);
setWorkerList()
})
})
}
)(i);
})
var workersRef = firebase.database().ref(result + '/Tasks');
workersRef.on("child_added", function (data, prevChildKey) {
var newWorker = data.val();
taskHtml.innerText = newWorker.Aufgabe;
//console.log( prevChildKey ,newWorker.Aufgabe);
});
}
//----------onChangeDelete-------------
function setWorkerListDelete() {
var e = document.getElementById("setWorkerDelete");
var result = e.options[e.selectedIndex].value;
//console.log(result);
//var taskHtml = document.getElementById("peter");
var workersRef = firebase.database().ref(result);
workersRef.on("child_added", function (data, prevChildKey) {
var newWorker = data.val()
});
}
//-----todoo TextField------
function sendTask() {
var taskmsg = document.getElementById("txtTaskWorker").value;
var datumInput = document.getElementById("inputDatum").value;
var kundenInput = document.getElementById("selectKunde");
var kundenName = kundenInput.options[kundenInput.selectedIndex].value;
console.log(kundenName);
if (taskmsg.length<1)
{
window.alert("Keine Aufgabe");
return false;
}
if(kundenName.length<1)
{
window.alert("Keine Aufgabe");
return false;
}
var wichtigKeit= document.getElementById("wichtigID")
var f = document.getElementById("setWorker");
selectedUser = f.value
var txtresult = f.options[f.selectedIndex].value;
var wichtigF = document.getElementById("selectWichtigkeit");
var wichtigkeitSelect = wichtigF.options[wichtigF.selectedIndex].value;
var workersRef = firebase.database().ref('Worker')
workersRef.once('value', function (snapshot) {
val = snapshot.val();
var keys = Object.keys(val);
var doTask = workersRef.child(keys[f.selectedIndex]).child('Tasks')
var data = {
Aufgabe: "" + taskmsg,
Skala: "",
Anmerkung: "",
Datum: datumInput,
Wichtigkeit: wichtigkeitSelect,
Kunde: kundenName,
Erledigt: "Nein",
DatumUser: "",
ID : x
}
doTask.push(data);
document.getElementById('txtTaskWorker').value = '';
document.getElementById('deleteWorker').value = '';
document.getElementById("inputDatum").value="";
document.getElementById("txtKunde").value="";
setWorkerList()
//-------set and count id
x=x+1
countRef.set(x);
})
}
function testButtonClick()
{
for (var y = 0; y < array.length; y++)
{
console.log(array.length);
}
}<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>AdminPage</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet">
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.2.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.0/firebase.js"></script>
<script src="index.js"></script>
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<div id="wrapper">
<div id="header">
<h1><a href="index.html">Mitarbeiter- und Aufgabenverwaltung</a></h1>
</div>
<div id="top">
Neuer Mitarbeiter: <input id="txtWorker" type="text" name="vorname"></input>
<button id="bntSendWorker" class="button" onclick="sendWorker()">hinzufügen</button><br><br>
Mitarbeiter löschen: <div class="select-wrapper fa fa-angle-down">
<select id="deleteWorker" onchange="setWorkerListDelete()"></select>
</div>
<button id="" class="button" onclick="deleteWorker()">löschen</button><br>
<hr>
<div>
Kunde anlegen: <input id="txtKunde" type="text"/>
<button id="" class="button" onclick="setKunde()">anlegen</button><br>
<hr>
Kunde löschen <select id="SelectDeleteKundeId" onchange="selectKundenListeDelete()"></select>
<button id="btnDeleteKundeID" class="button" onclick="deleteKunde()">löschen</button>
</div>
</div>
<div id="middle">
<div>
<div id="left">Mitarbeiter auswählen:</div>
<div id="right">Aufgabe hinzufügen:</div>
</div>
<div id="left">
<div class="select-wrapper fa fa-angle-down">
<select id ="setWorker" onchange="setWorkerList()">
</select>
</div>
</div>
<div id="right">
<textarea class="textfeld" id="txtTaskWorker" type="text"></textarea><br>
Priorität: <div class="select-wrapper fa fa-angle-down"><select id="selectWichtigkeit" >
<option>Niedrig</option>
<option>Mittel</option>
<option>Hoch</option>
</select> </div>
Datum: <input id="inputDatum" type="date"><br> <br>
Kundenname: <select id="selectKunde" onchange="selectKundenData()"></select>
<button id="bntSendtask" class="button" onclick="sendTask()">Aufgabe anlegen</button>
</div>
</div>
<div id="bottom">
<table id="tasks">
<thead>
<th style="width:6%"> </th>
<th style="width:10%">Datum</th>
<th style="width:25%">Beschreibung</th>
<th style="width:10%">Kunde</th>
<th style="width:7%">Priorität</th>
<th style="width: 7%">Erledigt</th>
<th style="width: 10%">Änderungsdatum </th>
<th style="width: 19%">Anmerkung</th>
<th style="width:6%""></th>
</thead>
<tbody id="tablebody" style=>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tbody>
</table>
</div>
</div>
</body>
<script type="text/javascript">
$('tbody').sortable();
</script>
</html>解决方案
推荐阅读
- javascript - VS Code - 函数括号前的空格，for/while/if 语句
- asp.net-mvc - 使用 EntityFramwork 数据源的 SSRS 报告不显示在 ReportViewer 中
- reactjs - 如何使用 react 和 redux 从不同/其他页面滚动到视图？
- node.js - 如何在nodejs中的选项中循环url
- javascript - 如何始终使用 selenium java 在日期选择器中从当前日期开始 21 天选择日期
- go - go get -u github.com/onsi/ginkgo/ginkgo 突然开始抛出错误
- ios - 弹出显示没有迅速覆盖整个屏幕
- google-sheets - Google Sheet 中的数组约束公式问题
- caching - 在 NestJS 中缓存 axios httpService
- delphi - 将非类函数添加到通用 TArray 类