|
|
|
|
|
|
JSON-DIALOGELEMENTE
|
|
Quellcode
|
// <![CDATA[ // mit GridLayout
function getStylesDialogElements(json2) {
"use strict"; let json2b = json2.replace(/---/g, "|"); let patterns = json2b.split('|'); let n = patterns.length; // Anzahl der Elemente
let s=''; s += '#wrapperdialog {'+"\n"; s += ' display: grid;'+"\n"; s += ' grid-template-columns: auto 1fr;'+"\n"; s += ' grid-template-rows: '; // je nach Anzahl die Reihen definieren for (let i=0; i<n; i++) { s +='auto '; } s +="\n";
s += ' grid-column-gap:70px;'+"\n"; s += ' grid-row-gap:10px;'+"\n"; s += ' background-color:red;'+"\n"; s += '}'+"\n"; s += ' '+"\n"; s += '.fbox1 {'+"\n"; s += ' margin-right:10px;'+"\n"; s += '}'+"\n"; s += ' '+"\n"; s += '.fbox2 {'+"\n"; s += ' margin-right:10px;'+"\n"; s += '}'+"\n"; return s; } function createDialogElements(json1, json2) { "use strict"; //alert(json1); // alert(json2);
let customer = JSON.parse(json1); // normales replace ersetzt nur den ersten Fall !! let json2b = json2.replace(/---/g, "|"); let patterns = json2b.split('|'); let n = patterns.length; // Anzahl der Elemente
let s=''; s+=' <div id="wrapperdialog">'+"\n";
let captions = Object.keys(customer); // dialoge let index=1; for(var j in customer){ let str_pat = patterns[index-1]; // hier noch string !! //alert(str_pat); let pat = JSON.parse(str_pat); s+=' <label class="fbox1" for="ui' + index + 'Id">'+pat.caption+'</label>'+"\n"; if (pat.typ=='number') { s+=' <input type="number" class="fbox2" min="'+pat.min+'" max="'+pat.max+'" name="' +captions[index-1]+ '" id="ui' +index+ 'Id" value="'+customer[j]+'" />'+"\n"; } else if (pat.typ=='text') { s+=' <input type="text" class="fbox2" name="' +captions[index-1]+ '" id="ui' +index+ 'Id" value="'+customer[j]+'" size="12" />'+"\n"; } else if (pat.typ=='-') { s+=' <input type="text" class="fbox2" name="' +captions[index-1]+ '" id="ui' +index+ 'Id" value="'+customer[j]+'" size="12" readonly="readonly" />'+"\n"; } if (pat.typ=='date') { s+=' <input type="date" class="fbox2" name="' +captions[index-1]+ '" id="ui' +index+ 'Id" value="'+customer[j]+'" size="12" />'+"\n"; } index++; } s+=' </div>'+"\n"; // wrapperDialog return s; }
// ]]>
|
|
|
Pattern der UI-Elemente
|
function getCustomerPatternFromDB() {
// PINDEX, CNR, LASTNAME, FIRSTNAME, STREET, BIRTHDAY ' return '{"typ":"-","caption":"Pindex","min":1,"max":10001}' . '---' . '{"typ":"number","caption":"Kundennr","min":1,"max":100002}' . '---' . '{"typ":"text","caption":"Nachname","pattern":"^[A-ZÜÄÖ][a-züäöß]{1,29}$"}' . '---' . '{"typ":"text","caption":"Vorname","pattern":"^[A-ZÜÄÖ][a-züäöß]{1,29}$"}' . '---' . '{"typ":"text","caption":"Strasse","pattern":"^[A-ZÜÄÖ][a-züäöß]{1,29}([ ][A-ZÜÄÖ][a-züäöß]{1,29}){0,2}[ ][1-9][0-9]{0,3}([a-z]){0,1}$"}' . '---' . '{"typ":"date","caption":"Geburtag"}' ; }
|
|
|
Json-Array
|
JSon: 1. Teil: Daten aus der Datenbank
{"pindex":11,"cnr":1111,"lastname":"Meier","firstname":"Hans","street":"Friedrichstrasse 55","birthday":"2018-03-14"}|{"typ":"-","caption":"Pindex","min":1,"max":10001}---
JSon: 2. Teil: Definition des Typs der UI-Elemente und des Pattern:
{"typ":"-","caption":"Pindex","min":1,"max":10001}--- {"typ":"number","caption":"Kundennr","min":1,"max":100002}--- {"typ":"text","caption":"Nachname","pattern":"^[A-ZÜÄÖ][a-züäöß]{1,29}$"}--- {"typ":"text","caption":"Vorname","pattern":"^[A-ZÜÄÖ][a-züäöß]{1,29}$"}--- {"typ":"text","caption":"Strasse","pattern":"^[A-ZÜÄÖ][a-züäöß]{1,29}([ ][A-ZÜÄÖ][a-züäöß]{1,29}){0,2}[ ][1-9][0-9]{0,3}([a-z]){0,1}$"}--- {"typ":"date","caption":"Geburtag"}
Erläuterung:
typ: -
UI-Element: Text mit readonly
typ: number
UI-Element: number mit min und max
typ: text
UI-Element: Text mit pattern
typ: date
UI-Element: Datum-Element
|
|
|
Zusammenfassen der Json-Texte
|
$customer= loadCustomerFromDB($pindex); $s1 = json_encode($customer); // {"pindex":11,"cnr":1111,"lastname":"Mer","firstname":"Has","street":"Fri","birthday":"2018-03-14"} $s2 = getCustomerPatternFromDB(); // [ {},{},{},{}] echo $s1 . '|' . $s2;
|
|
|
Aufruf
|
let items = xmlhttpEdit.responseText.split('|'); // Trennen zwischen CSS-Abschnitt und HTML-Code let str_dialogStyles = getStylesDialogElements(items[1]); let str_Dialog = createDialogElements(items[0], items[1]);
let s=''; s += ' <style type="text/css" id="internalStyle" >'+"\n"; s += str_dialogStyles+"\n";
s += 'fieldset {'+"\n"; s += ' border: 2px solid #C5D8E1;'+"\n"; s += ' border-radius: 10px;'+"\n"; s += ' background: white;'+"\n"; s += ' margin: 0;'+"\n"; s += ' width:25rem;'+"\n"; s += ' }'+"\n"; s += ' '+"\n"; s += 'legend { '+"\n"; s += ' color:red;'+"\n"; s += ' } '+"\n"; s += ' </style>'+"\n";
s += '<h1>Edit an address</h1>'+"\n"; s += '<form method="get">'+"\n"; s += '<fieldset>'+"\n"; s += '<legend>Inputs for an address</legend>'+"\n";
s+=str_Dialog+"\n";
s+='</fieldset>'+"\n"; s+='<br />'+"\n"; s+='<input type="button" value="Yes" onclick="javaedit_yes(this.form)" />'+"\n"; s+='<input type="button" value="No" onclick="java_no(this.form)" />'+"\n"; s+='<input type="reset" value="Reset" />'+"\n"; s+='</form>'+"\n"; s+='<br />'+"\n"; s+='<br />'+"\n"; s+='<div id="ajaxerror"></div>'+"\n"; alert(s); elementAjax.innerHTML = s;
|
|
|
Json-Array
|
Webtechnologien
|
|