Tabellen in Webinterface
Moderator: Moderatoren
- Rudolf
- Programmier-Gott
- Beiträge: 1418
- Registriert: Mo, 02. Jan 2006 23:03
- Wohnort: Salzburg/Österreich
- Kontaktdaten:
Tabellen in Webinterface
Hallo,
ich suche für die Tabellendarstellung ein JS Framwork wie z.B. http://www.sigmawidgets.com/
Die haben auch eine GUI Designer der interessant aussieht, ich denkte den könnte man in XB2NET einbinden. Hat jemand Erfahrung mit sochen Tools ? Müsste möglich sein mehrseitige Tabellen nachzuladen. Wenn ich diese Tolls einbinden könnte, würde ich auch überlegen größere Projekte damit zu machen.
Grüße
Rudolf
ich suche für die Tabellendarstellung ein JS Framwork wie z.B. http://www.sigmawidgets.com/
Die haben auch eine GUI Designer der interessant aussieht, ich denkte den könnte man in XB2NET einbinden. Hat jemand Erfahrung mit sochen Tools ? Müsste möglich sein mehrseitige Tabellen nachzuladen. Wenn ich diese Tolls einbinden könnte, würde ich auch überlegen größere Projekte damit zu machen.
Grüße
Rudolf
Rudolf Reinthaler
http://www.formcommander.net
http://www.formcommander.net
- Armin
- Rekursionen-Architekt
- Beiträge: 394
- Registriert: Mo, 26. Sep 2005 12:09
- Wohnort: 75331 Engelsbrand
- Danksagung erhalten: 3 Mal
- Kontaktdaten:
Re: Tabellen in Webinterface
Hallo Rudolf,
Grüße, Armin
ich habe Deinen Link ausprobiert... was meinst Du im Speziellen - welches JS Framwork?ich suche für die Tabellendarstellung ein JS Framwork wie z.B. http://www.sigmawidgets.com/
Grüße, Armin
- Rudolf
- Programmier-Gott
- Beiträge: 1418
- Registriert: Mo, 02. Jan 2006 23:03
- Wohnort: Salzburg/Österreich
- Kontaktdaten:
Re: Tabellen in Webinterface
Hallo Armin,
mein Eintrag ist so alt dass es anscheinend den Link nicht mehr gibt Hat sich momentan erledigt, Webinterface habe ich durch TSPLUS ersetzen können.
Grüße
Rudolf
mein Eintrag ist so alt dass es anscheinend den Link nicht mehr gibt Hat sich momentan erledigt, Webinterface habe ich durch TSPLUS ersetzen können.
Grüße
Rudolf
Rudolf Reinthaler
http://www.formcommander.net
http://www.formcommander.net
- Rudolf
- Programmier-Gott
- Beiträge: 1418
- Registriert: Mo, 02. Jan 2006 23:03
- Wohnort: Salzburg/Österreich
- Kontaktdaten:
Re: Tabellen in Webinterface
Hallo,
jetzt funktioniert alles soweit, Metro UI schaut super aus und Ajax fürs Nachladen von DataTables Tabellen in einem Browserfenster funktioniert. Möchte jetzt den Editor einbinden damit ich Tabellen auch editieren und über Ajax updaten kann. Habe alles ins www_root kopiert und mit der columns.html aus den samples getestet, funktioniert soweit und nur ein Fehler wegen Ajax der logisch ist. Wenn ich aber die gleiche Datei aus dem XB2NET Webserver aufrufe, bekomme ich Fehler in der Browser Debug Konsole und die Tabelle wird nicht richtig dargestellt. Wo ist der Unterschied zwischen direktem Aufruf und über den Webserver ? Die Fehlermeldungen in der Konsole sagen mir nicht viel. Anbei die Screenshots und ein Link auf ein Zip das man nur in XB2NET übers www_root entpacken muss, darin sind die DataTables und der Editor.
Grüße
Rudolf
Link:http://www.c-tec.at/download/www_root.zip
jetzt funktioniert alles soweit, Metro UI schaut super aus und Ajax fürs Nachladen von DataTables Tabellen in einem Browserfenster funktioniert. Möchte jetzt den Editor einbinden damit ich Tabellen auch editieren und über Ajax updaten kann. Habe alles ins www_root kopiert und mit der columns.html aus den samples getestet, funktioniert soweit und nur ein Fehler wegen Ajax der logisch ist. Wenn ich aber die gleiche Datei aus dem XB2NET Webserver aufrufe, bekomme ich Fehler in der Browser Debug Konsole und die Tabelle wird nicht richtig dargestellt. Wo ist der Unterschied zwischen direktem Aufruf und über den Webserver ? Die Fehlermeldungen in der Konsole sagen mir nicht viel. Anbei die Screenshots und ein Link auf ein Zip das man nur in XB2NET übers www_root entpacken muss, darin sind die DataTables und der Editor.
Grüße
Rudolf
Link:http://www.c-tec.at/download/www_root.zip
Rudolf Reinthaler
http://www.formcommander.net
http://www.formcommander.net
- Armin
- Rekursionen-Architekt
- Beiträge: 394
- Registriert: Mo, 26. Sep 2005 12:09
- Wohnort: 75331 Engelsbrand
- Danksagung erhalten: 3 Mal
- Kontaktdaten:
Re: Tabellen in Webinterface
Hallo Rudolf,
Du meinst:
das sollte das gleiche wie zeigen wie direkt im browser columns.html
z.B.:
www_root/columns.html steht direkt im root.
www_root/js/dataTables.buttons.min.js
sollte dann wahrscheinlich so sein:
Oder du legst das HTML z.B. so ab:
www_root/html/columns.html
Grüße, Armin
Du meinst:
Code: Alles auswählen
local cHTML := memoread("www_root/columns.html")
ThreadObject():HTTPResponse:Content := cHTML
z.B.:
www_root/columns.html steht direkt im root.
www_root/js/dataTables.buttons.min.js
Code: Alles auswählen
../js/dataTables.buttons.min.js
Code: Alles auswählen
js/dataTables.buttons.min.js
www_root/html/columns.html
Grüße, Armin
Zuletzt geändert von Armin am Mi, 05. Apr 2017 10:31, insgesamt 1-mal geändert.
- Rudolf
- Programmier-Gott
- Beiträge: 1418
- Registriert: Mo, 02. Jan 2006 23:03
- Wohnort: Salzburg/Österreich
- Kontaktdaten:
Re: Tabellen in Webinterface
Hallo Armin,
genau:
hab vergessen datatables.prg mitzuschicken. Das file columns_orig.html im www_root hat die Originalpfade für js und css für den Aufruf vom Browser aus. Wenn ich es aus dem datatables.prg aufrufen muss ich die Pfade ändern, z.B.
../js/jquery-2.2.4.js
Jedenfalls führt der Aufruf über den Browser zu einem anderen Ergebnis, über den Webserver funktioniert es nicht.
Grüße
Rudolf
genau:
Code: Alles auswählen
PROCEDURE datatables()
local cHTML := memoread("www_root/columns.html")
ThreadObject():HTTPResponse:Content := cHTML
Return
../js/jquery-2.2.4.js
Jedenfalls führt der Aufruf über den Browser zu einem anderen Ergebnis, über den Webserver funktioniert es nicht.
Grüße
Rudolf
Rudolf Reinthaler
http://www.formcommander.net
http://www.formcommander.net
- Rudolf
- Programmier-Gott
- Beiträge: 1418
- Registriert: Mo, 02. Jan 2006 23:03
- Wohnort: Salzburg/Österreich
- Kontaktdaten:
Re: Tabellen in Webinterface
Hallo,
habe editieren von Tabellen jetzt mal selbst gelöst. Mit ein paar Scripts gehts ganz gut, anbei ein Beispiel.
Grüße
Rudolf
Tabellenelement:
...
---------------------------------------------------------------------------------------
HTML Editorfenster, <% %> sind div. Platzhalter :
habe editieren von Tabellen jetzt mal selbst gelöst. Mit ein paar Scripts gehts ganz gut, anbei ein Beispiel.
Grüße
Rudolf
Tabellenelement:
Code: Alles auswählen
<td><a href="javascript:CallFormWin('1*3581792','','EDITPERSTABLE','3','EDIT',500,300);"><span class="mif-pencil"></span></a></td>
Code: Alles auswählen
function CallFormWin(sid,title,cfunction,cID,cMode,width,height)
{
var url = 'callfunction?_SID=' + sid + '&FUNCTION=' + cfunction + '&EDITID=' + cID + '&EDITMODE=' + cMode;
var form = document.getElementById('callfunction');
var popup = PopupCenter(url,title,width,height) ;
}
function PopupCenter(url, title, width, height) {
var leftPosition, topPosition;
leftPosition = (window.screen.width / 2) - ((width / 2) + 10);
topPosition = (window.screen.height / 2) - ((height / 2) + 50);
window.open(url, title,"directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0,scrollbars=yes,resizable=yes,height=" + height + ",width=" + width + ",resizable=no,left="
+ leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY="
+ topPosition);
}
HTML Editorfenster, <% %> sind div. Platzhalter :
Code: Alles auswählen
<!DOCTYPE html>
<html>
<head>
<%BLOCK_HEAD%>
<script>
function sendform()
{
var content = document.getElementById('PERSNR').value + document.getElementById('VORNAME').value + document.getElementById('NACHNAME').value + document.getElementById('AKN').value;
if (content=='')
{
alert('Achtung, Pflichtfelder bitte ausfüllen');
document.callfunction.action = '';
}
else
{
waitdlg();
document.getElementById('preloader').style.display = 'block';
WinResizeCenter(1500,700);
callfunction('SAVEPERS');
}
}
function closeSelf(){
self.close();
return true;
}
</script>
</head>
<body class="metro">
<%BLOCK_NAVBARWIN%>
<div class="container" id="Main" name="Main">
<form action="callfunction" method="POST" name="callfunction" onsubmit="return closeSelf()">
<%HIDDENVAR%>
<div class="flex-grid pers-grid">
<div class="row">
<div class="cell"><div style="font-size:80%" align="left">Pers.Nr. <br><div class="input-control text"><input type="text" value="<%PERSNR%>" style="height: 28px;font-size:80%"></div></div></div>
</div>
<div class="row">
<div class="cell"><div style="font-size:80%" align="left">Vorname <br><div class="input-control text"><input type="text" value="<%VORNAME%>" style="height: 28px;font-size:80%"></div></div></div>
</div>
<div class="row">
<div class="cell"><div style="font-size:80%" align="left">Nachname <br><div class="input-control text"><input type="text" value="<%NAME%>" style="height: 28px;font-size:80%"></div></div></div>
</div>
<div class="row">
<div class="cell"><div style="font-size:80%" align="left">Geburtstag <br><div class="input-control text"><input type="text" value="<%GEBURTSTAG%>" style="height: 28px;font-size:80%"></div></div></div>
</div>
<button class="button info" onClick="sendform();">Daten senden</button>
</div>
</form>
</div>
</body>
</html>
Rudolf Reinthaler
http://www.formcommander.net
http://www.formcommander.net
- Rudolf
- Programmier-Gott
- Beiträge: 1418
- Registriert: Mo, 02. Jan 2006 23:03
- Wohnort: Salzburg/Österreich
- Kontaktdaten:
Re: Tabellen in Webinterface
Hallo,
jetzt klappt das öffnen des Fenster, auslesen der Daten, speichern und schließen des Fenster. Nun bin ich draufgekommen dass ich ja auch die Tabelle mit den neuen Werten refreshen muss. Also noch ein Stolperstein auf dem Weg zu einer ganz normalen Datenbearbeitung in Tabellen. Mit DataTables kann man den content über Ajax einlesen, damit könnte es funktionieren. Dazu werde ich ein spezielles Sessionmanagement für Tabellenbearbeitung machen müssen, also Tabellen leer aufbauen und den Inhalt immer über Ajax einlesen, dann kann ich nach einer Änderung die Tabelle neu darstellen. Mal schauen ob es auch gelingt dass die Tabelle dort stehen bleibt wo ich Änderungen gemacht habe und nicht wieder am Anfgang steht, also nur eine Zeile ändern. Falls jemand Tips oder Lösungen hat wäre ich sehr froh darüber, könnte wieder einiges an Arbeit bedeuten.
Grüße
Rudolf
jetzt klappt das öffnen des Fenster, auslesen der Daten, speichern und schließen des Fenster. Nun bin ich draufgekommen dass ich ja auch die Tabelle mit den neuen Werten refreshen muss. Also noch ein Stolperstein auf dem Weg zu einer ganz normalen Datenbearbeitung in Tabellen. Mit DataTables kann man den content über Ajax einlesen, damit könnte es funktionieren. Dazu werde ich ein spezielles Sessionmanagement für Tabellenbearbeitung machen müssen, also Tabellen leer aufbauen und den Inhalt immer über Ajax einlesen, dann kann ich nach einer Änderung die Tabelle neu darstellen. Mal schauen ob es auch gelingt dass die Tabelle dort stehen bleibt wo ich Änderungen gemacht habe und nicht wieder am Anfgang steht, also nur eine Zeile ändern. Falls jemand Tips oder Lösungen hat wäre ich sehr froh darüber, könnte wieder einiges an Arbeit bedeuten.
Grüße
Rudolf
Rudolf Reinthaler
http://www.formcommander.net
http://www.formcommander.net
- Rudolf
- Programmier-Gott
- Beiträge: 1418
- Registriert: Mo, 02. Jan 2006 23:03
- Wohnort: Salzburg/Österreich
- Kontaktdaten:
Re: Tabellen in Webinterface
Hallo,
hab die nächst Stufe geschafft, ich lese die Daten mittels Ajax aus einer lokalen Datei ein, nach der Änderung möche ich dann die Zellen mit den Änderungen in die Tabelle zurückschreiben. Ich kann dazu das Ajax File ändern und nochmal laden oder ich ändere die Zellen direkt. Bei beiden Lösungen habe ich das Problem dass ich in der Tabelle nach dem Update auf einer andere Zelle stehe da die Reihenfolge sich ändert, muss noch rausfinden wie ich wieder auf die richtige Zeile springe. Anbei der Code mit ein paar Beispielen, im Anhang die Ajax Daten. Ich denke jetzt fehlt nicht mehr viel für eine vernünftige Lösung.
Grüße
Rudolf
hab die nächst Stufe geschafft, ich lese die Daten mittels Ajax aus einer lokalen Datei ein, nach der Änderung möche ich dann die Zellen mit den Änderungen in die Tabelle zurückschreiben. Ich kann dazu das Ajax File ändern und nochmal laden oder ich ändere die Zellen direkt. Bei beiden Lösungen habe ich das Problem dass ich in der Tabelle nach dem Update auf einer andere Zelle stehe da die Reihenfolge sich ändert, muss noch rausfinden wie ich wieder auf die richtige Zeile springe. Anbei der Code mit ein paar Beispielen, im Anhang die Ajax Daten. Ich denke jetzt fehlt nicht mehr viel für eine vernünftige Lösung.
Grüße
Rudolf
Code: Alles auswählen
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="images/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Editor example - Selected columns only</title>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="js/jquery-2.1.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.min.js">
</script>
<script type="text/javascript" language="javascript" src="js/dataTables.buttons.min.js">
</script>
<script type="text/javascript" language="javascript" src="resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="resources/demo.js">
</script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>extn</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
<script>
$(document).ready(function()
{
var table = $('#example').DataTable(
{
"sAjaxSource": "?AJAXREQUEST",
dom: 'Bfrtip',
buttons: [
{
text: 'Reload table',
action: function () {
table.ajax.url( '?LOADNEW' ).load();
}
}
]
} );
$('#example tbody').on( 'click', 'tr', function () {
var data = table.row( this ).data();
var idx = table.row(this).index();
//alert(data);
// alert(table.row());
//alert(table.column());
//alert(table.row(this).index());
table.cell( idx, 0 ).data( 'Updated 1' ).draw(); // note that you could actually pass in 'this' as the row selector!
table.cell( idx, 1 ).data( 'Updated 2' ).draw();
table.cell( idx, 2 ).data( 'Updated 3' ).draw();
//$(this).toggleClass('selected');
//alert( table.rows('.selected').data().length +' row(s) selected' );
} );
$('#button').click( function () {
//alert( table.rows('.selected').data().length +' row(s) selected' );
} );
} );
</script>
</body>
</html>
- Dateianhänge
-
- arrays.txt
- (7.85 KiB) 322-mal heruntergeladen
Rudolf Reinthaler
http://www.formcommander.net
http://www.formcommander.net
- Koverhage
- Der Entwickler von "Deep Thought"
- Beiträge: 2471
- Registriert: Fr, 23. Dez 2005 8:00
- Wohnort: Aalen
- Hat sich bedankt: 104 Mal
- Danksagung erhalten: 3 Mal
- Kontaktdaten:
Re: Tabellen in Webinterface
Rudolf,
ich nutze dafür focus() (allerdings bei Eingabefelder).
ich nutze dafür focus() (allerdings bei Eingabefelder).
Gruß
Klaus
Klaus
- Rudolf
- Programmier-Gott
- Beiträge: 1418
- Registriert: Mo, 02. Jan 2006 23:03
- Wohnort: Salzburg/Österreich
- Kontaktdaten:
Re: Tabellen in Webinterface
Hallo Klaus,
ich muss aber in der ev. sortierten Tabelle auf die richtige Zeile springen, und jede Zeile hat einen speziellen Index.
wenn ich also das Fenster zum Editiern schließe, muss ich über die Referenz des aufrufenden Fensters die Tabelle ansprechen und dann wieder auf der richtigen Zeile stehen. Das kann über den httpresponse machen, zumindest Fenster schließen funktioniert und ich kann auch das Tabellenobjekt des aufrufenden Fensters ansprechen. Das einzige was mir fehlt ist der Befehl für DataTables um auf die Zeile mit einem der o.a. Index zu springen. Wenn ich z.B. eine Zeile update ändert sich die Reihenfolge der sortierten Tabelle und ich stehe im Nirgendwo Also nur ein winziger Schritt damit es perfekt funktioniert.
Grüße
Rudolf
ich muss aber in der ev. sortierten Tabelle auf die richtige Zeile springen, und jede Zeile hat einen speziellen Index.
Code: Alles auswählen
console.log("index:" + table.row(this).index());
console.log(table.rows( { order: 'applied' } ).nodes().indexOf( this ));
Grüße
Rudolf
Rudolf Reinthaler
http://www.formcommander.net
http://www.formcommander.net
- Koverhage
- Der Entwickler von "Deep Thought"
- Beiträge: 2471
- Registriert: Fr, 23. Dez 2005 8:00
- Wohnort: Aalen
- Hat sich bedankt: 104 Mal
- Danksagung erhalten: 3 Mal
- Kontaktdaten:
Re: Tabellen in Webinterface
Hallo Rudolf,
.focus() müsste/sollte doch auch für eine Tabelle(nzeile) funktionieren.
.focus() müsste/sollte doch auch für eine Tabelle(nzeile) funktionieren.
Gruß
Klaus
Klaus
- Rudolf
- Programmier-Gott
- Beiträge: 1418
- Registriert: Mo, 02. Jan 2006 23:03
- Wohnort: Salzburg/Österreich
- Kontaktdaten:
Re: Tabellen in Webinterface
Hallo Klaus,
dazu müsste ich das Plugin KeyTable verwenden, wenn ich es einbinde mit
und
bekomme ich aber in der Konsole einen Fehler:
dataTables.keyTable.js:910 Uncaught TypeError: Cannot read property 'cell' of undefined
at dataTables.keyTable.js:910
at dataTables.keyTable.js:47
at dataTables.keyTable.js:49
Grüße
Rudolf
dazu müsste ich das Plugin KeyTable verwenden, wenn ich es einbinde mit
Code: Alles auswählen
<script type="text/javascript" language="javascript" src="js/dataTables.keyTable.js">
</script>
Code: Alles auswählen
$(document).ready(function()
{
var table = $('#example').DataTable(
{
"sAjaxSource": "?AJAXREQUEST",
keys: true,
...
dataTables.keyTable.js:910 Uncaught TypeError: Cannot read property 'cell' of undefined
at dataTables.keyTable.js:910
at dataTables.keyTable.js:47
at dataTables.keyTable.js:49
Grüße
Rudolf
Rudolf Reinthaler
http://www.formcommander.net
http://www.formcommander.net
- Rudolf
- Programmier-Gott
- Beiträge: 1418
- Registriert: Mo, 02. Jan 2006 23:03
- Wohnort: Salzburg/Österreich
- Kontaktdaten:
Re: Tabellen in Webinterface
Hallo,
geschafft ! Ich lese die Tabelle jetzt nicht über Ajax ein sondern generiere sie komplett im HTML. Als Response schicke ich ein Script an das Fenster das vor dem Schließen die Referenz auf das aufrufende Fenster holt und ändere die Tabellen Zellen. Aber die Refernz auf das DataTables Objekt wäre mir lieber da ich damit viel mehr machen könnte. Z.B über Ajax neu einlesen und Zeilenpointer setzen.
Grüße
Rudolf
geschafft ! Ich lese die Tabelle jetzt nicht über Ajax ein sondern generiere sie komplett im HTML. Als Response schicke ich ein Script an das Fenster das vor dem Schließen die Referenz auf das aufrufende Fenster holt und ändere die Tabellen Zellen. Aber die Refernz auf das DataTables Objekt wäre mir lieber da ich damit viel mehr machen könnte. Z.B über Ajax neu einlesen und Zeilenpointer setzen.
Grüße
Rudolf
Code: Alles auswählen
<html>
<head>
</head>
<body>
<script>
var opener = window.opener;
var table = opener.document.getElementById("result_table"); // Objekt ist leider nur die Refernz auf die Tabelle im DOM, aber nicht das DataTables Objekt
var form = opener.document.getElementById("callfunction");
//alert(table.rows[0].cells.length);
table.rows[1].cells[0].innerHTML="new value";
//alert(form.FUNCTION.value);
window.close();
</script>
</body>
</html>
Rudolf Reinthaler
http://www.formcommander.net
http://www.formcommander.net