本着自由共享的精神，把代码帖出来，同时大家也可以一起来测试以及添加新功能，请大家根据网友提出的问题，把自己修改好的版本都帖出来跟在下面，最后作为一款比较全面的表格软件。

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;i 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;i