表格、可编辑下拉框、日历控件
2010-03-25 08:55
288 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<STYLE type=text/css>
</STYLE>
<script type="text/javascript" src='jquery-1.4.2.js'></script>
<script>
var isIE = (document.all) ? true : false;
var isIE6 = isIE && ([/MSIE (/d)/.0/i.exec(navigator.userAgent)][0][1] >= 6);
isIE6 && document.execCommand("BackgroundImageCache", false, true);
function addListener(element, e, fn){
element.addEventListener ? element.addEventListener(e, fn, false) : element.attachEvent("on" + e, fn)
};
function removeListener(element, e, fn){
element.removeEventListener ? element.removeEventListener(e, fn, false) : element.detachEvent("on" + e, fn)
};
var $d = function(id,p){
p?p:p=document
return "string" == typeof id ? p.getElementById(id) : id;
};
var $n = function(e,p){
p=(p?p:document)
return p.getElementsByTagName(e);
}
var Extend = function(destination, source){
for (var property in source) {
destination[property] = source[property];
}
}
var Bind = function(object, fun, args){
return function(){
return fun.apply(object, args || []);
}
}
function getpos(e,p){
var s='offset'+(p?p:'Left')
var l=e[s];while(e=e.offsetParent)l+=e[s];return l
}
var $c=function(e, p, fn){
var d=p?((p.nodeType==9)?p:p.document):document
var element = d.createElement(e);
fn && fn(element);
p && (p.nodeType==1)&& p.appendChild(element);
return element;
}
function css(selector,p,v,newflag){
var c=document.styleSheets[0]
if(c.readOnly) return
for (var j = 0; j < c.rules.length; j++) {
if(c.rules[j].selectorText==selector){
c.rules[j].style[p] = v
newflag=false
break;
}
}
newflag&& c.addRule(selector, 'width:')&& (c.rules[c.rules.length - 1].style[p] = v)
}
var Class = function(properties){
var _class = function(){
return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;
};
_class.prototype = properties;
return _class;
};
function createlist(lis,ariseul,ariseli,p){
var table = $c("ul",p);
ariseul && ariseul(table);
if(lis instanceof Array){
for(var j=1;j<lis.length;j++){
var td = $c("li",p)
if ( lis[j] instanceof Array) {
td.innerHTML='<span>'+lis[j][0]+'</span>'
td.appendChild(createul(lis[j], ariseul, ariseli, p))
}
else td.innerHTML ='<span>'+ lis[j]+'</span>'
ariseli && ariseli(j, td);
table.appendChild(td)
}
}else for (var j = 0; j < lis; j++) {var td = $c("li",p);ariseli && ariseli(j,td);table.appendChild(td);}
return table;
}
function createtab(tri, tdi, arisetab,arisecol,arisetr, arisetd, p){
tdi++;tri++;
var table = $c("table",p);
arisetab && arisetab(table);
for (var j = 0; j < tdi; j++) {var td = $c("colgroup",p);arisecol && arisecol(j,td);table.appendChild(td);}
var tbody = $c("tbody",p)
for (var i = 0; i < tri; i++) {
var tr = $c("tr",p);
arisetr && arisetr(i, tr);
for (var j = 0; j < tdi; j++) {
var td =(i==0||j==0)?$c("th",p):$c("td",p);
arisetd && arisetd(i, j, td);
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
return table;
}
var datagrid=new Class({
options: {
tablecss:'background:#ff00ff;font-size:14px',
trevencss:'background:#00f00f',
troddcss:'background:#ffffff',
trselectcss:'background:#00B2E6',
inputcss:'background:#fd50ec',
titlecss:"background:#98B2E6;filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#98B2E6', gradientType='0')",
titleovercss:"background:#00B2E6;filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#00B2E6', gradientType='0')",
oninit: function(){
}
},
initialize: function(container,rows,cols,options){
this.container = container;
this.table=createtab(rows,cols,
function(t){with(t){className='datagrid';cellSpacing=1;cellPadding=0;border=0}},
function(i,tc){if(i==0){tc.style.width='30px'}else{tc.className='td';tc.type='text'}},
null,
function(i,j,td){
if(td.tagName=='TH'){if(i==0&&j!=0){var sp=$c('span');td.innerHTML="<div style='float:left'>A"+j+'</div>';td.appendChild(sp)}else{if(i!=0)td.innerText=i}}
}
)
this.container.appendChild(this.table)
this.type='datagrid'
this.dele=null
this.b=false
datepicker()
addListener(odatepicker.input,'keydown',Bind(this,this.telekeydown))
this.tele=null
Extend(this.options, options);
this.teleinput=document.createElement("input")
this.telecheck=document.createElement("input")
this.telecombo=new editcombo()
addListener(this.telecombo.input,'keydown',Bind(this,this.telekeydown))
css('.datagrid','cssText',"table-layout:fixed;"+this.options.tablecss,true)
var ftd=this.table.cells[0].offsetHeight
css('.datagrid INPUT','cssText',"margin:0;border-Width:0;"+this.options.inputcss,true)
css('.datagrid TR','cssText',this.options.troddcss,true)
css('.datagrid .treven','cssText',this.options.trevencss,true)
css('.datagrid .select','cssText',this.options.trselectcss,true)
css('.datagrid TH','cssText','cursor:default;height:'+(ftd+4)+';'+this.options.titlecss,true)
css('.datagrid TH:hover','cssText',this.options.titleovercss,true)
css('.datagrid .td','cssText','overflow: hidden; text-overflow: ellipsis; white-space: nowrap;padding-left:1px;'+this.options.tdcss,true)
css('.datagrid SPAN','cssText','width:0px;margin-top:3px;border:1px inset;float:right;cursor:e-resize;',true)
css('.datagrid SPAN','height',this.table.cells[0].offsetHeight-14)
css('.datagrid INPUT','fontSize',ftd-4)
$('tr:even',this.table).attr('className','treven')
addListener(this.teleinput,'blur',Bind(this,this.teleblur))
addListener(this.teleinput,'keydown',Bind(this,this.telekeydown))
addListener(this.telecheck,'blur',Bind(this,this.teleblur))
for(var i=0;i<this.table.cells.length;i++) if(i==0||i>=cols+1)addListener(this.table.cells[i],'click',Bind(this,this.tdclick,[this.table.cells[i]]))
for(var i=0;i<this.table.rows.length;i++)addListener(this.table.rows[i].cells[0],'contextmenu',Bind(this,this.rightclick,[this.table.rows[i].cells[0]]))
var eec=this.table.rows[0].cells
for(var i=1;i<eec.length;i++){
var ee=eec[i].children[1]
addListener(ee,'mousedown',Bind(this,this.MouseDownToResize,[ee]))
addListener(ee,'mouseup',Bind(this,this.MouseUpToResize,[ee]))
addListener(ee,'mousemove',Bind(this,this.MouseMoveToResize,[ee]))
addListener(ee.previousSibling,'click',Bind(this,this.tdclick,[eec[i]]))
addListener(ee.previousSibling,'contextmenu',Bind(this,this.rightclick,[eec[i]]))
ee.previousSibling.style.width=ee.parentElement.offsetWidth-8
}
this.col(3).type='combo'
this.col(3).combolist=';combo;rrr;eee;www'
this.col(1).type='date'
},
rightclick:function(o){
this.popupobject=o
var i=o.cellIndex
if(!i && !this.rowpopup){this.rowpopup=new popupmenu(['','删除选中行','插入行','全选','取消选中行','隐藏选中行','取消隐藏行'],function(i,li){
},this.menuclick);this.rowpopup.parent=this}
if(i && !this.cellpopup){this.cellpopup=new popupmenu(['','隐藏列','取消隐藏列',['二级子菜单','子菜单一','子菜单二'],'其它'],function(i,li){
},this.menuclick);this.cellpopup.parent=this}
i?this.cellpopup.Show(event.x,event.y): this.rowpopup.Show(event.x,event.y)
return false},
combochange:function(){
this.dele.innerText=this.telecombo.options[this.telecombo.selectedIndex].text
},
menuclick:function(omenu,menuid){
var self= this.parent
switch(omenu.innerText){
case '全选':
$('tr',self.table).attr('className','select')
break;
case '取消选中行':
$('tr',self.table).attr('className','')
$('tr:even',self.table).attr('className','treven')
break;
case '插入行':
var i=self.popupobject.parentElement.rowIndex
if(i==0)i=1
self.table.insertRow(i)
var tr=self.table.rows[i]
var t=$c('th')
addListener(t,'click',Bind(self,self.tdclick,[t]))
addListener(t,'contextme
10e57
nu',Bind(self,self.rightclick,[t]))
tr.appendChild(t)
var j=self.table.rows[0].cells.length
for(j=1;j<self.table.rows[0].cells.length;j++)
{var t=$c('td');tr.appendChild(t)
addListener(t,'click',Bind(self,self.tdclick,[t]))
}
for(var i=1;i<self.table.rows.length;i++){self.table.rows[i].cells[0].innerText=i;if(self.table.rows[i].className!='select'){self.table.rows[i].className=(i%2==0)?'treven':''}}
break;
case '删除选中行':
for(var i=self.table.rows.length-1;i>0;i--){if(self.table.rows[i].className=='select')self.table.deleteRow(i)}
for(var i=1;i<self.table.rows.length;i++){self.table.rows[i].cells[0].innerText=i;if(self.table.rows[i].className!='select'){self.table.rows[i].className=(i%2==0)?'treven':''}}
break;
case '隐藏选中行':
for(var i=1;i<self.table.rows.length;i++){if(self.table.rows[i].className=='select')self.table.rows[i].style.display='none'}
break;
case '取消隐藏行':
var j=self.popupobject.parentElement.rowIndex
for(var i=j-1;i>0;i--){if(self.table.rows[i].style.display=='')break;self.table.rows[i].style.display=''}
break
case '隐藏列':
var j=self.popupobject.cellIndex
alert(self.col(j).style.display)
self.col(j).style.display='none'
break
case '取消隐藏列':
break
}
},
col:function(i){
return $n('colgroup',this.table)[i]
},
teleblur:function(){
var st=this.col(this.dele.cellIndex).type
this.b=false
switch(st){
case 'text':
this.dele.innerText=this.tele.value
break;
case 'check':
this.dele.innerText=this.tele.checked
break;
case 'combo':
this.telecombo.Close()
break;
case 'date':
odatepicker.Close()
}
},
telekeydown:function(){
var kk=event.keyCode
switch(kk)
{
case 9:
if(event.shiftKey)kk=9+1000
case 13:
case 39:
case 37:
case 38:
case 40:
this.teleblur()
setTimeout(Bind(this,this.keybackcall,[kk]), 20);
return false
break;
}
},
keybackcall:function(c){
switch(c){
case 9:
case 39:
case 13:
var e=this.dele.nextSibling
var i=this.dele.parentElement.rowIndex
if(!e)if(i<this.table.rows.length-1){e=this.table.rows[i+1].cells[1]}else e=this.table.rows[i].cells[1]
this.tdclick(e)
break
case 37:
case 1009:
var e=this.dele.previousSibling
var i=this.dele.parentElement.rowIndex
var j=e?e.cellIndex:0
e=(j<1)?((i>1)?this.table.rows[i-1].cells[this.table.rows[i-1].cells.length-1]:this.table.rows[i].cells[1]):e
this.tdclick(e)
break
case 38:
var e=this.dele
var i=this.dele.parentElement.rowIndex
var j=this.dele.cellIndex
if(i>1){e=this.table.rows[i-1].cells[j]}
this.tdclick(e)
break
case 40:
var e=this.dele
var i=this.dele.parentElement.rowIndex
var j=this.dele.cellIndex
if(i<this.table.rows.length-1){e=this.table.rows[i+1].cells[j]}
this.tdclick(e)
break
}
},
tdclick:function(p){
var j=p.cellIndex
var i=p.parentElement.rowIndex
if(i==0 || j==0){
if(i!=0){this.table.rows[i].className=((this.table.rows[i].className=='select')?((i%2==0)?'treven':''):'select')}else if(j!=0){this.col(j).className=((this.col(j).className=='select')?'':'select')}else {}
return
}
var st=this.col(j).type
if(this.b){return}
if(this.telecombo.focus){return}
if((st=='date')&&odatepicker.focus){return}
this.dele=p
//var protd=this.table.cells[j]
switch(st){
case 'combo':
if (this.col(j).combolist) this.telecombo.list(this.col(j).combolist)
this.tele=this.telecombo.container
this.telecombo.input.value=this.dele.innerText
break
case 'number':
case 'text':
this.teleinput.stype=st
this.tele=this.teleinput
this.tele.type='text'
this.tele.value=this.dele.innerText
break
case 'date':
this.tele=odatepicker.input
this.tele.value=this.dele.innerText
break;
case 'check':
this.tele=this.telecheck
var v=(this.dele.innerText=='true')?true:false
}
this.dele.innerText=''
this.dele.appendChild(this.tele)
this.tele.style.width=p.offsetWidth-((st=='combo')?0:4)
switch(st){
case 'combo':
this.telecombo.Show()
break;
case 'date':
datepicker(p)
break;
case 'check':
this.tele.checked=v
default:
this.tele.focus()
this.b=true
}
},
MouseDownToResize:function(obj){
obj.mouseDownX=event.clientX;
obj.pareneTdW=obj.parentElement.offsetWidth;
obj.pareneTableW=this.table.offsetWidth;
obj.setCapture();
},
MouseMoveToResize:function(obj){
if(!obj.mouseDownX) return false;
var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;
if(newWidth>10)
{
obj.parentElement.style.width = newWidth;
this.table.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;
if(this.tele&&this.tele.parentElement) {this.tele.style.width=this.tele.parentElement.offsetWidth-4}
obj.previousSibling.style.width=obj.parentElement.offsetWidth-4
}
},
MouseUpToResize:function(obj){
obj.releaseCapture();
obj.mouseDownX=0;
}
})
var popupmenu = new Class({
options: {
init:true,
width:'120px',
submenus:3,
menucss:"border:1px solid #CCCCCC;background-color:#e8f900;font-size:12pt",
selectcss:"background-color:#80def0;filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#80def0', gradientType='0')",
menuitemcss:"padding-top:3px;filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#ff0000', gradientType='0')"
},
initialize: function(menuarr,raiseli,raiseclick,options){
var self=this
Extend(this.options, options);
if (this.options.init) {
css('.popmenu UL', 'cssText', "list-style:none;margin:0;" +this.options.menucss, true)
css('.popmenu LI', 'cssText', "width:100%;float:left;overflow:hidden;text-overflow:clip;white-space:nowrap;"+this.options.menuitemcss, true)
css('.popmenu LI.sfhover', 'cssText', "cursor:default;"+this.options.selectcss, true)
css('.popmenu LI UL', 'cssText', "position:absolute;display:none;margin-left:-1px", true)
var s = 'LI'
for (var i = 1; i < this.options.submenus; i++) {
css('.popmenu ' + s + '.sfhover UL UL', 'display', 'none', true)
css('.popmenu ' + s + '.sfhover UL', 'display', 'block', true)
s += ' LI'
}
}
var p = new popoup(this.options);this.container=p.container;
this.Hide()
this.container.innerHTML='';
this.raiseclick=raiseclick;
p.container.className='popmenu';
with(p.container.style){position='absolute';zIndex=5}
p.container.appendChild(createul(menuarr,null,
function(i,li){
if(li.childNodes.length>1){
var v=li.childNodes[0]
with(li.childNodes[0].style){width=parseInt(self.options.width)-30;styleFloat='left';overflow='hidden';textOverflow='ellipsis';whiteSpace='nowrap'}
var v=$c('span')
v.innerText='>>'
v.style.styleFloat='right'
li.insertBefore(v,li.childNodes[1])
}
raiseli && raiseli(i,li);
}))
var e=this.container.getElementsByTagName('li')
for(var i=0;i<e.length;i++){
addListener(e[i],'mouseout',Bind(e[i],self.menuout))
addListener(e[i],'mouseover',Bind(self,self.menuover,[e[i]]))
e[i].menuid=i
}
this.popd=Bind(this,this.Hide)
},
Show:function(x,y){
with (this.container.style) {
left = x;
top = y;
display = ""
addListener(document, 'mousedown',this.popd);
}
$('li',this.container).attr('className','')
css('.popmenu UL','width',this.options.width)
css('.popmenu LI UL','left',parseInt(this.options.width))
},
Hide: function(){
var e = event.srcElement
var b = false
var v = null
if (e.tagName == 'LI') v = e
while (e = e.offsetParent) {
if (e == this.container) {
b = true;
break
}
if (!v)
if (e.tagName == 'LI')
v = e
}
if (b && v && v.disabled) v=null
if (b && v && (v.getElementsByTagName('ul').length>0)) v=null
if ((b && v)||!b) {
if (this.popd)
removeListener(document, 'mousedown', this.popd);
this.container.style.display = "none"
}
if (b && v ) {
this.raiseclick && this.raiseclick(v, v.menuid)
}
},
menuout:function(){this.className=''},
menuover:function(li){li.className='sfhover'}
})
var popoup = new Class({
options: {
width: "200px",
title: "标题",
css:'height:auto; border:1px solid #D3D3D3; position:absolute;z-index:5'
},
initialize: function(options){
this.container = $c("div", document.body);
Extend(this.options, options);
css('.pp', 'cssText', this.options.css,true)
this.title = this.options.title;
with (this.container) {
className = "pp";
style.width = this.options.width;
innerHTML = "<div style='background-color:#FF88FF'><span style='margin-left:8px'></span></div><div style='padding:7px; background-color:#FFffFF'></div>";
}
this.w = this.container.offsetWidth;
this.h = this.container.offsetHeight;
$n("span",this.container)[0].innerHTML = this.title;
},
pos: function(){
var self = this;
with (this.container) {
style.left = (document.body.offsetWidth - self.w) / 2 + "px";
style.top = (document.body.offsetHeight - self.h) / 2 + "px";
}
},
Show: function(){
this.container.style.display = "";
},
Close: function(){
this.container.style.display = "none";
}
})
odatepicker=null
var editcombo=new Class({
options: {oddcss:'background-color:#ff00ff'},
initialize: function(container,options){
this.container =container?container:$c('div')
this.type='editcombo'
this.container.style.display='none'
this.input=$c("input");
this.combo=$c("select")
this.combo.className='editcombo'
this.combo.style.position='absolute'
Extend(this.options, options);
css('.editcombo .odd', 'cssText', this.options.oddcss,true)
this.container.appendChild(this.input);
this.input.style.width='10px'
this.container.appendChild(this.combo);
this.dmousedown=Bind(this,this.comboblur)
addListener(this.combo,'change',Bind(this,this.combochange))
},
combochange:function(){
this.input.value=this.combo.options[this.combo.selectedIndex].text
},
comboblur:function(){
var e = event.srcElement
var b = false
if(e==this.combo){b=true}
if(e==this.input){b=true}
if (!b) this.Close()
},
Close:function(){
this.container.style.display='none'
this.input.style.width='10px'
removeListener(document,'mousedown',this.dmousedown)
var s=this.input.value
var oe=this.container.parentElement
if (oe) {
oe.removeChild(this.container)
oe.innerText = s
}
this.focus=false
},
Show:function(o,f){
if(o&&o!=this.container.parentElement){this.focus=false;var e=this.container.parentElement;if(e){e.removeChild(this.container);e.innerText=this.input.value}}
if(this.focus)return
if(o){this.container.style.width=='100%';this.input.value=o.innerText;o.innerHTML='';o.appendChild(this.container)}
this.container.style.display=''
this.combo.style.fontSize=this.input.currentStyle.fontSize
with(this.input.style){width=this.container.offsetWidth-20-parseInt(this.input.currentStyle.borderLeftWidth)-parseInt(this.input.currentStyle.borderRightWidth)}
with(this.combo.style){width=this.input.offsetWidth+18;left=getpos(this.input,'Left');top=getpos(this.input,'Top')-1;
clip='rect(0, '+(this.input.offsetWidth+18)+', '+this.combo.offsetHeight+', '+(this.input.offsetWidth)+')'
}
this.input.focus()
this.focus=true
if(!f)addListener(document,'mousedown',this.dmousedown)
},
list:function(s){
this.combo.options.length=0
var arr=s.split(";")
for(var i=0;i<arr.length;i++){
var op=$c('option')
op.innerText=arr[i]
this.combo.appendChild(op)
}
$('option:odd',this.combo).attr('className','odd')
}
})
function datepicker(o,options){
if (!odatepicker) {
options1={
width: "180px",
title: "",
weekDaySting:['日','一','二','三','四','五','六'],
monthSting:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
,startyear:1980,endyear:2060,
selectcss:"BACKGROUND-COLOR:#7CFC00",
cellcss:"BACKGROUND-COLOR:#ff00ff;cursor:hand;filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#80def0', gradientType='0')",
cellcss1:'BACKGROUND-COLOR:#7FFFD4',
textcss:'text-decoration:none;color: #0000ff',
backcss:'color:#ff2211;BACKGROUND-COLOR:#00d0d0',
todaycss:'COLOR:#ff00ff'
}
Extend(options1, options);
odatepicker = new popoup(options1);
odatepicker.container.innerHTML=''
var se=$c('input')
odatepicker.input=se
var curdate=new Date()
var dd=$c('div')
odatepicker.dd=dd
dd.className = 'datepicker';
odatepicker.container.appendChild(dd)
var se=$c('select')
se.style.width='50%'
for(i=0;i<12;i++) {var op=$c('option');op.innerText=odatepicker.options.monthSting[i];se.appendChild(op)}
odatepicker.month=se
odatepicker.type='date'
dd.appendChild(se)
css('.datepicker', 'cssText', odatepicker.options.backcss,true)
css('.datepicker TD', 'cssText', odatepicker.options.cellcss,true)
css('.datepicker A:hover', 'cssText', odatepicker.options.selectcss,true)
css('.datepicker A', 'cssText', odatepicker.options.textcss,true)
css('.datepicker TH', 'cssText', odatepicker.options.cellcss1,true)
css('.datepicker A.today', 'cssText', odatepicker.options.todaycss,true)
var se=$c('select')
se.style.width='50%'
for(i=odatepicker.options.startyear;i<odatepicker.options.endyear;i++) {var op=$c('option');op.innerText=i;se.appendChild(op)}
odatepicker.year=se
dd.appendChild(se)
se.focus()
odatepicker.table=createtab(6, 6,
function(tab){with (tab) {cellSpacing = 1;cellPadding = 0;border = 0};with(tab.style){width='100%';textAlign='center';tableLayout='fixed'}},
null,null,function(i,j,td){!j && i && (td.className='def')
if(i==0){td.innerText=odatepicker.options.weekDaySting[j]}else{td.innerText=''}
})
dd.appendChild(odatepicker.table)
var se=$c('div')
se.innerHTML="<button>今天</button> <button>当前</button>"
se.align='center'
dd.appendChild(se)
addListener(se.getElementsByTagName('button')[0],'click',button1)
addListener(se.getElementsByTagName('button')[1],'click',button2)
var ss=odatepicker.table.cells
for(var i=7;i<ss.length;i++){addListener(ss[i],'click',Bind(self,dayclick,[ss[i]]))}
addListener(odatepicker.year,'change',ymchange)
addListener(odatepicker.month,'change',ymchange)
odatepicker.container.style.display='none'
odatepicker.Close=Close
}
if(odatepicker.focus){odatepicker.input.focus(); return}
if(odatepicker.container.style.display==''){
removeListener(document,'mousedown',dateblur)
odatepicker.Close()
odatepicker.focus=false
return}
if(o){
with (odatepicker.container) {
style.left = getpos(o, 'Left') + "px";
style.top = getpos(o, 'Top') + o.offsetHeight + "px";
};
odatepicker.ob=o
button2()
addListener(document,'mousedown',dateblur)
odatepicker.Show()
odatepicker.focus=true
odatepicker.input.parentElement && odatepicker.input.focus()
}
function button1(){
CalendarFill(new Date())
}
function button2(){
var o=odatepicker.input.parentElement?odatepicker.input:odatepicker.ob
var s=o.value?o.value:o.innerText
var cd=s?new Date(Date.parse(s.replace(/-/g,"/"))):new Date()
CalendarFill(cd)
}
function dayclick(o){
var s=o.innerText
s=s?(odatepicker.year.options[odatepicker.year.selectedIndex].text+'-'+(odatepicker.month.selectedIndex+1)+'-'+s):''
if(s && odatepicker.input.parentElement){odatepicker.input.value=s;odatepicker.input.focus();dd.style.display='none'} else Close(s)
}
function ymchange(){
CalendarFill()
}
function dateblur(ss){
var e = event.srcElement
var b =(e==odatepicker.ob)||(e==odatepicker.input)
if(e==odatepicker.input){odatepicker.dd.style.display=odatepicker.dd.style.display?'':'none';return}
while ((e = e.offsetParent)&& !b) { b= (e == odatepicker.container)}
!b && Close()
}
function Close(s)
{
odatepicker.dd.style.display=''
odatepicker.container.style.display='none'
removeListener(document,'mousedown',dateblur)
odatepicker.focus=false
if(odatepicker.input.parentElement){s=odatepicker.input.value;odatepicker.input.parentElement.removeChild(odatepicker.input)}
if(typeof s!='undefined') if(odatepicker.ob.tagName=='INPUT') odatepicker.ob.value=s;else odatepicker.ob.innerText=s
}
function CalendarFill(currDate)
{
var b,sMonth,sYear,sWeekDay,sToday,oTable,currRow,MaxDay,iDaySn,sIndex,rowIndex,cellIndex,oSelectMonth,oSelectYear
if(!currDate){var b=true;currDate=new Date(odatepicker.year.options[odatepicker.year.selectedIndex].text,odatepicker.month.selectedIndex,1)}
sMonth=currDate.getMonth();
sYear=currDate.getYear();
sWeekDay=(new Date(sYear,sMonth,1)).getDay();
var ssdate=new Date()
var sToday=0
if((ssdate.getYear()==sYear) && (ssdate.getMonth()==sMonth)) sToday=ssdate.getDate();
iDaySn=1
oTable=odatepicker.table
MaxDay=CalendarGetMaxDay(sYear,sMonth);
oSelectYear = odatepicker.year
if (!b) {
odatepicker.month.selectedIndex = sMonth;
for (i = 0; i < oSelectYear.options.length; i++)
if (parseInt(oSelectYear.options[i].text) == sYear)
oSelectYear.selectedIndex = i;
}
for(rowIndex=1;rowIndex<=6;rowIndex++)
{
currRow = oTable.rows[rowIndex];
cellIndex=(rowIndex==1)?sWeekDay:0
for(var i=0;i<cellIndex;i++){currRow.cells[i].innerHTML=''}
currRow.style.display=(iDaySn>MaxDay&&cellIndex==0)?'none':''
for(;cellIndex<currRow.cells.length;cellIndex++)
{
currRow.cells[cellIndex].innerHTML=(iDaySn > MaxDay)?'':'<a '+((iDaySn==sToday)?'class=today ':'')+'href=javascript:void(0)>'+iDaySn+'</a>';
iDaySn++;
}
}
}
function CalendarGetMaxDay(nowYear,nowMonth)
{
var nextMonth,nextYear,currDate,nextDate,theMaxDay
nextMonth=nowMonth+1;nextYear=nowYear;
if(nextMonth>11){nextYear=nowYear+1;nextMonth=0; }
currDate=new Date(nowYear,nowMonth,1);
nextDate=new Date(nextYear,nextMonth,1);
theMaxDay=(nextDate-currDate)/(24*60*60*1000);
return theMaxDay;
}
}
</script>
</head>
<body><input onclick=datepicker(this)><div style='BACKGROUND-COLOR:#00ff00;height:20px;width:100px' onclick=combo.Show(this)></div>
<div style='BACKGROUND-COLOR:#ffff00;height:20px;width:200px' onclick=combo.Show(this)></div>
<div id='tdf' style='BACKGROUND-COLOR:#00ffff;width:750px;height:300px'></div>
<script>var combo=new editcombo();combo.list('23523;467456;423;58678;23125;fdsg');
new datagrid($d('tdf'),13,8)
</script>
</body>
</html>
<html>
<head>
<title>Untitled Document</title>
<STYLE type=text/css>
</STYLE>
<script type="text/javascript" src='jquery-1.4.2.js'></script>
<script>
var isIE = (document.all) ? true : false;
var isIE6 = isIE && ([/MSIE (/d)/.0/i.exec(navigator.userAgent)][0][1] >= 6);
isIE6 && document.execCommand("BackgroundImageCache", false, true);
function addListener(element, e, fn){
element.addEventListener ? element.addEventListener(e, fn, false) : element.attachEvent("on" + e, fn)
};
function removeListener(element, e, fn){
element.removeEventListener ? element.removeEventListener(e, fn, false) : element.detachEvent("on" + e, fn)
};
var $d = function(id,p){
p?p:p=document
return "string" == typeof id ? p.getElementById(id) : id;
};
var $n = function(e,p){
p=(p?p:document)
return p.getElementsByTagName(e);
}
var Extend = function(destination, source){
for (var property in source) {
destination[property] = source[property];
}
}
var Bind = function(object, fun, args){
return function(){
return fun.apply(object, args || []);
}
}
function getpos(e,p){
var s='offset'+(p?p:'Left')
var l=e[s];while(e=e.offsetParent)l+=e[s];return l
}
var $c=function(e, p, fn){
var d=p?((p.nodeType==9)?p:p.document):document
var element = d.createElement(e);
fn && fn(element);
p && (p.nodeType==1)&& p.appendChild(element);
return element;
}
function css(selector,p,v,newflag){
var c=document.styleSheets[0]
if(c.readOnly) return
for (var j = 0; j < c.rules.length; j++) {
if(c.rules[j].selectorText==selector){
c.rules[j].style[p] = v
newflag=false
break;
}
}
newflag&& c.addRule(selector, 'width:')&& (c.rules[c.rules.length - 1].style[p] = v)
}
var Class = function(properties){
var _class = function(){
return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;
};
_class.prototype = properties;
return _class;
};
function createlist(lis,ariseul,ariseli,p){
var table = $c("ul",p);
ariseul && ariseul(table);
if(lis instanceof Array){
for(var j=1;j<lis.length;j++){
var td = $c("li",p)
if ( lis[j] instanceof Array) {
td.innerHTML='<span>'+lis[j][0]+'</span>'
td.appendChild(createul(lis[j], ariseul, ariseli, p))
}
else td.innerHTML ='<span>'+ lis[j]+'</span>'
ariseli && ariseli(j, td);
table.appendChild(td)
}
}else for (var j = 0; j < lis; j++) {var td = $c("li",p);ariseli && ariseli(j,td);table.appendChild(td);}
return table;
}
function createtab(tri, tdi, arisetab,arisecol,arisetr, arisetd, p){
tdi++;tri++;
var table = $c("table",p);
arisetab && arisetab(table);
for (var j = 0; j < tdi; j++) {var td = $c("colgroup",p);arisecol && arisecol(j,td);table.appendChild(td);}
var tbody = $c("tbody",p)
for (var i = 0; i < tri; i++) {
var tr = $c("tr",p);
arisetr && arisetr(i, tr);
for (var j = 0; j < tdi; j++) {
var td =(i==0||j==0)?$c("th",p):$c("td",p);
arisetd && arisetd(i, j, td);
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
return table;
}
var datagrid=new Class({
options: {
tablecss:'background:#ff00ff;font-size:14px',
trevencss:'background:#00f00f',
troddcss:'background:#ffffff',
trselectcss:'background:#00B2E6',
inputcss:'background:#fd50ec',
titlecss:"background:#98B2E6;filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#98B2E6', gradientType='0')",
titleovercss:"background:#00B2E6;filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#00B2E6', gradientType='0')",
oninit: function(){
}
},
initialize: function(container,rows,cols,options){
this.container = container;
this.table=createtab(rows,cols,
function(t){with(t){className='datagrid';cellSpacing=1;cellPadding=0;border=0}},
function(i,tc){if(i==0){tc.style.width='30px'}else{tc.className='td';tc.type='text'}},
null,
function(i,j,td){
if(td.tagName=='TH'){if(i==0&&j!=0){var sp=$c('span');td.innerHTML="<div style='float:left'>A"+j+'</div>';td.appendChild(sp)}else{if(i!=0)td.innerText=i}}
}
)
this.container.appendChild(this.table)
this.type='datagrid'
this.dele=null
this.b=false
datepicker()
addListener(odatepicker.input,'keydown',Bind(this,this.telekeydown))
this.tele=null
Extend(this.options, options);
this.teleinput=document.createElement("input")
this.telecheck=document.createElement("input")
this.telecombo=new editcombo()
addListener(this.telecombo.input,'keydown',Bind(this,this.telekeydown))
css('.datagrid','cssText',"table-layout:fixed;"+this.options.tablecss,true)
var ftd=this.table.cells[0].offsetHeight
css('.datagrid INPUT','cssText',"margin:0;border-Width:0;"+this.options.inputcss,true)
css('.datagrid TR','cssText',this.options.troddcss,true)
css('.datagrid .treven','cssText',this.options.trevencss,true)
css('.datagrid .select','cssText',this.options.trselectcss,true)
css('.datagrid TH','cssText','cursor:default;height:'+(ftd+4)+';'+this.options.titlecss,true)
css('.datagrid TH:hover','cssText',this.options.titleovercss,true)
css('.datagrid .td','cssText','overflow: hidden; text-overflow: ellipsis; white-space: nowrap;padding-left:1px;'+this.options.tdcss,true)
css('.datagrid SPAN','cssText','width:0px;margin-top:3px;border:1px inset;float:right;cursor:e-resize;',true)
css('.datagrid SPAN','height',this.table.cells[0].offsetHeight-14)
css('.datagrid INPUT','fontSize',ftd-4)
$('tr:even',this.table).attr('className','treven')
addListener(this.teleinput,'blur',Bind(this,this.teleblur))
addListener(this.teleinput,'keydown',Bind(this,this.telekeydown))
addListener(this.telecheck,'blur',Bind(this,this.teleblur))
for(var i=0;i<this.table.cells.length;i++) if(i==0||i>=cols+1)addListener(this.table.cells[i],'click',Bind(this,this.tdclick,[this.table.cells[i]]))
for(var i=0;i<this.table.rows.length;i++)addListener(this.table.rows[i].cells[0],'contextmenu',Bind(this,this.rightclick,[this.table.rows[i].cells[0]]))
var eec=this.table.rows[0].cells
for(var i=1;i<eec.length;i++){
var ee=eec[i].children[1]
addListener(ee,'mousedown',Bind(this,this.MouseDownToResize,[ee]))
addListener(ee,'mouseup',Bind(this,this.MouseUpToResize,[ee]))
addListener(ee,'mousemove',Bind(this,this.MouseMoveToResize,[ee]))
addListener(ee.previousSibling,'click',Bind(this,this.tdclick,[eec[i]]))
addListener(ee.previousSibling,'contextmenu',Bind(this,this.rightclick,[eec[i]]))
ee.previousSibling.style.width=ee.parentElement.offsetWidth-8
}
this.col(3).type='combo'
this.col(3).combolist=';combo;rrr;eee;www'
this.col(1).type='date'
},
rightclick:function(o){
this.popupobject=o
var i=o.cellIndex
if(!i && !this.rowpopup){this.rowpopup=new popupmenu(['','删除选中行','插入行','全选','取消选中行','隐藏选中行','取消隐藏行'],function(i,li){
},this.menuclick);this.rowpopup.parent=this}
if(i && !this.cellpopup){this.cellpopup=new popupmenu(['','隐藏列','取消隐藏列',['二级子菜单','子菜单一','子菜单二'],'其它'],function(i,li){
},this.menuclick);this.cellpopup.parent=this}
i?this.cellpopup.Show(event.x,event.y): this.rowpopup.Show(event.x,event.y)
return false},
combochange:function(){
this.dele.innerText=this.telecombo.options[this.telecombo.selectedIndex].text
},
menuclick:function(omenu,menuid){
var self= this.parent
switch(omenu.innerText){
case '全选':
$('tr',self.table).attr('className','select')
break;
case '取消选中行':
$('tr',self.table).attr('className','')
$('tr:even',self.table).attr('className','treven')
break;
case '插入行':
var i=self.popupobject.parentElement.rowIndex
if(i==0)i=1
self.table.insertRow(i)
var tr=self.table.rows[i]
var t=$c('th')
addListener(t,'click',Bind(self,self.tdclick,[t]))
addListener(t,'contextme
10e57
nu',Bind(self,self.rightclick,[t]))
tr.appendChild(t)
var j=self.table.rows[0].cells.length
for(j=1;j<self.table.rows[0].cells.length;j++)
{var t=$c('td');tr.appendChild(t)
addListener(t,'click',Bind(self,self.tdclick,[t]))
}
for(var i=1;i<self.table.rows.length;i++){self.table.rows[i].cells[0].innerText=i;if(self.table.rows[i].className!='select'){self.table.rows[i].className=(i%2==0)?'treven':''}}
break;
case '删除选中行':
for(var i=self.table.rows.length-1;i>0;i--){if(self.table.rows[i].className=='select')self.table.deleteRow(i)}
for(var i=1;i<self.table.rows.length;i++){self.table.rows[i].cells[0].innerText=i;if(self.table.rows[i].className!='select'){self.table.rows[i].className=(i%2==0)?'treven':''}}
break;
case '隐藏选中行':
for(var i=1;i<self.table.rows.length;i++){if(self.table.rows[i].className=='select')self.table.rows[i].style.display='none'}
break;
case '取消隐藏行':
var j=self.popupobject.parentElement.rowIndex
for(var i=j-1;i>0;i--){if(self.table.rows[i].style.display=='')break;self.table.rows[i].style.display=''}
break
case '隐藏列':
var j=self.popupobject.cellIndex
alert(self.col(j).style.display)
self.col(j).style.display='none'
break
case '取消隐藏列':
break
}
},
col:function(i){
return $n('colgroup',this.table)[i]
},
teleblur:function(){
var st=this.col(this.dele.cellIndex).type
this.b=false
switch(st){
case 'text':
this.dele.innerText=this.tele.value
break;
case 'check':
this.dele.innerText=this.tele.checked
break;
case 'combo':
this.telecombo.Close()
break;
case 'date':
odatepicker.Close()
}
},
telekeydown:function(){
var kk=event.keyCode
switch(kk)
{
case 9:
if(event.shiftKey)kk=9+1000
case 13:
case 39:
case 37:
case 38:
case 40:
this.teleblur()
setTimeout(Bind(this,this.keybackcall,[kk]), 20);
return false
break;
}
},
keybackcall:function(c){
switch(c){
case 9:
case 39:
case 13:
var e=this.dele.nextSibling
var i=this.dele.parentElement.rowIndex
if(!e)if(i<this.table.rows.length-1){e=this.table.rows[i+1].cells[1]}else e=this.table.rows[i].cells[1]
this.tdclick(e)
break
case 37:
case 1009:
var e=this.dele.previousSibling
var i=this.dele.parentElement.rowIndex
var j=e?e.cellIndex:0
e=(j<1)?((i>1)?this.table.rows[i-1].cells[this.table.rows[i-1].cells.length-1]:this.table.rows[i].cells[1]):e
this.tdclick(e)
break
case 38:
var e=this.dele
var i=this.dele.parentElement.rowIndex
var j=this.dele.cellIndex
if(i>1){e=this.table.rows[i-1].cells[j]}
this.tdclick(e)
break
case 40:
var e=this.dele
var i=this.dele.parentElement.rowIndex
var j=this.dele.cellIndex
if(i<this.table.rows.length-1){e=this.table.rows[i+1].cells[j]}
this.tdclick(e)
break
}
},
tdclick:function(p){
var j=p.cellIndex
var i=p.parentElement.rowIndex
if(i==0 || j==0){
if(i!=0){this.table.rows[i].className=((this.table.rows[i].className=='select')?((i%2==0)?'treven':''):'select')}else if(j!=0){this.col(j).className=((this.col(j).className=='select')?'':'select')}else {}
return
}
var st=this.col(j).type
if(this.b){return}
if(this.telecombo.focus){return}
if((st=='date')&&odatepicker.focus){return}
this.dele=p
//var protd=this.table.cells[j]
switch(st){
case 'combo':
if (this.col(j).combolist) this.telecombo.list(this.col(j).combolist)
this.tele=this.telecombo.container
this.telecombo.input.value=this.dele.innerText
break
case 'number':
case 'text':
this.teleinput.stype=st
this.tele=this.teleinput
this.tele.type='text'
this.tele.value=this.dele.innerText
break
case 'date':
this.tele=odatepicker.input
this.tele.value=this.dele.innerText
break;
case 'check':
this.tele=this.telecheck
var v=(this.dele.innerText=='true')?true:false
}
this.dele.innerText=''
this.dele.appendChild(this.tele)
this.tele.style.width=p.offsetWidth-((st=='combo')?0:4)
switch(st){
case 'combo':
this.telecombo.Show()
break;
case 'date':
datepicker(p)
break;
case 'check':
this.tele.checked=v
default:
this.tele.focus()
this.b=true
}
},
MouseDownToResize:function(obj){
obj.mouseDownX=event.clientX;
obj.pareneTdW=obj.parentElement.offsetWidth;
obj.pareneTableW=this.table.offsetWidth;
obj.setCapture();
},
MouseMoveToResize:function(obj){
if(!obj.mouseDownX) return false;
var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;
if(newWidth>10)
{
obj.parentElement.style.width = newWidth;
this.table.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;
if(this.tele&&this.tele.parentElement) {this.tele.style.width=this.tele.parentElement.offsetWidth-4}
obj.previousSibling.style.width=obj.parentElement.offsetWidth-4
}
},
MouseUpToResize:function(obj){
obj.releaseCapture();
obj.mouseDownX=0;
}
})
var popupmenu = new Class({
options: {
init:true,
width:'120px',
submenus:3,
menucss:"border:1px solid #CCCCCC;background-color:#e8f900;font-size:12pt",
selectcss:"background-color:#80def0;filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#80def0', gradientType='0')",
menuitemcss:"padding-top:3px;filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#ff0000', gradientType='0')"
},
initialize: function(menuarr,raiseli,raiseclick,options){
var self=this
Extend(this.options, options);
if (this.options.init) {
css('.popmenu UL', 'cssText', "list-style:none;margin:0;" +this.options.menucss, true)
css('.popmenu LI', 'cssText', "width:100%;float:left;overflow:hidden;text-overflow:clip;white-space:nowrap;"+this.options.menuitemcss, true)
css('.popmenu LI.sfhover', 'cssText', "cursor:default;"+this.options.selectcss, true)
css('.popmenu LI UL', 'cssText', "position:absolute;display:none;margin-left:-1px", true)
var s = 'LI'
for (var i = 1; i < this.options.submenus; i++) {
css('.popmenu ' + s + '.sfhover UL UL', 'display', 'none', true)
css('.popmenu ' + s + '.sfhover UL', 'display', 'block', true)
s += ' LI'
}
}
var p = new popoup(this.options);this.container=p.container;
this.Hide()
this.container.innerHTML='';
this.raiseclick=raiseclick;
p.container.className='popmenu';
with(p.container.style){position='absolute';zIndex=5}
p.container.appendChild(createul(menuarr,null,
function(i,li){
if(li.childNodes.length>1){
var v=li.childNodes[0]
with(li.childNodes[0].style){width=parseInt(self.options.width)-30;styleFloat='left';overflow='hidden';textOverflow='ellipsis';whiteSpace='nowrap'}
var v=$c('span')
v.innerText='>>'
v.style.styleFloat='right'
li.insertBefore(v,li.childNodes[1])
}
raiseli && raiseli(i,li);
}))
var e=this.container.getElementsByTagName('li')
for(var i=0;i<e.length;i++){
addListener(e[i],'mouseout',Bind(e[i],self.menuout))
addListener(e[i],'mouseover',Bind(self,self.menuover,[e[i]]))
e[i].menuid=i
}
this.popd=Bind(this,this.Hide)
},
Show:function(x,y){
with (this.container.style) {
left = x;
top = y;
display = ""
addListener(document, 'mousedown',this.popd);
}
$('li',this.container).attr('className','')
css('.popmenu UL','width',this.options.width)
css('.popmenu LI UL','left',parseInt(this.options.width))
},
Hide: function(){
var e = event.srcElement
var b = false
var v = null
if (e.tagName == 'LI') v = e
while (e = e.offsetParent) {
if (e == this.container) {
b = true;
break
}
if (!v)
if (e.tagName == 'LI')
v = e
}
if (b && v && v.disabled) v=null
if (b && v && (v.getElementsByTagName('ul').length>0)) v=null
if ((b && v)||!b) {
if (this.popd)
removeListener(document, 'mousedown', this.popd);
this.container.style.display = "none"
}
if (b && v ) {
this.raiseclick && this.raiseclick(v, v.menuid)
}
},
menuout:function(){this.className=''},
menuover:function(li){li.className='sfhover'}
})
var popoup = new Class({
options: {
width: "200px",
title: "标题",
css:'height:auto; border:1px solid #D3D3D3; position:absolute;z-index:5'
},
initialize: function(options){
this.container = $c("div", document.body);
Extend(this.options, options);
css('.pp', 'cssText', this.options.css,true)
this.title = this.options.title;
with (this.container) {
className = "pp";
style.width = this.options.width;
innerHTML = "<div style='background-color:#FF88FF'><span style='margin-left:8px'></span></div><div style='padding:7px; background-color:#FFffFF'></div>";
}
this.w = this.container.offsetWidth;
this.h = this.container.offsetHeight;
$n("span",this.container)[0].innerHTML = this.title;
},
pos: function(){
var self = this;
with (this.container) {
style.left = (document.body.offsetWidth - self.w) / 2 + "px";
style.top = (document.body.offsetHeight - self.h) / 2 + "px";
}
},
Show: function(){
this.container.style.display = "";
},
Close: function(){
this.container.style.display = "none";
}
})
odatepicker=null
var editcombo=new Class({
options: {oddcss:'background-color:#ff00ff'},
initialize: function(container,options){
this.container =container?container:$c('div')
this.type='editcombo'
this.container.style.display='none'
this.input=$c("input");
this.combo=$c("select")
this.combo.className='editcombo'
this.combo.style.position='absolute'
Extend(this.options, options);
css('.editcombo .odd', 'cssText', this.options.oddcss,true)
this.container.appendChild(this.input);
this.input.style.width='10px'
this.container.appendChild(this.combo);
this.dmousedown=Bind(this,this.comboblur)
addListener(this.combo,'change',Bind(this,this.combochange))
},
combochange:function(){
this.input.value=this.combo.options[this.combo.selectedIndex].text
},
comboblur:function(){
var e = event.srcElement
var b = false
if(e==this.combo){b=true}
if(e==this.input){b=true}
if (!b) this.Close()
},
Close:function(){
this.container.style.display='none'
this.input.style.width='10px'
removeListener(document,'mousedown',this.dmousedown)
var s=this.input.value
var oe=this.container.parentElement
if (oe) {
oe.removeChild(this.container)
oe.innerText = s
}
this.focus=false
},
Show:function(o,f){
if(o&&o!=this.container.parentElement){this.focus=false;var e=this.container.parentElement;if(e){e.removeChild(this.container);e.innerText=this.input.value}}
if(this.focus)return
if(o){this.container.style.width=='100%';this.input.value=o.innerText;o.innerHTML='';o.appendChild(this.container)}
this.container.style.display=''
this.combo.style.fontSize=this.input.currentStyle.fontSize
with(this.input.style){width=this.container.offsetWidth-20-parseInt(this.input.currentStyle.borderLeftWidth)-parseInt(this.input.currentStyle.borderRightWidth)}
with(this.combo.style){width=this.input.offsetWidth+18;left=getpos(this.input,'Left');top=getpos(this.input,'Top')-1;
clip='rect(0, '+(this.input.offsetWidth+18)+', '+this.combo.offsetHeight+', '+(this.input.offsetWidth)+')'
}
this.input.focus()
this.focus=true
if(!f)addListener(document,'mousedown',this.dmousedown)
},
list:function(s){
this.combo.options.length=0
var arr=s.split(";")
for(var i=0;i<arr.length;i++){
var op=$c('option')
op.innerText=arr[i]
this.combo.appendChild(op)
}
$('option:odd',this.combo).attr('className','odd')
}
})
function datepicker(o,options){
if (!odatepicker) {
options1={
width: "180px",
title: "",
weekDaySting:['日','一','二','三','四','五','六'],
monthSting:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
,startyear:1980,endyear:2060,
selectcss:"BACKGROUND-COLOR:#7CFC00",
cellcss:"BACKGROUND-COLOR:#ff00ff;cursor:hand;filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#80def0', gradientType='0')",
cellcss1:'BACKGROUND-COLOR:#7FFFD4',
textcss:'text-decoration:none;color: #0000ff',
backcss:'color:#ff2211;BACKGROUND-COLOR:#00d0d0',
todaycss:'COLOR:#ff00ff'
}
Extend(options1, options);
odatepicker = new popoup(options1);
odatepicker.container.innerHTML=''
var se=$c('input')
odatepicker.input=se
var curdate=new Date()
var dd=$c('div')
odatepicker.dd=dd
dd.className = 'datepicker';
odatepicker.container.appendChild(dd)
var se=$c('select')
se.style.width='50%'
for(i=0;i<12;i++) {var op=$c('option');op.innerText=odatepicker.options.monthSting[i];se.appendChild(op)}
odatepicker.month=se
odatepicker.type='date'
dd.appendChild(se)
css('.datepicker', 'cssText', odatepicker.options.backcss,true)
css('.datepicker TD', 'cssText', odatepicker.options.cellcss,true)
css('.datepicker A:hover', 'cssText', odatepicker.options.selectcss,true)
css('.datepicker A', 'cssText', odatepicker.options.textcss,true)
css('.datepicker TH', 'cssText', odatepicker.options.cellcss1,true)
css('.datepicker A.today', 'cssText', odatepicker.options.todaycss,true)
var se=$c('select')
se.style.width='50%'
for(i=odatepicker.options.startyear;i<odatepicker.options.endyear;i++) {var op=$c('option');op.innerText=i;se.appendChild(op)}
odatepicker.year=se
dd.appendChild(se)
se.focus()
odatepicker.table=createtab(6, 6,
function(tab){with (tab) {cellSpacing = 1;cellPadding = 0;border = 0};with(tab.style){width='100%';textAlign='center';tableLayout='fixed'}},
null,null,function(i,j,td){!j && i && (td.className='def')
if(i==0){td.innerText=odatepicker.options.weekDaySting[j]}else{td.innerText=''}
})
dd.appendChild(odatepicker.table)
var se=$c('div')
se.innerHTML="<button>今天</button> <button>当前</button>"
se.align='center'
dd.appendChild(se)
addListener(se.getElementsByTagName('button')[0],'click',button1)
addListener(se.getElementsByTagName('button')[1],'click',button2)
var ss=odatepicker.table.cells
for(var i=7;i<ss.length;i++){addListener(ss[i],'click',Bind(self,dayclick,[ss[i]]))}
addListener(odatepicker.year,'change',ymchange)
addListener(odatepicker.month,'change',ymchange)
odatepicker.container.style.display='none'
odatepicker.Close=Close
}
if(odatepicker.focus){odatepicker.input.focus(); return}
if(odatepicker.container.style.display==''){
removeListener(document,'mousedown',dateblur)
odatepicker.Close()
odatepicker.focus=false
return}
if(o){
with (odatepicker.container) {
style.left = getpos(o, 'Left') + "px";
style.top = getpos(o, 'Top') + o.offsetHeight + "px";
};
odatepicker.ob=o
button2()
addListener(document,'mousedown',dateblur)
odatepicker.Show()
odatepicker.focus=true
odatepicker.input.parentElement && odatepicker.input.focus()
}
function button1(){
CalendarFill(new Date())
}
function button2(){
var o=odatepicker.input.parentElement?odatepicker.input:odatepicker.ob
var s=o.value?o.value:o.innerText
var cd=s?new Date(Date.parse(s.replace(/-/g,"/"))):new Date()
CalendarFill(cd)
}
function dayclick(o){
var s=o.innerText
s=s?(odatepicker.year.options[odatepicker.year.selectedIndex].text+'-'+(odatepicker.month.selectedIndex+1)+'-'+s):''
if(s && odatepicker.input.parentElement){odatepicker.input.value=s;odatepicker.input.focus();dd.style.display='none'} else Close(s)
}
function ymchange(){
CalendarFill()
}
function dateblur(ss){
var e = event.srcElement
var b =(e==odatepicker.ob)||(e==odatepicker.input)
if(e==odatepicker.input){odatepicker.dd.style.display=odatepicker.dd.style.display?'':'none';return}
while ((e = e.offsetParent)&& !b) { b= (e == odatepicker.container)}
!b && Close()
}
function Close(s)
{
odatepicker.dd.style.display=''
odatepicker.container.style.display='none'
removeListener(document,'mousedown',dateblur)
odatepicker.focus=false
if(odatepicker.input.parentElement){s=odatepicker.input.value;odatepicker.input.parentElement.removeChild(odatepicker.input)}
if(typeof s!='undefined') if(odatepicker.ob.tagName=='INPUT') odatepicker.ob.value=s;else odatepicker.ob.innerText=s
}
function CalendarFill(currDate)
{
var b,sMonth,sYear,sWeekDay,sToday,oTable,currRow,MaxDay,iDaySn,sIndex,rowIndex,cellIndex,oSelectMonth,oSelectYear
if(!currDate){var b=true;currDate=new Date(odatepicker.year.options[odatepicker.year.selectedIndex].text,odatepicker.month.selectedIndex,1)}
sMonth=currDate.getMonth();
sYear=currDate.getYear();
sWeekDay=(new Date(sYear,sMonth,1)).getDay();
var ssdate=new Date()
var sToday=0
if((ssdate.getYear()==sYear) && (ssdate.getMonth()==sMonth)) sToday=ssdate.getDate();
iDaySn=1
oTable=odatepicker.table
MaxDay=CalendarGetMaxDay(sYear,sMonth);
oSelectYear = odatepicker.year
if (!b) {
odatepicker.month.selectedIndex = sMonth;
for (i = 0; i < oSelectYear.options.length; i++)
if (parseInt(oSelectYear.options[i].text) == sYear)
oSelectYear.selectedIndex = i;
}
for(rowIndex=1;rowIndex<=6;rowIndex++)
{
currRow = oTable.rows[rowIndex];
cellIndex=(rowIndex==1)?sWeekDay:0
for(var i=0;i<cellIndex;i++){currRow.cells[i].innerHTML=''}
currRow.style.display=(iDaySn>MaxDay&&cellIndex==0)?'none':''
for(;cellIndex<currRow.cells.length;cellIndex++)
{
currRow.cells[cellIndex].innerHTML=(iDaySn > MaxDay)?'':'<a '+((iDaySn==sToday)?'class=today ':'')+'href=javascript:void(0)>'+iDaySn+'</a>';
iDaySn++;
}
}
}
function CalendarGetMaxDay(nowYear,nowMonth)
{
var nextMonth,nextYear,currDate,nextDate,theMaxDay
nextMonth=nowMonth+1;nextYear=nowYear;
if(nextMonth>11){nextYear=nowYear+1;nextMonth=0; }
currDate=new Date(nowYear,nowMonth,1);
nextDate=new Date(nextYear,nextMonth,1);
theMaxDay=(nextDate-currDate)/(24*60*60*1000);
return theMaxDay;
}
}
</script>
</head>
<body><input onclick=datepicker(this)><div style='BACKGROUND-COLOR:#00ff00;height:20px;width:100px' onclick=combo.Show(this)></div>
<div style='BACKGROUND-COLOR:#ffff00;height:20px;width:200px' onclick=combo.Show(this)></div>
<div id='tdf' style='BACKGROUND-COLOR:#00ffff;width:750px;height:300px'></div>
<script>var combo=new editcombo();combo.list('23523;467456;423;58678;23125;fdsg');
new datagrid($d('tdf'),13,8)
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用MVC的辅助方法自定义了两个控件：“可编辑的下拉框控件”和“文本框日历控件”
- 用VC++设计一个可编辑的表格控件
- EXTJS 4.2 资料 控件之Grid 行编辑绑定下拉框，并点一次触发一次事件
- 可编辑的 HTML JavaScript 表格控件 DataGrid
- 用VC++设计一个可编辑的表格控件
- 不可编辑域和日历控件域的输入
- 可编辑的 HTML JavaScript 表格控件 DataGrid
- 可编辑的 HTML JavaScript 表格控件 DataGrid II
- 做一个可编辑的表格控件
- 文本框跟随表格控件编辑
- C#学习笔记（20140911）-下拉框、日历、pannel控件的使用
- 可编辑的 HTML JavaScript 表格控件 DataGrid
- 实现一个简单可编辑的下拉框控件
- EXTJS表格编辑控件验证
- ExtJs表格控件（三）----单元格编辑与提交修改
- 可编辑的 HTML JavaScript 表格控件 DataGrid
- TableViewer表格内容编辑+下拉框可编辑
- ExtJs表格控件（三）----单元格编辑与提交修改
- 可编辑的 HTML JavaScript 表格控件 DataGrid II 选择自 jordan119 的 Blog
- jQuery控件简易日历表格