Tabellen in Webinterface

Xb2.Net von Boris Borzic

Moderator: Moderatoren

Antworten
Benutzeravatar
Rudolf
Programmier-Gott
Programmier-Gott
Beiträge: 1418
Registriert: Mo, 02. Jan 2006 23:03
Wohnort: Salzburg/Österreich
Kontaktdaten:

Tabellen in Webinterface

Beitrag von Rudolf »

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
Benutzeravatar
Armin
Rekursionen-Architekt
Rekursionen-Architekt
Beiträge: 389
Registriert: Mo, 26. Sep 2005 12:09
Wohnort: 75331 Engelsbrand
Danksagung erhalten: 3 Mal
Kontaktdaten:

Re: Tabellen in Webinterface

Beitrag von Armin »

Hallo Rudolf,
ich suche für die Tabellendarstellung ein JS Framwork wie z.B. http://www.sigmawidgets.com/
ich habe Deinen Link ausprobiert... was meinst Du im Speziellen - welches JS Framwork?

Grüße, Armin
Benutzeravatar
Rudolf
Programmier-Gott
Programmier-Gott
Beiträge: 1418
Registriert: Mo, 02. Jan 2006 23:03
Wohnort: Salzburg/Österreich
Kontaktdaten:

Re: Tabellen in Webinterface

Beitrag von Rudolf »

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
Benutzeravatar
Rudolf
Programmier-Gott
Programmier-Gott
Beiträge: 1418
Registriert: Mo, 02. Jan 2006 23:03
Wohnort: Salzburg/Österreich
Kontaktdaten:

Re: Tabellen in Webinterface

Beitrag von Rudolf »

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
Benutzeravatar
Armin
Rekursionen-Architekt
Rekursionen-Architekt
Beiträge: 389
Registriert: Mo, 26. Sep 2005 12:09
Wohnort: 75331 Engelsbrand
Danksagung erhalten: 3 Mal
Kontaktdaten:

Re: Tabellen in Webinterface

Beitrag von Armin »

Hallo Rudolf,

Du meinst:

Code: Alles auswählen

   local cHTML := memoread("www_root/columns.html")
   ThreadObject():HTTPResponse:Content := cHTML
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

Code: Alles auswählen

../js/dataTables.buttons.min.js
sollte dann wahrscheinlich so sein:

Code: Alles auswählen

js/dataTables.buttons.min.js
Oder du legst das HTML z.B. so ab:
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.
Benutzeravatar
Rudolf
Programmier-Gott
Programmier-Gott
Beiträge: 1418
Registriert: Mo, 02. Jan 2006 23:03
Wohnort: Salzburg/Österreich
Kontaktdaten:

Re: Tabellen in Webinterface

Beitrag von Rudolf »

Hallo Armin,
genau:

Code: Alles auswählen

PROCEDURE datatables()
   local cHTML := memoread("www_root/columns.html")
   ThreadObject():HTTPResponse:Content := cHTML
   Return
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
Benutzeravatar
Rudolf
Programmier-Gott
Programmier-Gott
Beiträge: 1418
Registriert: Mo, 02. Jan 2006 23:03
Wohnort: Salzburg/Österreich
Kontaktdaten:

Re: Tabellen in Webinterface

Beitrag von Rudolf »

Hallo,
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.&nbsp;<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&nbsp;<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&nbsp;<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&nbsp;<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>

Benutzeravatar
Rudolf
Programmier-Gott
Programmier-Gott
Beiträge: 1418
Registriert: Mo, 02. Jan 2006 23:03
Wohnort: Salzburg/Österreich
Kontaktdaten:

Re: Tabellen in Webinterface

Beitrag von Rudolf »

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
Benutzeravatar
Rudolf
Programmier-Gott
Programmier-Gott
Beiträge: 1418
Registriert: Mo, 02. Jan 2006 23:03
Wohnort: Salzburg/Österreich
Kontaktdaten:

Re: Tabellen in Webinterface

Beitrag von Rudolf »

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

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) 304-mal heruntergeladen
Benutzeravatar
Koverhage
Der Entwickler von "Deep Thought"
Der Entwickler von "Deep Thought"
Beiträge: 2470
Registriert: Fr, 23. Dez 2005 8:00
Wohnort: Aalen
Hat sich bedankt: 102 Mal
Danksagung erhalten: 3 Mal
Kontaktdaten:

Re: Tabellen in Webinterface

Beitrag von Koverhage »

Rudolf,
ich nutze dafür focus() (allerdings bei Eingabefelder).
Gruß
Klaus
Benutzeravatar
Rudolf
Programmier-Gott
Programmier-Gott
Beiträge: 1418
Registriert: Mo, 02. Jan 2006 23:03
Wohnort: Salzburg/Österreich
Kontaktdaten:

Re: Tabellen in Webinterface

Beitrag von Rudolf »

Hallo Klaus,
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 ));
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
Benutzeravatar
Koverhage
Der Entwickler von "Deep Thought"
Der Entwickler von "Deep Thought"
Beiträge: 2470
Registriert: Fr, 23. Dez 2005 8:00
Wohnort: Aalen
Hat sich bedankt: 102 Mal
Danksagung erhalten: 3 Mal
Kontaktdaten:

Re: Tabellen in Webinterface

Beitrag von Koverhage »

Hallo Rudolf,
.focus() müsste/sollte doch auch für eine Tabelle(nzeile) funktionieren.
Gruß
Klaus
Benutzeravatar
Rudolf
Programmier-Gott
Programmier-Gott
Beiträge: 1418
Registriert: Mo, 02. Jan 2006 23:03
Wohnort: Salzburg/Österreich
Kontaktdaten:

Re: Tabellen in Webinterface

Beitrag von Rudolf »

Hallo Klaus,
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>
und

Code: Alles auswählen

$(document).ready(function() 
	{
	var table = $('#example').DataTable( 
		{
		  "sAjaxSource": "?AJAXREQUEST",
    	 keys: true,
        ...
        
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
Benutzeravatar
Rudolf
Programmier-Gott
Programmier-Gott
Beiträge: 1418
Registriert: Mo, 02. Jan 2006 23:03
Wohnort: Salzburg/Österreich
Kontaktdaten:

Re: Tabellen in Webinterface

Beitrag von Rudolf »

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

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>
Antworten