javascript之之dhDataGrid Ver2.0.0代码代码
针对dhDataGrid的前一版本Ver1.0.0而做的更新!
1、标题栏、左边边栏固定方式更新,取消expression方式;
2、排序方式更新,同时支持数字、字符、日期、数字字符混合、中文汉字的排序;
3、支持换肤,您可以自己定制该控件样式;
4、预留[双击]、[右键]功能;
5、支持IE、FF;
CSS:
/*dhdatagrid 大块样式*/
#dhdatagrid {position:relative;width:500px;height:200px;background:white;margin:0px;padding:0px;overflow:hidden;border:1px inset;-moz-user-select:none;}
/*dhdatagrid 表格全局样式*/
#dhdatagrid table {table-layout:fixed;margin:0px;}
#dhdatagrid table td {height:18px;cursor:default;font-size:12px;font-family:verdana;overflow:hidden;white-space:nowrap;text-indent:2px;border-right:1px solid buttonface;border-
bottom:1px solid buttonface;}
#dhdatagrid table td .arrow {font-size:8px;color:#808080;}
#dhdatagrid table .lastdata {border-right:none;}
#dhdatagrid table .column {width:120px;cursor:default;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;}
#dhdatagrid table .over {width:120px;cursor:default;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;}
#dhdatagrid table .sortdown {width:120px;cursor:default;background:buttonface;border-right:1px solid #ffffff;border-bottom:1px solid #ffffff;border-left:1px solid #404040;border-
top:1px solid #404040;position:relative;left:1px;}
#dhdatagrid table .dataover {background:#FAFAFA;}
#dhdatagrid table .firstcolumn {width:30px;text-indent:0px;text-align:center;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-
left:1px solid #fff;}
#dhdatagrid table .lastcolumn {background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;}
/*dhdatagrid 选定行样式*/
#dhdatagrid table .selectedrow {background:highlight;color:white;}
/*dhdatagrid 表头样式*/
#dhdatagrid #titlecolumn {width:100%;position:absolute;top:0px;left:0px;z-index:3;}
/*dhdatagrid 左边栏样式*/
#dhdatagrid #slidecolumn {width:30px;position:absolute;top:0px;left:0px;z-index:2;}
#dhdatagrid #slidecolumn td {width:30px;text-indent:0px;text-align:center;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-
left:1px solid #fff;}
/*dhdatagrid 内容表体样式*/
#dhdatagrid #datacolumn {width:100%;position:absolute;top:0px;left:0px;}
/*dhdatagrid 原点样式*/
#dhdatagrid #zero {width:30px;height:18px;margin:0px;padding:0px;position:absolute;top:0px;left:0px;z-index:10;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-
bottom:1px solid #404040;border-left:1px solid #fff;text-align:center;font-size:10px;color:#A19F92;}
JS:
function dhdatagrid(){
//author:dh20156;
this.callname = “dhdg”;
this.width = 500;
this.height = 200;
this.rid = “dhdatagrid”;
this.columns = [];
this.data = [];
this.dblclick_fun = function(){}
this.contextmenu_fun = function(){}
this.parentNode = document.body;
var dh = this;
var framediv = null;
var zerobj = null;
var leftobj = null;
var titleobj = null;
var dataobj = null;
var hbar = null;
var vbar = null;
var bgbar = null;
//改变列宽初始位置
var ml = 0;
//改变列宽对象初始宽度
var ow = 0;
//改变列宽对象
var tdobj = null;
//当前选定行索引
var nowrow = null;
//是否更改垂直滚动条位置
var changeposv = true;
this.init = function(){
//init the data 初始数据
var dgc = “”;
if(this.columns.length>0){
dgc = “<tr><td class=\”firstcolumn\”> </td>”;
for(var cc=0;cc<this.columns.length;cc++){
dgc += “<td class=\”column\” onmouseover=\””+this.callname+”.over(this);\” onmouseout=\””+this.callname+”.out(this);\” onmousemove=\””+this.callname+”.cc(event,this);\” onmousedown=\””+this.callname+”.rsc_d(event,this);\” onmouseup=\””+this.callname+”.mouseup(this);\”>”+this.columns[cc]+”<span class=\”arrow\”>
</span></td>”;
}
dgc += “<td class=\”lastcolumn\”> </td></tr>”;
}
var dgs = “”;
var dgd = “”;
if(this.data.length>0){
//第一列
dgs = “<tr><td> </td></tr>”;
for(var r=0;r<this.data.length;r++){
dgs += “<tr><td>”+(r+1)+”</td></tr>”;
dgd += “<tr onmouseover=\””+this.callname+”.dataover(this);\” onmouseout=\””+this.callname+”.dataout(this);\”><td class=\”firstcolumn\”> </td>”;
for(var c=0;c<this.data[r].length;c++){
dgd += “<td ondblclick=\””+this.callname+”.dblclick_fun(this);\” oncontextmenu=\””+this.callname+”.contextmenu_fun(this);\”>”+this.data[r][c]+”</td>”;
}
dgd += “<td class=\”lastdata\”> </td></tr>”;
}
if(dgc==””){
dgc = “<tr><td class=\”firstcolumn\”> </td>”;
for(var dc=0;dc<this.data[0].length;dc++){
dgc += “<td class=\”column\” onmouseover=\””+this.callname+”.over(this);\” onmouseout=\””+this.callname+”.out(this);\” onmousemove=\””+this.callname+”.cc(event,this);\” onmousedown=\””+this.callname+”.rsc_d(event,this);\” onmouseup=\””+this.callname+”.mouseup(this);\”>Expr”+
(dc+1)+”<span class=\”arrow\”></span></td>”;
}
dgc += “<td class=\”lastcolumn\”> </td></tr>”;
}
}
//dhdatagrid frame 框架
var dgframe = document.createElement(“DIV”);
dgframe.id = this.rid;
dgframe.onmousedown = function(e){e=e||window.event;getrow(e);}