dhDataGrid Ver1.0.0发布

最新推荐文章于 2009-04-29 09:05:00 发布
最新推荐文章于 2009-04-29 09:05:00 发布
阅读量1.7k 收藏
点赞数
分类专栏： 技术文档 文章标签： class function null stylesheet javascript behavior
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dh20156/article/details/1008136
版权

在原来做的一些项目里都有用到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">&nbsp;</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">&nbsp;</td>
</tr>
<tr>
<td width="20" class="firstCol">&nbsp;</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">&nbsp;</td>
</tr>
<tr>
<td width="20" class="firstCol">&nbsp;</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">&nbsp;</td>
</tr>
<tr>
<td width="20" class="firstCol">&nbsp;</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">&nbsp;</td>
</tr>
<tr>
<td width="20" class="firstCol">&nbsp;</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">&nbsp;</td>
</tr>
<tr>
<td width="20" class="firstCol">&nbsp;</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">&nbsp;</td>
</tr>
<tr>
<td width="20" class="firstCol">&nbsp;</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">&nbsp;</td>
</tr>
<tr>
<td width="20" class="firstCol">&nbsp;</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">&nbsp;</td>
</tr>
<tr>
<td width="20" class="firstCol">&nbsp;</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">&nbsp;</td>
</tr>
<tr>
<td width="20" class="firstCol">&nbsp;</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">&nbsp;</td>
</tr>
<tr>
<td width="20" class="firstCol">&nbsp;</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">&nbsp;</td>
</tr>
<tr>
<td width="20" class="firstCol">&nbsp;</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">&nbsp;</td>
</tr>
<tr>
<td width="20" class="firstCol">&nbsp;</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">&nbsp;</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

dh20156
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
在DataGrid中为删除添加确认对自话框
08-18
在DataGrid中为删除添加确认对自话框
滚动的表格
学海无涯的专栏
05-28 1253
可滚动的表格/*dhdatagrid 大块样式*/#dhdatagrid {position:relative;width:500px;height:200px;background:white;margin:0px;padding:0px;overflow:hidden;border:1px inset;-moz-user-select:none;}/*dhdatagrid 表格全局样式*/#d
最新dhdatagrid原型
dh20156风之石的专栏
02-08 1162
 /*dhdatagrid 大块样式*/#dhdatagrid {position:relative;width:500px;height:200px;padding:0px;overflow:hidden;border:2px inset;}/*dhdatagrid 表格全局样式*/#dhdatagrid table {table-layout:fixed;margin:0px;}#dhda
