javascript表格控件:Chgrid,简化型
本着自由共享的精神,把代码帖出来,同时大家也可以一起来测试以及添加新功能,请大家根据网友提出的问题,把自己修改好的版本都帖出来跟在下面,最后作为一款比较全面的表格软件。
Chgrid的简单功能介绍:
1:支持自定义排序
2:支持列宽度的拖放
3:支持自定义函数
4:支持分页
5:支持自动编号
6:多浏览器支持,支持ie6,ie7,ff,opera
7:div布局
已知问题:
1:由于使用的div布局,如果使用margin或者padding会改变定义的列宽度,所以目前文字只能居中或者靠左或靠右,不能使用padding控制位置
目前解决办法是可以在每个div里面再附加一个div,用这个div的margin属性来控制其位置。
2:内容在超出容器宽度的时候,拖动会有点小问题,。
怎样修改样式:
如果不改变风格,大家只要对如下部分代码调整就可以
Chgrid_column0{ width:20px;}
.Chgrid_column1{ width:100px;}
.Chgrid_column2{ width:80px;}
.Chgrid_column3{ width:120px;}
.Chgrid_column4{ width:100px;}
每多一列就再加一行比如.Chgrid_column5{ width:100px;}
注意:最后一列是不用定义宽度的,程序会自动调整
无标题文档
#Chgrid_container{ font:12px "宋体"; width:600px; height:100%; color:#827200;}
.Chgrid_head_row{ width:100%; border-top:1px solid #ffb517; border-bottom:1px solid #ffb517; background-color:#ffe6b3
; height:20px;}
.Chgrid_row{ width:100%; border-bottom:1px solid #ffb517; height:20px; background-color:#fff}
.Chgrid_row_interval{width:100%; border-bottom:1px solid #ffb517; height:20px; background-color:#fff2d9}
.Chgrid_row_hilight{width:100%; border-bottom:1px solid #ffb517; height:20px; background-color:#ffe6b3}
.Chgrid_column{ float:left; height:20px; overflow:hidden; line-height:20px; text-align: center;}
.Chgrid_column_sort_desc{ float:left; height:20px; overflow:hidden; line-height:20px; text-align: center;background-image:url(http://bbs.blueidea.com/attachments/2007/3/15/20070315_2402590937239704896fuxTNS4SQ9xDC.gif); background-position:right center;background-repeat:no-repeat;}
.Chgrid_column_sort_asc{ float:left; height:20px; overflow:hidden; line-height:20px; text-align: center;background-image:url(http://bbs.blueidea.com/attachments/2007/3/15/20070315_6f504cdc131612d66f08J1jtbM8fwxHJ.gif); background-position:right center;background-repeat:no-repeat;}
.Chgrid_head_split{float:left; height:20px; width:2px; background-image:url(http://bbs.blueidea.com/attachments/2007/3/15/20070315_2aedec010331a8ccc38caDdGOQhsA048.gif); background-position:center;background-repeat:no-repeat; cursor: e-resize; cursor: col-resize; }
.Chgrid_table_cell0{ float:left; height:20px; line-height:20px; overflow:hidden; text-align: center;}
.Chgrid_table_cell{ float:left; height:20px; line-height:20px; overflow:hidden; text-align: center; border-left:1px solid #ffb517;}
.Chgrid_column0{ width:20px;}
.Chgrid_column1{ width:100px;}
.Chgrid_column2{ width:80px;}
.Chgrid_column3{ width:120px;}
.Chgrid_column4{ width:100px;}
.button{ font:12px "宋体"; color:#827200; padding-left:12px; padding-right:12px; background-color:#ffe6b3; border-left:2px solid #fff;border-top:2px solid #fff;border-right:2px solid #ffb517;border-bottom:2px solid #ffb517;}
var Chgrid = {
dragobj : null,
cloneobj : null,
init : function(id,ps,minirows,show,inter,hili,sortby,columnArr,dataArr,sortable){
this.container = $(id); //容器对象,字符串
this.pageSize = ps; //分页大小,整数
this.minirows = minirows; //最少行数,整数
this.rowInterval = inter; //是否隔行,boolean值
this.hilight = hili; //是否高亮,boolean值
this.showAutoGridNum = show; //是否显示自动编号,boolean值
this.sortBy = sortby; //排序规则,0表示降序或1表示升序
this.column = columnArr; //栏目,数组
this.data = dataArr; //数据,数组
this.selectedRowIndex = 0; //当前选中行的索引,整数
this.startPage = 0; //当前分页号,整数
Chgrid.setSortAble(sortable); //确定哪些列可以排序,数组
Chgrid.drawGrid();
document.onmousemove = Chgrid.drag;
document.onmouseup = Chgrid.end;
},
setSortAble : function(){
this.sortColumn = [];
if(sortable){
this.sortColumn = sortable;
}else{
this.sortColumn[0] = false;
for(var i=0;i objNextOffsetLeft + Chgrid.cloneobj.nextSibling.offsetWidth - 2){
Chgrid.finalMouseX = objNextOffsetLeft + Chgrid.cloneobj.nextSibling.offsetWidth - 2;
}
Chgrid.dragobj.style.left = Chgrid.finalMouseX + "px";
},
end : function(e) {
if(Chgrid.cloneobj==null)return;
var obj = Chgrid.cloneobj;
obj.previousSibling.style.width = obj.previousSibling.offsetWidth + (Chgrid.finalMouseX - Chgrid.initMouseX) + "px";
obj.nextSibling.style.width = obj.nextSibling.offsetWidth - (Chgrid.finalMouseX - Chgrid.initMouseX) + "px";
Chgrid.resizeWidth(obj);
Chgrid.cloneobj = null;
Chgrid.dragobj.parentNode.removeChild(Chgrid.dragobj);
},
resizeWidth : function(obj){
var j = this.getObjectIndex(this.header,obj);
for(var i=1;ib[col] ? 1:(a[col]b[col] ? -1:0)));});
Chgrid.fillData(Chgrid.startPage);
if(Chgrid.sortBy==0)
this.className = this.className.replace(/Chgrid_column /,"Chgrid_column_sort_asc ");
else
this.className = this.className.replace(/Chgrid_column /,"Chgrid_column_sort_desc ");
Chgrid.sortBy = (Chgrid.sortBy == 0 ? 1 : 0);
};
}
}
if(totalWidth>this.header.offsetWidth){
this.header.style.width = totalWidth + "px";
}else{
if(totalWidth parseInt(pageNum))pageNum=parseInt(pageNum)+1;
if(startPagepageNum)return;
this.startPage = startPage;
Chgrid.removeData();
var endNum = startPage * this.pageSize;
if(endNum > this.data.length) endNum = this.data.length;
var oRow = this.container.childNodes[1];
for(var i=(startPage-1)*this.pageSize;i0){
Chgrid.container.childNodes[k].className = Chgrid.container.childNodes[k].oldClass;
}
this.className = "Chgrid_row_hilight";
}
var j= Chgrid.getObjectIndex(Chgrid.container,this);
Chgrid.selectedRowIndex = j;
},
getObjectIndex : function(parent,obj){
var j = 0;
for(var i=0;i Chgrid.startPage*Chgrid.pageSize || !data[i])return;
var promp = prompt("请输入新的值","");
if(promp!=null){
var j = Chgrid.getObjectIndex(obj.parentNode,obj);
obj.innerHTML = promp;
Chgrid.updateData(i,j,promp);
}
//obj.editStatus = true;
//}
}
function $(id){
return document.getElementById(id);
}
var column = ["编号","姓名","性别","职位","电话","住址"];
var sortable = [false,true,true,true]
var data = [["","cityvoice","帅哥","Javascript Programmer","13300000000","康定路112弄4号"],["","melody","美女","UI Programmer","13400000000","南京西路112弄4号"],["","jeson","帅哥","Board","13500000000","北京路112弄4号"],["","yanguo","帅哥","Project Manager","13600000000","武定路112弄4号"],["","duanyu","帅哥","C# Programmer","13700000000","河南南路112弄4号"],["","xiaolonglv","美女","ASP Programmer","13800000000","陕西北路112弄4号"],["","rose","美女","Java Programmer","13900000000","西康路112弄4号"],["","cityvoice","帅哥","Javascript Programmer","13300000000","康定路112弄4号"],["","melody","美女","UI Programmer","13400000000","南京西路112弄4号"],["","jeson","帅哥","Board","13500000000","北京路112弄4号"],["","yanguo","帅哥","Project Manager","13600000000","武定路112弄4号"],["","duanyu","帅哥","C# Programmer","13700000000","河南南路112弄4号"],["","xiaolonglv","美女","ASP Programmer","13800000000","陕西北路112弄4号"],["","rose","美女","Java Programmer","13900000000","西康路112弄4号"],["","cityvoice","帅哥","Javascript Programmer","13300000000","康定路112弄4号"],["","melody","美女","UI Programmer","13400000000","南京西路112弄4号"],["","jeson","帅哥","Board","13500000000","北京路112弄4号"],["","yanguo","帅哥","Project Manager","13600000000","武定路112弄4号"],["","duanyu","帅哥","C# Programmer","13700000000","河南南路112弄4号"],["","xiaolonglv","美女","ASP Programmer","13800000000","陕西北路112弄4号"],["","rose","美女","Java Programmer","13900000000","西康路112弄4号"],["","cityvoice","帅哥","Javascript Programmer","13300000000","康定路112弄4号"],["","melody","美女","UI Programmer","13400000000","南京西路112弄4号"],["","jeson","帅哥","Board","13500000000","北京路112弄4号"],["","yanguo","帅哥","Project Manager","13600000000","武定路112弄4号"],["","duanyu","帅哥","C# Programmer","13700000000","河南南路112弄4号"],["","xiaolonglv","美女","ASP Programmer","13800000000","陕西北路112弄4号"],["","rose","美女","Java Programmer","13900000000","西康路112弄4号"],["","cityvoice","帅哥","Javascript Programmer","13300000000","康定路112弄4号"],["","melody","美女","UI Programmer","13400000000","南京西路112弄4号"],["","jeson","帅哥","Board","13500000000","北京路112弄4号"],["","yanguo","帅哥","Project Manager","13600000000","武定路112弄4号"],["","duanyu","帅哥","C# Programmer","13700000000","河南南路112弄4号"],["","xiaolonglv","美女","ASP Programmer","13800000000","陕西北路112弄4号"],["","rose","美女","Java Programmer","13900000000","西康路112弄4号"],["","cityvoice","帅哥","Javascript Programmer","13300000000","康定路112弄4号"],["","melody","美女","UI Programmer","13400000000","南京西路112弄4号"],["","jeson","帅哥","Board","13500000000","北京路112弄4号"],["","yanguo","帅哥","Project Manager","13600000000","武定路112弄4号"],["","duanyu","帅哥","C# Programmer","13700000000","河南南路112弄4号"],["","xiaolonglv","美女","ASP Programmer","13800000000","陕西北路112弄4号"],["","rose","美女","Java Programmer","13900000000","西康路112弄4号"],["","cityvoice","帅哥","Javascript Programmer","13300000000","康定路112弄4号"],["","melody","美女","UI Programmer","13400000000","南京西路112弄4号"],["","jeson","帅哥","Board","13500000000","北京路112弄4号"],["","yanguo","帅哥","Project Manager","13600000000","武定路112弄4号"]]
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
其它优秀的grid控件参考:
http://www.activewidgets.com
http://www.yui-ext.com/deploy/ext-1.0-alpha3/docs/
请千万不要把我这款控件跟它们比较,差距较大,不过我也有优势,使用起来比较简单,速度也快:)
本来想多加点数据,结果发现超过限制了,大家测试的时候自己多搞点数据测试其速度如何。
[ 本帖最后由 cityvoice 于 2007-3-15 16:52 编辑 ]