:: Forum >> Version 2 >>
example of paging on a server
This an example given as is - it is not complete and clean - but it has a few features that demonstrates "paging" on a server and a few things useful when dealing with a server (switch mode to edit or readonly, restore, add, delete, new, save, copy, paste, next, previous, first, last, error feedback). There is still a few things to go like combo, select, completion list when start editing, type and length control, md5 encoding of password.
The grid display a layout "topline" with three parts:
Left : is a tool bar for swithcing mode, copy in clipboard, increase line height, decrease line height
Center depends on mode:
In view mode it has first, previous, page, next, last
In edit mode it has add, duplicate, paste, delete, save
Right: display the current page and number of pages.
I apologize for the french tooltips ... and without the icons of the toolbars it lacks visuals.
<html>
<head>
<script src="../../runtime/lib/aw.js"></script>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>
</head>
<style>
.aw-image-save {background: url(save.gif) 50% 50% no-repeat;}
.aw-image-delete {background: url(delete.gif) 50% 50% no-repeat;}
.aw-image-new {background: url(new.gif) 50% 50% no-repeat;}
.aw-image-duplicate {background: url(duplicate.gif) 50% 50% no-repeat;}
.aw-image-paste {background: url(paste.gif) 50% 50% no-repeat;}
.aw-image-copy {background: url(copy.gif) 50% 50% no-repeat;}
.aw-image-ligneplus {background: url(ligneplus.gif) 50% 50% no-repeat;}
.aw-image-lignemoins {background: url(lignemoins.gif) 50% 50% no-repeat;}
.aw-image-edit {background: url(edit.gif) 50% 50% no-repeat;}
.aw-image-readonly {background: url(readonly.png) 50% 50% no-repeat;}
.aw-grid {filter:none;}
* {
-moz-box-sizing: border-box;
}
.aw-system-control2 {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.aw-alternate-even {background: #fff;}
.aw-alternate-odd {background: #eee;}
.aw-grid-headers {
background: #E6E6F2;
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
}
.aw-header-1 {
background: #E6E6E6;
font-size:9px;
}
.aw-grid-row {
text-align:left;
vertical-align:middle;
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
}
.aw-row-selector {
width: 25px;
text-align: center;
background: #E6E6F2;
font-weight: bold;
}
.aw-items {
text-align:left;
vertical-align:middle;
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
}
.aw-mouseover-row .aw-row-selector {color: red;}
.aw-mouseover-selector {background: green; cursor:pointer;}
.aw-rows-selected {background: #316ac5;}
</style>
<body>
<script>
function clip_paste(myText)
{
if (window.clipboardData) {
return window.clipboardData.getData("Text");
}
else {
return "";
}
}
function clip_copy(myText)
{
if (window.clipboardData)
{
// the IE-manier
window.clipboardData.setData("Text", myText);
}
else if (window.netscape)
{
// you have to sign the code to enable this, or see notes below
netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
if (!clip) return;
var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
if (!trans) return;
trans.addDataFlavor('text/unicode');
var str = new Object();
var len = new Object();
var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
var copytext=myText;
str.data=copytext;
trans.setTransferData("text/unicode",str,copytext.length*2);
var clipid=Components.interfaces.nsIClipboard;
if (!clip) return false;
clip.setData(trans,null,clipid.kGlobalClipboard);
}
//alert("Following info was copied to your clipboard:\n\n" + myText);
return false;
}
//=func
function UtilQueryDeepCopy(vals)
{
var res= new Array(vals.length);
for (var i=0;i<vals.length;i++) {
res[i]= vals[i].concat();
}
return res;
}
//
function displayGrid(myPage,myId,myEvos)
{
//debugger;
// setup the widget
var obj = new AW.Grid.Extended;
obj.evos= myEvos;
// general grid
obj.setId(myId);
obj.setVirtualMode(false);
obj.setSelectionMode("row");
obj.setColumnCount(obj.evos.Headers.length);
obj.setRowCount(obj.evos.NRows);
obj.getRowTemplate().setClass("text", "wrap");
// selector
obj.setSelectorVisible(true);
obj.setSelectorWidth(25);
obj.setSelectorResizable(false);
obj.setSelectorText(function(i){return this.getRowPosition(i)+1});
// data, headers
var nbheaders= 1;
for (var i= 0;i<obj.evos.SubHeaders.length;i++) {
if (obj.evos.SubHeaders[0]!=obj.evos.SubHeaders[i]) {
nbheaders= 2;
break;
}
}
obj.setHeaderCount(nbheaders);
obj.setHeaderText(obj.evos.Headers,0);
if (nbheaders==2) obj.setHeaderText(obj.evos.SubHeaders,1);
obj.setCellText(obj.evos.Data);
obj.getHeaderTemplate().setStyle("text-align","center");
// tooltip
for (var i= 0;i<obj.evos.Description.length;i++) {
if (obj.evos.ColEdit[i]==0) {
obj.setCellTooltip(obj.evos.Description[i]+",Colonne non éditable.", i);
obj.setHeaderTooltip(obj.evos.Description[i]+",Colonne non éditable.", i);
}
else {
obj.setCellTooltip(obj.evos.Description[i], i);
obj.setHeaderTooltip(obj.evos.Description[i], i);
}
}
// alignment
for (var i= 0;i<obj.evos.ColSizes.length;i++) {
obj.setColumnWidth(obj.evos.ColSizes[i],i);
if (obj.evos.ColAlign[i]==1)
obj.getCellTemplate(i).setStyle("text-align", "right");
}
obj.setControlSize(100, 55 + (2+obj.getRowHeight())*obj.evos.PageSize);
obj.setStyle("width", "98%");
// add evos data to the object
obj.evos.ViewMode= 1;
obj.evos.evosDelete= new Array();
obj.evos.Page= myPage;
obj.evos.DupliNb= 0;
// default to view mode
obj.setSelectionMode("single-row");
//-------------------------------------------------------------
// errors stuff
//-------------------------------------------------------------
if (obj.evos.TbErrors) {
for (var i=0;i<obj.evos.TbErrors.length;i++) {
if (obj.evos.TbErrors[i].length == 0) {
obj.getSelectorTemplate(i).setStyle("background-color", "#ADFF2F");
}
else {
obj.getSelectorTemplate(i).setStyle("background-color", "#FFC0CB");
for (var j=0;j<obj.evos.TbErrors[i].length;j++) {
if (obj.evos.TbErrors[i][j] != '') {
obj.setCellTooltip(obj.evos.TbErrors[i][j],j,i);
obj.getCellTemplate(j,i).setStyle("background-color", "#FFC0CB");
}
}
}
}
}
//-------------------------------------------------------------
// add/delete stuff
//-------------------------------------------------------------
obj.onRowDeleting = function(row){
return !confirm("Confirmez la suppression de la ligne sélectionnée?");
};
obj.onRowDeleted = function(row){
this.evosDelete[ obj.evosDelete.length ]= this.evosIds[row];
this.evos.DataIds[row] = '-1';
};
//-------------------------------------------------------------
// GridNew
//-------------------------------------------------------------
obj.GridNew = function() {
//debugger;
this.addRow(this.evos.NRows);
for (var i= 0;i<this.getColumnCount() ; i++) {
this.setCellText("", i, this.evos.NRows);
}
this.evos.DataIds[this.evos.NRows++] = '';
};
//-------------------------------------------------------------
// GridDuplicate
//-------------------------------------------------------------
obj.GridDuplicate = function() {
//debugger;
var cur = this.getCurrentRow();
this.addRow(this.evos.NRows);
for (var i= 0;i<this.getColumnCount() ; i++) {
if (this.evos.ColEdit[i] == 0)
this.setCellText("", i, this.evos.NRows);
else if (this.evos.ColEdit[i] == 2) {
this.setCellText(this.getCellText(i, cur)+ "_"+ obj.evos.DupliNb, i,this.evos.NRows );
obj.evos.DupliNb += 1;
}
else
this.setCellText(this.getCellText(i, cur), i,this.evos.NRows );
}
this.evos.DataIds[this.evos.NRows++] = '';
};
//-------------------------------------------------------------
// GridSave
//-------------------------------------------------------------
obj.GridSave = function() {
//debugger;
var textdata="";
var ncol= this.getColumnCount();
for (var i=0;i<this.evos.NRows;i++) {
if (textdata!="") textdata += "\n";
if (this.evos.DataIds[i] != '-1') {
textdata+= this.evos.DataIds[i] + "\t";
for (var j=0;j<ncol;j++) {
if (j!=0) textdata += "\t";
textdata+= this.getCellText(j,i) ;
}
}
}
var textdelete="";
for (var i=0;i<this.evos.evosDelete.length;i++) {
if (textdelete!="") textdelete += "\t";
textdelete+= this.evos.evosDelete[i] + "\t";
}
var textsizes="";
for (var j=0;j<ncol;j++) {
if (j!=0) textsizes += "\t";
textsizes+= this.getColumnWidth(j) ;
}
document.EvosGridSave.grid.value= textdata;
document.EvosGridSave.sizes.value= textsizes;
document.EvosGridSave.dele.value= textdelete;
document.EvosGridSave.submit();
};
//-------------------------------------------------------------
// GridRestore
//-------------------------------------------------------------
obj.GridRestore = function() {
this.evos.Data= UtilQueryDeepCopy(this.evos.DataBackup);
this.evos.DataIds= this.evos.IdsBackup.concat();
this.setCellText(this.evos.Data);
this.setRowCount(this.evos.DataIds.length);
this.refresh();
};
//-------------------------------------------------------------
// GridDelete
//-------------------------------------------------------------
obj.GridDelete = function() {
var i = this.getCurrentRow();
this.deleteRow(i);
};
//-------------------------------------------------------------
// GridCopy
//-------------------------------------------------------------
obj.GridCopy = function() {
var nrow= this.getRowCount();
var ncol= this.getColumnCount();
// check if pkids are already in column
var pid= false;
for (var i=0;i<ncol;i++) {
if ((this.evos.SubHeaders[i] == "") && (this.evos.Headers[i] == "id")) {
pid= true;
break;
}
}
var text="";
if (pid == false) text= "pid\t";
for (var j=0;j<ncol;j++) {
if (j!=0) text += "\t";
text += this.evos.SubHeaders[j] + "." + this.evos.Headers[j];
}
for (var i=0;i<nrow;i++) {
text += "\n";
if (pid == false) text+= this.evos.DataIds[i] + "\t";
for (var j=0;j<ncol;j++) {
if (j!=0) text += "\t";
text += this.getCellText(j, i);
}
}
clip_copy(text);
};
//-------------------------------------------------------------
// GridPaste
//-------------------------------------------------------------
obj.GridPaste = function() {
var text= clip_paste();
var rows= UtilSplit(text,"\n");
var nrow= rows.length;
var ncol= this.evos.Headers.length;
var ididx= 0;
// check if pkids are already in column
var pid= false;
for (var i=0;i<ncol;i++) {
if ((this.evos.SubHeaders[i] == "") && (this.evos.Headers[i] == "id")) {
pid= true;
ididx= i;
break;
}
}
this.evos.Data = new Array();
this.evos.DataIds = new Array();
for (var i=0;i<nrow;i++) {
//alert(rows[i]);
var tmp= UtilSplit(rows[i],"\t");
var idx=0;
var j=0;
var jmax= tmp.length;
if (jmax > ncol) jmax= ncol;
if (pid==false) {
this.evos.DataIds[i]= tmp[0];
j= 1;
}
this.evos.Data[i]= new Array();
this.evos.DataIds[i]= '';
for (;j<jmax;j++) {
this.evos.Data[i][idx++]= tmp[j];
if (j == ididx) this.evos.DataIds[i]= tmp[j];
}
for (j= jmax;j<ncol;j++) {
this.evos.Data[idx++]= '';
}
}
this.setRowCount(nrow);
this.setCellText(data);
this.refresh();
};
//-------------------------------------------------------------
// CellChanged
//-------------------------------------------------------------
obj.onCellValidated = function(text, col, row){
if (row < this.evos.DataBackup.length && text != this.evos.DataBackup[row][col])
this.getCellTemplate(col, row).setStyle("color", "red");
else
this.getCellTemplate(col, row).setStyle("color", "#000");
return true;
};
//-------------------------------------------------------------
// Cancel line Changed
//-------------------------------------------------------------
obj.onSelectorClicked = function(event, index){
if (this.evos.viewMode == 0 && index < this.evos.DataBackup.length) {
for (var c=0;c<obj.evos.Headers.length;c++) {
this.setCellText(this.evos.DataBackup[index][c],c,index);
this.getCellTemplate(c, index).setStyle("color", "#000");
}
}
};
//-------------------------------------------------------------
// GridModify
//-------------------------------------------------------------
obj.GridModify = function() {
//debugger;
this.setSelectedRows([]);
this.setSelectedColumns([]);
this.setSelectionMode("single-cell");
this.setStyle("cursor","default");
this.evos.viewMode= 0;
this.onRowClicked= function(event, index) { };
// alignment and editable columns
for (var i= 0;i<this.evos.ColSizes.length;i++) {
if (this.evos.ColEdit[i]==0) {
this.setCellEditable(false,i);
}
else
this.setCellEditable(true,i);
}
};
//-------------------------------------------------------------
// GridView
//-------------------------------------------------------------
obj.GridView = function() {
//debugger;
this.setSelectedRows([]);
this.setSelectedColumns([]);
this.setSelectionMode("single-row");
this.evos.viewMode= 1;
this.setCellEditable(false);
this.onRowMouseOver= function(event, index) { this.setStyle("cursor","pointer");};
this.onRowMouseOut= function(event, index) { this.setStyle("cursor","default");};
this.onRowClicked= function(event, index) {
var theURL= "index.html?ctrl:cmd=action&ctrl:id=window." + this.evos.Page + "&todo=view&objid=" + this.evos.DataIds[index];
ww= window.open(theURL,"page"+this.evos.DataIds[index]);
ww.focus();
};
};
//-------------------------------------------------------------
// GridIncLine
//-------------------------------------------------------------
obj.GridIncLine = function() {
var nb= this.getRowHeight() + 18;
this.setRowHeight(nb);
this.setStyle("height", 55 + (2+nb)*this.evos.PageSize);
this.refresh();
};
//-------------------------------------------------------------
// GridIncLine
//-------------------------------------------------------------
obj.GridDecLine = function() {
var nb= this.getRowHeight();
if (nb > 35) {
nb -= 18;
this.setRowHeight(nb);
this.setStyle("height", 55 + (2+nb)*this.evos.PageSize);
this.refresh();
}
};
//-------------------------------------------------------------
// Layout
//-------------------------------------------------------------