dhDataGrid Ver2.0.0发布
dh20156风之石的专栏
02-08 2627
针对dhDataGrid的前一版本Ver1.0.0而做的更新！1、标题栏、左边边栏固定方式更新，取消expression方式；2、排序方式更新，同时支持数字、字符、日期、数字字符混合、中文汉字的排序；3、支持换肤，您可以自己定制该控件样式；4、预留[双击]、[右键]功能；5、支持IE、FF；DEMO（演示）：http://www.jxxg.com/dh20156/dhdat
javascript之dhDataGrid Ver2.0.0代码
10-30
javascript之dhDataGrid Ver2.0.0代码
dhCode
11-27
3）dhdatagrid，数据表格控件； 4）dhkeyboard，WEB软键盘，包含五笔、拼音、英文输入法； 5）dhLayer，提供IE及FF下都可以盖住FLASH，SELECT等控件的内容容器； 6）dhtabstrip，标签页控件，内置...
浏览器缩放不触发window.onresize事件的BUG
热门推荐
dh20156风之石的专栏
04-29 1万+
在帮同事处理一个页面缩放BUG的时候惊奇的发现各种浏览器的缩放不触发window.onresize的BUG，太坏了！我理解的能正常工作的浏览器有：IE6FF3以下浏览器Ctrl+和Ctrl-时均不触发window.onresize事件，只在窗口大小改变时才触发：IE8 Beta2，无论是Ctrl+，Ctrl-还是最大化最小化，拖拽改变窗口大小，都无法触发wind
可输入、自动匹配的下拉框
dh20156风之石的专栏
10-16 6508
最近做一B/S项目，客户习惯了速达里边的COMBOBOX控件的使用，输入产品编号然后自动提示匹配产品信息，为了实现这个功能想了很多办法，原本在无技可施的时候准备用ActiveX控件凑合一下算了，好在JK兄出手相助，给偶一个类似的参考，终于了解了实现的方法，不过由于那套方案无法应对一些控件的遮挡，所以还不能完全达到要求，于是偶用POPUP方法改了下，终于大功告成，可以很好的实现客户的要求了，现将源公
WEB打印经验交流
dh20156风之石的专栏
12-23 5603
WEB打印一直困扰着大家，小弟最近做一项目，稍有心得，特来跟大家交流交流。我在那个项目中是利用ScriptX.cab这个控件来解决问题的，包括各种汇总表，详细清单等等，不过最大弊端就是打印的格式是死的，你要打印出怎样的格式必须自己来做，还有就是打印分页，它是按你设置的纸张大小来分的，所以必须人为控制，我已经搞定了。ScriptX.cab大家可以到网上去DOWN一个。好了，废话不多说了，
支持IE、跨域(FRAME)的POPUP菜单栏
dh20156风之石的专栏
12-13 4344
支持IE、跨域(FRAME)的POPUP菜单栏一直研究B/S结构的东东，菜单栏一直有欠缺。原来有见过一个模仿的比较好的，不过不是POPUP方式的，不能跨域（FRAME），所以没有办法，只有继续研究。一次看到宝玉的无限级菜单雏形，研究了一下，简单改了改，实现了显示子菜单的功能，然后偶又加上了对菜单点击显示的逻辑判断，现在大概的一个比较强大的POPUP菜单栏就出来了。效果如下：以下
EasyUI API
dh20156风之石的专栏
04-15 3609
EasyUI来自DHTML精英俱乐部的简单易用功能强大的轻量级JavaScript Framework前端框架原文：http://www.v-ec.com/easyui/ EasyUI的组成EasyUI.js核心文件可扩展的附加组件EasyUI打包下载EasyUI APIeasyUI.fpbind()自执行方法,为Function.prototype添加bind方法，用
可输入、自动匹配的下拉框更新版dhCombobox
dh20156风之石的专栏
06-08 3430
全新写了一遍,全部用Array Join方式实现的类似Combobox,真心讨教更高效合理的方法.dhCombobox testfunction dhCombobox(){ //author:dh20156; var dh = this; //返回实例名 this.clsName = null; //定义目标对象 this.targetObj = null; //定义提示框属性 t
遍历XML文档返回二维数组(ASP)(更新版)
dh20156风之石的专栏
05-12 3031
   问题没处理   xmlfile = Server.MapPath("???.xml")   Set xml = Server.CreateObject("MSXML.DOMDocument")   xml.async = false   xml.load(xmlfile)Public Function PrettyPrint(node,tabLevel)on error resume
AJAX+POPUP+数据库,实现动态无限级栏目BETA
dh20156风之石的专栏
07-09 2951
为了减轻未来开发压力及缩短开发周期， 贴出最近研究模块化开发中的一点积累。这是一个无限级的栏目模块，使用到了数据库，ASP，JSON数据类型转换，AJAX加载栏目，无限级POPUP显示等技术手段。现在贴出该实例的所有组成要素：1、数据库（本例用数据库为ACCESS2000）2、服务器端加载栏目(文件保存为UTF8格式)getMenu.aspdim menuidm
JS版数字转中文货币金额大写
dh20156风之石的专栏
04-07 2903
在CSDN回复的一个帖子！JS里将数字转换为中文的货币大写模式！function i2c(n){ if(typeof(n) == "number"){  if(-1 == n.toString().indexOf(".")){   return seti2c(n);  }else{   var i,istr,f,fstr,a,rstr;   a = n.toString().split("."
汉字与unicode字符互相转换处理乱码
dh20156风之石的专栏
04-07 2857
汉字与unicode字符转换//unicode to chinesevar s = "&#20013";var s = s.substr(2);//去掉&#document.write(String.fromCharCode(parseInt(s,10)));//从Unicode字符值中返回一个字符串a = "沈阳a,b,c."b = a.replace(/&#x/

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值