Dieses Beispiel benutzt height:maxElement (mehrere Element teilen eine maximale Höhe) und "children" als Größenangabe (ein Element nimmt die zusammengenommene Breite aller seiner Kinder an). Die Tabelle ist eine HTML Tabelle.
Spalte 1 (Col 1) und Spalte 4 (Col 4) sind für Drag & Drop aktiviert. In Spalte 2 (Col 2) und Spalte 3 (Col 3) ist die Text-Selektion nicht unterbunden.
Das Ui wird aller Vorraussicht nach keine HTML Attribute für Tabellen unterstützen. Dies würde die angestrebte Trennung von Design und Objekterstellung durchbrechen. Als weitere Einschränkung wird nur die CSS Eigenschaft "border-collapse:separate" unterstützt. Der Aufwand, das Modell (ein Fremdkörper bezogen auf das Standard-DOM Box-Modell) welches hinter "border-collapse:collapse" steht, in das bestehende System zu integrieren, ist nicht vertretbar und führt nur zu einer extremen Verlangsamung des UI. Nebenbei sei erwähnt, dass Firefox zumindest im Ansatz, den Versuch erfolgreich unternimmt, hier Ordnung zu schaffen, es bleiben aber prinzipelle Lücken, die nur schwer zu stopfen sind. Der Nutzen von "border-collapse:collapse" ist zudem eher gering und die verbleibenden Möglichkeiten sollten genügen, um gute Tablellen erstellen zu können.
Webkit (Chrome, Safari, Iron etc.) hat Probleme mit der CSS Angabe "table-layout:fixed" wenn per Scripting Änderungen vorgenommen werden. Wird die Breite von Tabellen-Zelle(n) vor der Breite der kompletten Tabelle gesetzt, springt Webkit auf "table-layout:auto" und die Tabellenzellen werden nach "ästhetischen" Gesichtspunkten dargestellt. Ebenso geht die Angabe "fixed" verloren, wenn keine Tabellenbreite angegeben wird. Ein "Tritt in den Hintern" behebt das Problem. Mit dem kleinen Häkchen im Debug-Fenster vor "useTableLayoutFix" kann der Fix ein- und ausgeschaltet werden.
if(w!=undefined && nix.rd.width!=w)
{
nix.rd.width=w
nix.n.style.width=w+"px";
if(nix.cow && app.useTableLayoutFix)
{
app.fixTableLayout(nix)
}
}
this.fixTableLayout=function(nix)
{
var y,cn=nix.o.elements[nix.s.colsParent]
nix.n.style.tableLayout="auto"
for(y=0;y<cn.childNodes.length;y++)
{
app.getCS(cn.childNodes[y]).width
}
nix.n.style.tableLayout="fixed"
}
app.newClass("table","movedock",function(param,app,superClass){
this.classType="table"
//this.noDefaultContent=true;
this.nonPrototype=function(param,$class$)
{
return {
selectable:{}
,resizable:{render:false}
,dock:{
dockRoot:true
}
,move:{}
,size:{height:"fit"}
,sizes:{
content:{scroll:false},
colheads:{width:"fit",scroll:"hidden"}
,colheadscontainer:{width:"children"}
,colhead1:{element:"td1",width:"element",elementBox:"margin",box:"margin",height:"maxElement"}
,colhead2:{element:"td2",width:"element",elementBox:"margin",box:"margin",height:"maxElement"}
,colhead3:{element:"td3",width:"element",elementBox:"margin",box:"margin",height:"maxElement"}
,colhead4:{element:"td4",width:"element",elementBox:"margin",box:"margin",height:"maxElement"}
,colscroll:{width:"scrollBar",scrollBar:"cols",height:"fit"}
,cols:{sizeHeight:true,width:"fit",height:"fit",linkScroll:"colheads"}
,colstable:{width:"cols",colsParent:"colgroup"}
,thead:{breakChildren:true}
,tbody:{breakChildren:true}
,col1:{width:"80"}
,col2:{width:"fit"}
,col3:{width:"25%"}
,col4:{width:"25%"}
}
}
}
this.contentOpenHTML=function(param,$class$)
{
return [
{tagOpen:"div",$id$:"colheads"}
,{tagOpen:"div",style:"height:auto;",$id$:"colheadscontainer"}
,{tagName:"div",id:"colhead1",style:"height:auto;",className:"colhead",children:[
{tagName:"button",$id$:"moveLeft1",name:"1",children:["<"],click:$this$.moveLeft},"<SPAN>Col 1</SPAN>",
{tagName:"button",$id$:"moveRight1",name:"1",children:[">"],click:$this$.moveRight},
"<BR><NOBR>",{tagOpen:"input",$id$:"a1",type:"radio",name:this.uid+"col1",value:"25%",$flag$:(this.sizes.col1.width=="25%")?"checked":"",click:$this$.setWidth},"<SPAN>25%</SPAN></NOBR> ",
"<NOBR>",{tagOpen:"input",$id$:"a2",type:"radio",name:this.uid+"col1",value:"30%",$flag$:(this.sizes.col1.width=="30%")?"checked":"",click:$this$.setWidth},"<SPAN>30%</SPAN></NOBR> ",
"<NOBR>",{tagOpen:"input",$id$:"a3",type:"radio",name:this.uid+"col1",value:"50%",$flag$:(this.sizes.col1.width=="50%")?"checked":"",click:$this$.setWidth},"<SPAN>50%</SPAN></NOBR> ",
"<NOBR>",{tagOpen:"input",$id$:"a4",type:"radio",name:this.uid+"col1",value:"fit",$flag$:(this.sizes.col1.width=="fit")?"checked":"",click:$this$.setWidth},"<SPAN>fit</SPAN></NOBR> ",
"<NOBR>",{tagOpen:"input",$id$:"a5",type:"radio",name:this.uid+"col1",value:"200",$flag$:(this.sizes.col1.width=="200")?"checked":"",click:$this$.setWidth},"<SPAN>200</SPAN></NOBR> ",
"<NOBR>",{tagOpen:"input",$id$:"a6",type:"radio",name:this.uid+"col1",value:"80",$flag$:(this.sizes.col1.width=="80")?"checked":"",click:$this$.setWidth},"<SPAN>80</SPAN></NOBR>"
]}
,{tagName:"div",id:"colhead2",style:"height:auto;",className:"colhead",children:[
{tagName:"button",$id$:"moveLeft2",name:"2",children:["<"],click:$this$.moveLeft},"<SPAN>Col 2</SPAN>",
{tagName:"button",$id$:"moveRight2",name:"2",children:[">"],click:$this$.moveRight},
"<BR><NOBR>",{tagOpen:"input",$id$:"b1",type:"radio",name:this.uid+"col2",value:"25%",$flag$:(this.sizes.col2.width=="25%")?"checked":"",click:$this$.setWidth},"<SPAN>25%</SPAN></NOBR> ",
"<NOBR>",{tagOpen:"input",$id$:"b2",type:"radio",name:this.uid+"col2",value:"30%",$flag$:(this.sizes.col2.width=="30%")?"checked":"",click:$this$.setWidth},"<SPAN>30%</SPAN></NOBR> ",
"<NOBR>",{tagOpen:"input",$id$:"b3",type:"radio",name:this.uid+"col2",value:"50%",$flag$:(this.sizes.col2.width=="50%")?"checked":"",click:$this$.setWidth},"<SPAN>50%</SPAN></NOBR> ",
"<NOBR>",{tagOpen:"input",$id$:"b4",type:"radio",name:this.uid+"col2",value:"fit",$flag$:(this.sizes.col2.width=="fit")?"checked":"",click:$this$.setWidth},"<SPAN>fit</SPAN></NOBR> ",
"<NOBR>",{tagOpen:"input",$id$:"b5",type:"radio",name:this.uid+"col2",value:"200",$flag$:(this.sizes.col2.width=="200")?"checked":"",click:$this$.setWidth},"<SPAN>200</SPAN></NOBR> ",
"<NOBR>",{tagOpen:"input",$id$:"b6",type:"radio",name:this.uid+"col2",value:"80",$flag$:(this.sizes.col3.width=="80")?"checked":"",click:$this$.setWidth},"<SPAN>80</SPAN></NOBR>"
]}
,{tagName:"div",id:"colhead3",style:"height:auto;",className:"colhead",children:[
{tagName:"button",$id$:"moveLeft3",name:"3",children:["<"],click:$this$.moveLeft},"<SPAN>Col 3</SPAN>",
{tagName:"button",$id$:"moveRight3",name:"3",children:[">"],click:$this$.moveRight},
"<BR><NOBR>",{tagOpen:"input",$id$:"c1",type:"radio",name:this.uid+"col3",value:"25%",$flag$:(this.sizes.col3.width=="25%")?"checked":"",click:$this$.setWidth},"<SPAN>25%</SPAN></NOBR> ",
"<NOBR>",{tagOpen:"input",$id$:"c2",type:"radio",name:this.uid+"col3",value:"30%",$flag$:(this.sizes.col3.width=="30%")?"checked":"",click:$this$.setWidth},"<SPAN>30%</SPAN></NOBR> ",
"<NOBR>",{tagOpen:"input",$id$:"c3",type:"radio",name:this.uid+"col3",value:"50%",$flag$:(this.sizes.col3.width=="50%")?"checked":"",click:$this$.setWidth},"<SPAN>50%</SPAN></NOBR> ",
"<NOBR>",{tagOpen:"input",$id$:"c4",type:"radio",name:this.uid+"col3",value:"fit",$flag$:(this.sizes.col3.width=="fit")?"checked":"",click:$this$.setWidth},"<SPAN>fit</SPAN></NOBR> ",
"<NOBR>",{tagOpen:"input",$id$:"c5",type:"radio",name:this.uid+"col3",value:"200",$flag$:(this.sizes.col3.width=="200")?"checked":"",click:$this$.setWidth},"<SPAN>200</SPAN></NOBR> ",
"<NOBR>",{tagOpen:"input",$id$:"c6",type:"radio",name:this.uid+"col3",value:"80",$flag$:(this.sizes.col3.width=="80")?"checked":"",click:$this$.setWidth},"<SPAN>80</SPAN></NOBR>"
]}
,{tagName:"div",id:"colhead4",style:"height:auto;",className:"colhead",children:[
{tagName:"button",$id$:"moveLeft4",name:"4",children:["<"],click:$this$.moveLeft},"<SPAN>Col 4</SPAN>",
{tagName:"button",$id$:"moveRight4",name:"4",children:[">"],click:$this$.moveRight},
"<BR><NOBR>",{tagOpen:"input",$id$:"d1",type:"radio",name:this.uid+"col4",value:"25%",$flag$:(this.sizes.col4.width=="25%")?"checked":"",click:$this$.setWidth},"<SPAN>25%</SPAN></NOBR> ",
"<NOBR>",{tagOpen:"input",$id$:"d2",type:"radio",name:this.uid+"col4",value:"30%",$flag$:(this.sizes.col4.width=="30%")?"checked":"",click:$this$.setWidth},"<SPAN>30%</SPAN></NOBR> ",
"<NOBR>",{tagOpen:"input",$id$:"d3",type:"radio",name:this.uid+"col4",value:"50%",$flag$:(this.sizes.col4.width=="50%")?"checked":"",click:$this$.setWidth},"<SPAN>50%</SPAN></NOBR> ",
"<NOBR>",{tagOpen:"input",$id$:"d4",type:"radio",name:this.uid+"col4",value:"fit",$flag$:(this.sizes.col4.width=="fit")?"checked":"",click:$this$.setWidth},"<SPAN>fit</SPAN></NOBR> ",
"<NOBR>",{tagOpen:"input",$id$:"d5",type:"radio",name:this.uid+"col4",value:"200",$flag$:(this.sizes.col4.width=="200")?"checked":"",click:$this$.setWidth},"<SPAN>200</SPAN></NOBR> ",
"<NOBR>",{tagOpen:"input",$id$:"d6",type:"radio",name:this.uid+"col4",value:"80",$flag$:(this.sizes.col4.width=="80")?"checked":"",click:$this$.setWidth},"<SPAN>80</SPAN></NOBR>"
]}
,{tagClose:"div"}
,{tagClose:"div"},{tagName:"div",$id$:"colscroll"}
,{tagOpen:"div",$id$:"cols"}
,{tagOpen:"table",$id$:"colstable"}
,{tagOpen:"colgroup",$id$:"colgroup"}
,{tagOpen:"col",id:"col1",className:"col"}
,{tagOpen:"col",id:"col2",className:"col"}
,{tagOpen:"col",id:"col3",className:"col"}
,{tagOpen:"col",id:"col4",className:"col"}
,{tagClose:"colgroup"}
,{tagOpen:"tfoot",$id$:"tfoot"}
,{tagOpen:"tr",$id$:"coltr"}
,{tagName:"td",id:"td1",className:"coltd"}
,{tagName:"td",id:"td2",className:"coltd"}
,{tagName:"td",id:"td3",className:"coltd"}
,{tagName:"td",id:"td4",className:"coltd"}
,{tagClose:"tr"}
,{tagClose:"tfoot"}
,{tagName:"tbody",$id$:"tbody"}
,{tagClose:"table"}
,{tagClose:"div"}
]
}
this.moveLeft=function(eO,$class$)
{
var t=new Date()
var e,p;
(p=getElement.call(this,"colheadscontainer")).insertBefore(e=getElement.call(this,"colhead"+eO.target.name),e.previousSibling||p.firstChild);
(p=getElement.call(this,"colgroup")).insertBefore(e=getElement.call(this,"col"+eO.target.name),e.previousSibling||p.firstChild);
(p=getElement.call(this,"coltr")).insertBefore(e=getElement.call(this,"td"+eO.target.name),e.previousSibling||p.firstChild);
for(x=0;x<this.children.length;x++)
{
if(this.children[x].moveLeft)this.children[x].moveLeft.call(this.children[x],eO,$class$)
}
if(window.debug)debug.ins("moveLeft:"+((new Date())-t)+"ms")
}
this.moveRight=function(eO,$class$)
{
var t=new Date()
var e
getElement.call(this,"colheadscontainer").insertBefore(e=getElement.call(this,"colhead"+eO.target.name),(e.nextSibling && e.nextSibling.nextSibling));
getElement.call(this,"colgroup").insertBefore(e=getElement.call(this,"col"+eO.target.name),(e.nextSibling && e.nextSibling.nextSibling));
getElement.call(this,"coltr").insertBefore(e=getElement.call(this,"td"+eO.target.name),(e.nextSibling && e.nextSibling.nextSibling));
for(x=0;x<this.children.length;x++)
{
if(this.children[x].moveRight)this.children[x].moveRight.call(this.children[x],eO,$class$)
}
if(window.debug)debug.ins("moveRight:"+((new Date())-t)+"ms")
}
this.setWidth=function(eO,$class$)
{
this.sizes[app.getElementStr(eO.target.name)].width=eO.target.value
this.content.applySize.call(this,true)
}
})
app.newClass("row","movedock",function(param,app,superClass){
this.classType="row"
this.noDefaultContent=true;
this.noDefaultObject=true;
this.allowSelection=true;
this.nonPrototype=function(param,$class$)
{
return {
size:{width:"fit",height:"auto",position:"floatleft"}
,selectable:{selectIn:["cell1"]}
,dock:{}
,move:{moveIn:["cell1","cell4"]}
}
}
this.containerHTML=function(param,$class$)
{
return {
tbody:[{tagOpen:"tr",$id$:"tr"},
{tagName:"td",id:"cell1",className:"cell",children:[$this$.getRandomText("column 1")]},
{tagName:"td",id:"cell2",className:"cell",children:[$this$.getRandomText("column 2")]},
{tagName:"td",id:"cell3",className:"cell",children:[$this$.getRandomText("column 3")]},
{tagName:"td",id:"cell4",className:"cell",children:[$this$.getRandomText("column 4")]}
]
}
}
this.moveLeft=function(eO,$class$)
{
var e,p;
(p=getElement.call(this,"tr")).insertBefore(e=getElement.call(this,"cell"+eO.target.name),e.previousSibling||p.firstChild);
}
this.moveRight=function(eO,$class$)
{
var e
getElement.call(this,"tr").insertBefore(e=getElement.call(this,"cell"+eO.target.name),(e.nextSibling && e.nextSibling.nextSibling));
}
this.getRandomText=function(str)
{
var x,l=parseInt(Math.random()*100)+50
str2=""
for(x=0;x<l;x++)
{
str2=str2+String.fromCharCode(parseInt(Math.random()*25)+66)
if(parseInt(Math.random()*3)==2)str2+=" ";
}
return "<B>"+str+"</B><BR>"+str2+" <B>end...</B>"
}
})
var t=app.newObject("table")
for(var x=0;x<10;x++)
{
t.addLastChild("row")
}
t=app.newObject("table")
for(var x=0;x<10;x++)
{
t.addLastChild("row")
}
.app-colstable
{
border:0px;
padding:0px;
margin:0px;
border-spacing:10px 4px;
table-layout:fixed;
border-collapse:separate;
empty-cells:hide;
}
.app-col
{
min-width:50px;
}
.app-cols{
-moz-box-shadow: inset 4px 4px 4px #dddddd;
-webkit-box-shadow: inset 4px 4px 4px #dddddd;
box-shadow: inset 4px 4px 4px #dddddd;
border:1px solid #cccccc;
overflow:auto;
padding:0px;
}
.app-colheadscontainer{
overflow:hidden;
}
.app-colheads{
background-color:#dddddd;
float:left;
}
.app-colhead
{
padding:5px;
margin:0px;
float:left;
background-color:#dddddd;
border-left:1px solid #cccccc;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
}
.app-colscroll
{
background-color: #dddddd;
float:left;
}
.app-cell{
margin:0px;
padding:3px;
border:1px solid #cccccc;
overflow:hidden;
background-color:#ffffff;
-moz-box-shadow: 4px 4px 4px #dddddd;
-webkit-box-shadow: 4px 4px 4px #dddddd;
box-shadow: 4px 4px 4px #dddddd;
text-overflow:ellipsis;
vertical-align:top;´
}
.app-table
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 2px solid #cccccc;
margin:3px;
padding:3px;
background-color: #dddddd;
}