作家
登录

javascript表格控件:Chgrid,简化型

作者: 来源:www.28hudong.com 2013-03-30 03:33:48 阅读 我要评论

本着自由共享的精神,把代码帖出来,同时大家也可以一起来测试以及添加新功能,请大家根据网友提出的问题,把自己修改好的版本都帖出来跟在下面,最后作为一款比较全面的表格软件。 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;} [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 编辑 ]

  推荐阅读

  JavaScript初级教程(第二课)第1/7页

上一讲我们学了JavaScript出现在何处,看起来象什么。现在我们开始学习这种语言。本课我们将学习JavaScript如何存储信息,如何根据信息作决定,如何根据用户交互要求交替图片 准备好了吗? 现在开始学习电脑编程>>>详细阅读


本文标题:javascript表格控件:Chgrid,简化型

地址:http://www.17bianji.com/kaifa2/JS/30619.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)