dhDataGrid Ver1.0.0发布
来源:互联网 发布:无线mesh网络qos 编辑:程序博客网 时间:2024/06/09 14:51
在原来做的一些项目里都有用到MS OFFICE的LISTVIEW控件,感觉都还不错,但由于有些机器没有安装MS OFFICE故无法正常使用该控件,最近特别抽出时间模拟了一个功能基本实现的DataGrid - dhDataGrid Ver1.0.0
dhDataGrid Ver1.0.0的组成:
1、数据显示 dhDataGrid.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="Author" content="dh20156">
<title>dhDataGrid Ver1.0.0</title>
<link rel="stylesheet" type="text/css" href="dhDataGrid.css">
</head>
<body onselectstart="return false;">
<p>dhDataGrid Ver1.0.0</p>
<p>Thank JK,Meizz and other friends.</p>
<div id="dhDataGridPanel" onkeyDown="return false;">
<div id="dhDataGridLine" style="position:absolute;left:0;top:0;height:expression(document.getElementById('dhDataGridTable').offsetHeight);color:#ff0000;z-index:99;visibility:hidden;font-size:1px;width:1px;background-color:#808080;"></div>
<table id="dhDataGridTable" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="zero" width="20"> </td>
<td class="titleTD" width="150">
test Column 1
</td>
<td class="titleTD" width="150">
ddd
</td>
<td class="titleTD" width="150">
ddd
</td>
<td class="lastCol"> </td>
</tr>
<tr>
<td width="20" class="firstCol"> </td>
<td class="dataTD">
Test data 1 aaaa fdsa fda fdsa fdsa fdsa fdsa fdsa fda fdsa fdsafdsa fdsa fdsa a
</td>
<td class="dataTD">
test data 1 bbbb
</td>
<td class="dataTD">
test data 1 dddd
</td>
<td class="lastDataTD"> </td>
</tr>
<tr>
<td width="20" class="firstCol"> </td>
<td class="dataTD">
test data 2 aaaa fdsa fda fdsa fdsa fdsa fdsa fdsa fda fdsa fdsafdsa fdsa fdsa a
</td>
<td class="dataTD">
Test data 2 bbbb
</td>
<td class="dataTD">
test data 2 dddd
</td>
<td class="lastDataTD"> </td>
</tr>
<tr>
<td width="20" class="firstCol"> </td>
<td class="dataTD">
test data 3 aaaa fdsa fda fdsa fdsa fdsa fdsa fdsa fda fdsa fdsafdsa fdsa fdsa a
</td>
<td class="dataTD">
test data 3 bbbb
</td>
<td class="dataTD">
test data 3 dddd
</td>
<td class="lastDataTD"> </td>
</tr>
<tr>
<td width="20" class="firstCol"> </td>
<td class="dataTD">
test data 4 aaaa fdsa fda fdsa fdsa fdsa fdsa fdsa fda fdsa fdsafdsa fdsa fdsa a
</td>
<td class="dataTD">
test data 4 bbbb
</td>
<td class="dataTD">
test data 4 dddd
</td>
<td class="lastDataTD"> </td>
</tr>
<tr>
<td width="20" class="firstCol"> </td>
<td class="dataTD">
test data 5 aaaa fdsa fda fdsa fdsa fdsa fdsa fdsa fda fdsa fdsafdsa fdsa fdsa a
</td>
<td class="dataTD">
test data 5 bbbb
</td>
<td class="dataTD">
test data 5 dddd
</td>
<td class="lastDataTD"> </td>
</tr>
<tr>
<td width="20" class="firstCol"> </td>
<td class="dataTD">
test data 6 aaaa fdsa fda fdsa fdsa fdsa fdsa fdsa fda fdsa fdsafdsa fdsa fdsa a
</td>
<td class="dataTD">
test data 6 bbbb
</td>
<td class="dataTD">
test data 6 dddd
</td>
<td class="lastDataTD"> </td>
</tr>
<tr>
<td width="20" class="firstCol"> </td>
<td class="dataTD">
test data 7 aaaa fdsa fda fdsa fdsa fdsa fdsa fdsa fda fdsa fdsafdsa fdsa fdsa a
</td>
<td class="dataTD">
test data 7 bbbb
</td>
<td class="dataTD">
test data 7 dddd
</td>
<td class="lastDataTD"> </td>
</tr>
<tr>
<td width="20" class="firstCol"> </td>
<td class="dataTD">
test data 8 aaaa fdsa fda fdsa fdsa fdsa fdsa fdsa fda fdsa fdsafdsa fdsa fdsa a
</td>
<td class="dataTD">
test data 8 bbbb
</td>
<td class="dataTD">
test data 8 dddd
</td>
<td class="lastDataTD"> </td>
</tr>
<tr>
<td width="20" class="firstCol"> </td>
<td class="dataTD">
test data 9 aaaa fdsa fda fdsa fdsa fdsa fdsa fdsa fda fdsa fdsafdsa fdsa fdsa a
</td>
<td class="dataTD">
test data 9 bbbb
</td>
<td class="dataTD">
test data 9 dddd
</td>
<td class="lastDataTD"> </td>
</tr>
<tr>
<td width="20" class="firstCol"> </td>
<td class="dataTD">
test data 10 aaaa fdsa fda fdsa fdsa fdsa fdsa fdsa fda fdsa fdsafdsa fdsa fdsa a
</td>
<td class="dataTD">
test data 10 bbbb
</td>
<td class="dataTD">
test data 10 dddd
</td>
<td class="lastDataTD"> </td>
</tr>
<tr>
<td width="20" class="firstCol"> </td>
<td class="dataTD">
test data 11 aaaa fdsa fda fdsa fdsa fdsa fdsa fdsa fda fdsa fdsafdsa fdsa fdsa a
</td>
<td class="dataTD">
test data 11 bbbb
</td>
<td class="dataTD">
test data 11 dddd
</td>
<td class="lastDataTD"> </td>
</tr>
<tr>
<td width="20" class="firstCol"> </td>
<td class="dataTD">
test data 12 aaaa fdsa fda fdsa fdsa fdsa fdsa fdsa fda fdsa fdsafdsa fdsa fdsa a
</td>
<td class="dataTD">
test data 12 bbbb
</td>
<td class="dataTD">
test data 12 dddd
</td>
<td class="lastDataTD"> </td>
</tr>
</table>
</div>
</body>
</html>
2、样式控制 dhDataGrid.css
td {height:16px;font-size:12px;font-family:arial;cursor:default;padding:0px 2px 0px 2px;}
#dhDataGridPanel {behavior:url(dhDataGridPanel.htc);border:2px inset;width:500px;height:180px;overflow:auto;z-index:100;}
#dhDataGridTable {width:100%;table-layout:fixed;}
.titleTD {behavior:url(dhDataGridTitle.htc);font-weight:bold;height:17px;background-color:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;top:expression(document.getElementById("dhDataGridPanel").scrollTop);}
.dataTD {border-right:1px solid buttonface;border-bottom:1px solid buttonface;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.zero {width:17px;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;position:relative;top:expression(document.getElementById("dhDataGridPanel").scrollTop);left:expression(document.getElementById("dhDataGridPanel").scrollLeft);z-index:2;}
.firstCol {width:17px;text-align:center;color:#000;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;position:relative;left:expression(document.getElementById("dhDataGridPanel").scrollLeft);}
.lastCol {background-color:buttonface;border-top:1px solid #fff;border-bottom:1px solid #404040;border-left:1px solid #fff;overflow:hidden;text-overflow:clip;white-space:nowrap;word-break:keep-all;position:relative;top:expression(document.getElementById("dhDataGridPanel").scrollTop);}
.lastDataTD {border-bottom:1px solid buttonface;padding:1px;overflow:hidden;text-overflow:clip;white-space:nowrap;}
3、功能实现 dhDataGridPanel.htc
<attach event="onmousedown" onevent="down()"/>
<attach event="onkeydown" onevent="keyDown()"/>
<script language="Javascript">
//author:dh20156;
var rl = this.children[1].rows.length;
var selectedRow = null;
//鼠标点击行事件
function down(){
var obj = event.srcElement.parentElement;
if(obj.tagName=="TR"){
if(obj.rowIndex!=0){
if(selectedRow!=null){
selectedRow.cells[0].style.background = "buttonface";
selectedRow.style.backgroundColor = "";
selectedRow.style.color = "";
}
obj.cells[0].style.background = "buttonface url('selected.gif') center center no-repeat";
obj.style.backgroundColor = "highlight";
obj.style.color = "highlighttext";
selectedRow = obj;
}
}
}
//键盘Up & Down事件
function keyDown(){
var kc = event.keyCode;
switch(kc){
case 38://Up;
if(selectedRow!=null && selectedRow.rowIndex>1){
selectedRow.cells[0].style.background = "buttonface";
selectedRow.style.backgroundColor = "";
selectedRow.style.color = "";
this.children[1].rows[selectedRow.rowIndex-1].cells[0].style.background = "buttonface url('selected.gif') center center no-repeat";
this.children[1].rows[selectedRow.rowIndex-1].style.backgroundColor = "highlight";
this.children[1].rows[selectedRow.rowIndex-1].style.color = "highlighttext";
this.children[1].parentElement.scrollTop=selectedRow.offsetHeight*(selectedRow.rowIndex-1)-selectedRow.offsetHeight;
selectedRow = this.children[1].rows[selectedRow.rowIndex-1];
};
break;
case 40://Down;
if(selectedRow!=null && selectedRow.rowIndex<rl-1){
selectedRow.cells[0].style.background = "buttonface";
selectedRow.style.backgroundColor = "";
selectedRow.style.color = "";
this.children[1].rows[selectedRow.rowIndex+1].cells[0].style.background = "buttonface url('selected.gif') center center no-repeat";
this.children[1].rows[selectedRow.rowIndex+1].style.backgroundColor = "highlight";
this.children[1].rows[selectedRow.rowIndex+1].style.color = "highlighttext";
this.children[1].parentElement.scrollTop=selectedRow.offsetHeight*(selectedRow.rowIndex+1)-selectedRow.offsetHeight;
selectedRow = this.children[1].rows[selectedRow.rowIndex+1];
};
break;
}
}
</script>
4、功能实现 dhDataGridTitle.htc
<attach event="onmousemove" onevent="move();"/>
<attach event="onmousedown" onevent="down();"/>
<attach event="onmouseup" onevent="up();"/>
<attach event="onmouseout" onevent="out();"/>
<attach event="ondblclick" onevent="reColWidth();"/>
<script language="Javascript">
//author:dh20156;
//鼠标拖动列头分隔条事件
function move(){
if(!this.mouseDownX){
if((event.offsetX>event.srcElement.offsetWidth-6 && event.offsetX<event.srcElement.offsetWidth)){
this.style.cursor='col-resize';
}else{
this.style.cursor='default';
}
return false;
}else{
this.style.cursor='col-resize';
this.newWidth = this.TdW*1+event.clientX*1-this.mouseDownX;
dhDataGridLine.style.left=this.offsetLeft+this.newWidth;
}
}
//鼠标点击列头事件
function down(flag){
if((event.offsetX>event.srcElement.offsetWidth-6 && event.offsetX<event.srcElement.offsetWidth) || flag=="resize"){
this.mouseDownX = event.clientX;
this.TdW = this.offsetWidth;
dhDataGridLine.style.visibility='visible';
dhDataGridLine.style.left=this.offsetLeft+this.TdW-1;
this.setCapture();
getMinWidth();
getMaxWidth();
}else{
this.execSort = 1;
if(this.sort==null){
this.sort = 0;
}
this.sort==1?this.sort=0:this.sort=1;
this.style.borderRight='1px solid #ffffff';
this.style.borderBottom='1px solid #ffffff';
this.style.borderLeft='1px solid #404040';
this.style.borderTop='1px solid #404040';
this.style.position='relative';
this.style.left='1px';
}
}
//鼠标点击列头后鼠标按钮弹起事件
function up(){
out();
if(this.newWidth>20){
this.style.width = this.newWidth;
}
if(this.execSort==1){
if(this.sort==0){
Asc();
}else{
Desc();
}
}
this.newWidth = 0;
this.execSort=0;
dhDataGridLine.style.visibility='hidden';
this.releaseCapture();
this.mouseDownX = 0;
}
//鼠标离开列头事件
function out(){
this.style.borderRight='1px solid #404040';
this.style.borderBottom='1px solid #404040';
this.style.borderLeft='1px solid #ffffff';
this.style.borderTop='1px solid #ffffff';
this.style.position='relative';
this.style.left='0px';
}
//获得该列最大文本宽度
function getMaxWidth(){
if(this.maxWidth==null){
var ci = this.cellIndex;
var rl = this.parentElement.parentElement.rows.length;
for(var i=0;i<rl;i++){
if(this.maxWidth==null || this.maxWidth<this.parentElement.parentElement.rows[i].cells[ci].scrollWidth){
this.maxWidth=this.parentElement.parentElement.rows[i].cells[ci].scrollWidth;
}
}
}
}
//获得初始列宽
function getMinWidth(){
if(this.minWidth==null){
this.minWidth = this.scrollWidth;
}
}
//改变列宽
function reColWidth(){
if((event.offsetX>event.srcElement.offsetWidth-6 && event.offsetX<event.srcElement.offsetWidth)){
if(this.offsetWidth==this.maxWidth){
this.style.width = this.minWidth;
}else{
this.style.width = this.maxWidth;
}
down("resize");
up();
}
}
//A-->Z 排序
function Asc(){
var rl = this.parentElement.parentElement.rows.length;
var ci = this.cellIndex;
for(var i=1;i<rl-1;i++){
for(var j=i+1;j<rl;j++){
var u = this.parentElement.parentElement.rows[i].cells[ci].innerText.toLowerCase();
var d = this.parentElement.parentElement.rows[j].cells[ci].innerText.toLowerCase();
if(u>d){
this.parentElement.parentElement.moveRow(j,i);
}
}
}
for(var c=1;c<this.parentElement.cells.length-1;c++){
this.parentElement.cells[c].style.background = "buttonface";
}
this.style.background = "buttonface url('asc.gif') right center no-repeat";
}
//Z-->A 排序
function Desc(){
var rl = this.parentElement.parentElement.rows.length;
var ci = this.cellIndex;
for(var i=1;i<rl-1;i++){
for(var j=i+1;j<rl;j++){
var u = this.parentElement.parentElement.rows[i].cells[ci].innerText.toLowerCase();
var d = this.parentElement.parentElement.rows[j].cells[ci].innerText.toLowerCase();
if(u<d){
this.parentElement.parentElement.moveRow(j,i);
}
}
}
for(var c=1;c<this.parentElement.cells.length-1;c++){
this.parentElement.cells[c].style.background = "buttonface";
}
this.style.background = "buttonface url('desc.gif') right center no-repeat";
}
</script>
5、小图标:selected.gif 、asc.gif 、desc.gif
6、实现效果:
7、测试链接:
http://www.v-ec.com/dh20156/code/dhdatagrid/dg_default.htm
- dhDataGrid Ver1.0.0发布
- dhDataGrid Ver2.0.0发布
- dhKeyBoard Ver1.0.0发布
- dhTipsLayer ver1.1发布
- RGB565调色板Ver1.0.0
- 【开源】SKY收支管理系统Ver1.0正式版 发布
- 最新dhdatagrid原型
- 东软实训01-计数器ver1
- 词法分析ver1.0
- 竞技连连看Ver1.0
- Exif文件格式描述 Ver1.4
- python-列表练习程序ver1
- BeQ通用树形控件Ver1.0Beta
- 广告图片轮显类dh_adShow Ver1.0.2
- [C语言程序设计]学习笔记总体规划ver1.1
- 冒险商人ver1.0开发文档
- python核心编程7.5答案ver1
- Android L Camera2 API sample ver1 - startPreview
- 无线数据基本术语
- 共享两个做项目最常用功能操作的封装类
- C# 2.0:使用匿名方法、迭代程序和局部类来创建优雅的代码
- 今天收到大连交通大学的校庆邀请函
- 系统设计的一些原则
- dhDataGrid Ver1.0.0发布
- 《向着夕阳,挥洒青春的泪水》系列正式开始连载! (posted by biggates)
- Oracle数据仓库的分层管理器解决方案
- 数据挖掘技术及其应用现状概述
- Python学习系列之Object and Object-Orientation
- 曹操其实是个女人!?
- Python学习系列之异常和文件操作
- 计划任务工具 cron 的配置和说明
- Microsoft - Lisence All in One