{
|
|
|
|
class zColumns{
|
|
resetMerge(){
|
this.merge.helper.value=null;
|
this.merge.helper.td=null;
|
this.merge.helper.count=0;
|
}
|
|
constructor(o,x){
|
this.editAble=o.editAble==true;
|
this.index=x;
|
this.binding=o.binding==undefined?null:o.binding;
|
this.noBinding=this.binding==undefined;
|
this.merge={
|
enable:false,
|
helper:{
|
value:null,
|
td:null,
|
count:0
|
}
|
};
|
this.index=null;
|
this.type=o.type==null?"value":o.type;
|
this.class=o.class;
|
this.cellClass=o.cellClass==undefined?null:o.cellClass;
|
this.cellStyle=o.cellStyle==undefined?null:o.cellStyle;
|
this.style=o.style;
|
if(o.merge!=undefined){
|
o.merge=o.merge;
|
}
|
this.merge.enable=o.merge!=undefined?true:false;
|
this.format=o.format==undefined?null:o.format;
|
this.index=o.index==undefined?x:o.index;
|
this.binding=o.binding==undefined?this.name:o.binding;
|
this.name=o.name==undefined?"column "+(x+1):o.name;
|
this.info={
|
// option:opt,
|
row: null,
|
value:null
|
};
|
if(o.filter!=undefined){
|
this.info.filter=o.filter;
|
if(this.info.filter.enable==undefined){
|
this.info.filter.enable=true;
|
o.filter.enable=true;
|
}
|
this.filter=o.filter;
|
}
|
}
|
toHtml(){
|
var htm="<th ";
|
if(this.class!=undefined){
|
htm+='class="'+this.class+'" ';
|
}
|
if(this.style!=undefined){
|
htm+='style="'+this.style+'" ';
|
}
|
htm+=">"+this.name+"</th>";
|
return htm;
|
}
|
|
|
|
|
createTd(row,islast){
|
var td=null;
|
switch(this.type){
|
case "value":
|
var val=null;
|
if(this.format==null){
|
if(this.binding==null){
|
return;
|
}
|
val=row[this.binding];
|
}
|
else{
|
this.info.row=row;
|
this.info.value=this.binding==null?null:row[this.binding];
|
val=this.format(this.info);
|
}
|
if(this.merge.enable){
|
var mg=this.merge;
|
if(mg.td==null){
|
mg.td=document.createElement("td");
|
mg.count=1;
|
mg.value=val;
|
mg.td.innerText=val;
|
if(this.cellClass!=null){
|
mg.td.setAttribute("class",this.cellClass);
|
}
|
if(this.cellStyle!=null){
|
mg.td.setAttribute("style",this.cellStyle);
|
}
|
return mg.td;
|
}
|
else{
|
if(mg.value==val){
|
mg.count++;
|
if(islast){
|
if(mg.count>1)
|
mg.td.rowSpan=mg.count;
|
return null;
|
}
|
return null;
|
}
|
else{
|
if(mg.count>1)
|
mg.td.rowSpan=mg.count;
|
mg.td=document.createElement("td");
|
mg.count=1;
|
mg.value=val;
|
mg.td.innerText=val;
|
if(this.cellClass!=null){
|
mg.td.setAttribute("class",this.cellClass);
|
}
|
if(this.cellStyle!=null){
|
mg.td.setAttribute("style",this.cellStyle);
|
}
|
return mg.td;
|
}
|
}
|
}
|
else{
|
td=document.createElement("td");
|
td.innerText=val;
|
if(this.cellClass!=null){
|
mg.td.setAttribute("class",this.cellClass);
|
}
|
if(this.cellStyle!=null){
|
mg.td.setAttribute("style",this.cellStyle);
|
}
|
return td;
|
}
|
|
break;
|
case "element":
|
td=document.createElement("td");
|
if(this.cellClass!=null){
|
mg.td.setAttribute("class",this.cellClass);
|
}
|
if(this.cellStyle!=null){
|
mg.td.setAttribute("style",this.cellStyle);
|
}
|
if(this.format==null){
|
if(this.binding==null)
|
return;
|
td.innerHTML=row[this.binding];
|
}
|
else{
|
this.info.row=row;
|
this.info.value=this.binding==null?null:row[this.binding];
|
td.innerHTML=this.format(this.info);
|
}
|
return td;
|
break;
|
case "checkbox":
|
td=document.createElement("td");
|
if(this.cellClass!=null){
|
mg.td.setAttribute("class",this.cellClass);
|
}
|
if(this.cellStyle!=null){
|
mg.td.setAttribute("style",this.cellStyle);
|
}
|
if(this.binding==null)
|
td.innerHTML='<input type="checkbox" ></input>';
|
else
|
{
|
var a=row[this.binding]==true;
|
|
var sss=a==false?'<input type="checkbox" ></input>':'<input type="checkbox" checked="true"></input>';
|
td.innerHTML=sss;
|
}
|
return td;
|
break;
|
case "radio":
|
td=document.createElement("td");
|
if(this.cellClass!=null){
|
mg.td.setAttribute("class",this.cellClass);
|
}
|
if(this.cellStyle!=null){
|
mg.td.setAttribute("style",this.cellStyle);
|
}
|
if(this.binding==null)
|
td.innerHTML='<input type="radio" name="ddr'+this.index+'"></input>';
|
else
|
{
|
var a=row[this.binding]==true;
|
|
var sss=(a==false?'<input type="radio"':'<input type="radio" checked="true"')+' name="ra'+this.index+'"></input>';
|
td.innerHTML=sss;
|
}
|
return td;
|
break;
|
}
|
}
|
|
}
|
|
|
|
|
|
|
|
class zTable{
|
|
updateTrStyle(){
|
if(this.option.table.trStyles==null || this.option.table.trStyles==undefined){
|
return;
|
}
|
var row=null;
|
if(this.option.table.trStyles.length>1){
|
var st=this.option.table.trStyles;
|
var l=this.option.table.trStyles.length;
|
var r=false;
|
for(var i=0;i<this.z_b.children.length;i++){
|
var r=this.z_b.children[i];
|
if(r.style.visibility!="collapse"){
|
row++;
|
r.setAttribute("style",st[(row-1)%l]);
|
|
}
|
}
|
}
|
}
|
|
|
newRow(){
|
var r=document.createElement("tr");
|
var c= this.option.columns.length;
|
for(var i=0;i<c;i++){
|
var td=document.createElement("td");
|
r.appendChild(td);
|
td.setAttribute("contenteditable",true);
|
}
|
this.z_b.appendChild(r);
|
}
|
|
toArray(){
|
|
if(this.option.createItem!=null && this.option.createItem!=undefined){
|
var arr=[];
|
for(var i=0;i<this.z_b.children.length;i++){
|
var item= this.option.createItem(this.z_b.children[i]);
|
arr.push(item);
|
}
|
return arr;
|
}
|
return null;
|
}
|
|
|
rollToNext(byupdate){
|
if(this.rollEnable && this.z_b.children.length>0){
|
var r=this.roll;
|
var p=this.roll.position;
|
var ed=p+r.count;
|
for(var i=0;i<this.z_b.children.length;i++){
|
if(i>=p && i<ed){
|
this.z_b.children[i].style.visibility="visible";
|
}
|
else
|
this.z_b.children[i].style.visibility="collapse";
|
}
|
if(ed>=this.z_b.children.length)
|
r.position=0;
|
else
|
r.position=ed;
|
}
|
this.updateTrStyle();
|
}
|
|
update(data){
|
var tr=null;
|
var tst=this.option.table.trStyles==undefined?null:this.option.table.trStyles;
|
this.z_b.innerHTML="";
|
for(var i=0;i<this.columns.length;i++){
|
this.columns[i].resetMerge();
|
}
|
var a=null;
|
for(var i=0;i<data.length;i++){
|
tr=document.createElement("tr");
|
if(tst!=null){
|
tr.style=tst[i%tst.length];
|
}
|
|
var islast=i==data.length-1;
|
for(var j=0;j<this.columns.length;j++){
|
|
//td=document.createElement("td");
|
var td= this.columns[j].createTd(data[i],islast);
|
if(this.columns[j].editAble){
|
td.setAttribute("contentEditable",true);
|
}
|
if(td!=null && td!=undefined){
|
td.owner_column=this.columns[j];
|
tr.appendChild(td);
|
}
|
}
|
tr.zdc=data[i];
|
this.z_b.appendChild(tr);
|
|
}
|
if(this.roll!=undefined){
|
this.rollToNext(true);
|
}
|
|
}
|
|
clear(){
|
this.z_b.innerHTML=null;
|
}
|
|
updateToData(){
|
if(this.option.table.update==null || this.option.table.update==undefined)
|
return;
|
for(var i=0;i<this.z_b.children.length;i++){
|
var tr=this.z_b.children[i];
|
var data=tr.zdc;
|
this.option.table.update(tr,data);
|
}
|
}
|
|
|
constructor(div,option){
|
|
this.z_p=div;
|
this.rowSize=option.rowSize==undefined?option.columns.length:option.rowSize;
|
this.option=option;
|
this.roll=null;
|
this.rollEnable=false;
|
if(this.option.table.roll!=undefined && this.option.table.roll!=null){
|
var r=this.option.table.roll;
|
try{
|
this.roll={
|
interval:r.interval==undefined?null:r.interval,
|
count:r.count==undefined?0:r.count,
|
position:0
|
};
|
this.rollEnable=r.enable==undefined?true:r.enable;
|
}
|
catch{
|
this.roll=null;
|
}
|
}
|
div.innerHTML="";
|
var htm=null;
|
this.hasFilter=false;
|
var opt_tab=option.table;
|
if(opt_tab==undefined){
|
htm="<table><thhead><tr>";
|
}
|
else{
|
htm="<table ";
|
if(opt_tab.class!=undefined){
|
htm+='class="'+opt_tab.class+'" ';
|
}
|
if(opt_tab.style!=undefined){
|
htm+='style="'+opt_tab.style+'" ';
|
}
|
htm+="><thead><tr>";
|
}
|
var hd=option.columns;
|
this.columns=[];
|
var flt=false;
|
for(var i=0;i<hd.length;i++){
|
var cl=new zColumns(hd[i],i);
|
this.columns.push(cl);
|
htm+=cl.toHtml();
|
flt|=hd[i].filter!=undefined;
|
}
|
htm+="</tr>";
|
if(flt){
|
htm+="<tr>";
|
for(var i=0;i<this.columns.length;i++){
|
var col=this.columns[i];
|
if(col.info.filter==undefined){
|
htm+="<th style='background-color:gray;height:28px'></th>";
|
}
|
else{
|
htm+="<th ";
|
if(col.info.filter.class!=undefined){
|
htm+='class="'+col.info.filter.class+'" ';
|
}
|
if(col.info.filter.style!=undefined){
|
htm+='style="'+col.info.filter.style+'" ';
|
}
|
if(col.info.filter.enable==true){
|
htm+=' nowrap="nowrap" contentEditable="true" data-idx="'+i+'"></th>';
|
}
|
else{
|
htm+='></th>';
|
}
|
}
|
}
|
}
|
htm+="</hr></thead><tbody></tbody></table>";
|
div.innerHTML=htm;
|
if(flt){
|
for(var i=0;i<this.columns.length;i++){
|
if(this.columns[i].info.filter!=undefined){
|
if(this.columns[i].info.filter.enable==true){
|
var d= div.children[0].children[0].children[1].children[i];
|
var _this=this;
|
d.onkeydown=function(event){
|
var self=_this;
|
return self.onchange(event,true);
|
}
|
d.onblur=function(event){
|
var self=_this;
|
self.onchange(event,false);
|
}
|
}
|
}
|
}
|
}
|
this.z_b=div.children[0].children[1];
|
if(this.roll!=null && this.roll!=undefined && this.roll.interval>0){
|
this.rollToNext();
|
}
|
}
|
|
|
|
|
|
onfilter(){
|
var row=0;
|
var tst=this.option.table.trStyles==undefined?null:this.option.table.trStyles;
|
for(var k=0;k<this.z_b.children.length;k++){
|
var tr=this.z_b.children[k];
|
var show=true;
|
for(var i=0;i<this.columns.length;i++){
|
var col=this.columns[i];
|
if(col.filter==undefined || col.type!="value")
|
continue;
|
if(col.info.filter.param==null)
|
continue;
|
var t=tr.children[i].innerHTML;
|
if(col.filter.show!=undefined){
|
col.info.value=t;
|
show=col.filter.show(col.info);
|
if(!show)
|
break;
|
}
|
else{
|
if(t==null)
|
{
|
show=false;
|
continue;
|
}
|
show=t.indexOf(col.filter.param)>=0;
|
if(!show)
|
break;
|
}
|
}
|
if(show){
|
row++;
|
if(tst!=null){
|
if(tst.length>1){
|
var idx= (row-1)%tst.length;
|
tr.style=tst[idx];
|
}
|
|
}
|
|
}
|
tr.style.visibility=show?"visible":"collapse";
|
}
|
}
|
|
onchange(event,iskey){
|
if(event.code=="Enter" || iskey==false){
|
var idx= event.currentTarget.dataset["idx"];
|
var a=event.currentTarget.innerText;
|
if(a!=null)
|
{
|
a=a.trim();
|
if(a=="")
|
a=null;
|
}
|
this.columns[idx].info.filter.param=a;
|
this.onfilter();
|
|
return false;
|
}
|
return true;
|
}
|
|
getSelection(column){
|
var ret=[];
|
var cl=this.columns[column];
|
var i=column;
|
if(cl.type=="radio" || cl.type=="checkbox"){
|
for(var j=0;j<this.z_b.children.length;j++){
|
var kk= this.z_b.children[j];
|
if(kk.children[i].children[0].checked){
|
ret.push(kk);
|
}
|
}
|
}
|
return ret;
|
}
|
|
|
getSelectionByFilterFuction(filterFunction){
|
var result=[];
|
for(var j=0;j<this.z_b.children.length;j++){
|
var c=this.z_b.children[j];
|
var d=c.zdc;
|
var dd={ tr:c,data:d };
|
if(filterFunction(dd)){
|
result.push(dd);
|
}
|
}
|
return result;
|
}
|
|
|
addRow(data){
|
var tr=document.createElement("tr");
|
var tst=this.option.table.trStyles==undefined?null:this.option.table.trStyles;
|
if(tst!=null){
|
|
tr.style=tst[this.z_b.children.length%tst.length];
|
}
|
var islast=true;
|
for(var j=0;j<this.columns.length;j++){
|
|
//td=document.createElement("td");
|
var td= this.columns[j].createTd(data,islast);
|
if(this.columns[j].editAble){
|
td.setAttribute("contentEditable",true);
|
}
|
if(td!=null && td!=undefined){
|
td.owner_column=this.columns[j];
|
tr.appendChild(td);
|
}
|
}
|
tr.zdc=data;
|
this.z_b.appendChild(tr);
|
}
|
|
}
|
|
|
|
function createTable(div,option){
|
|
return new zTable(div,option);
|
}
|
}
|
