javascript表格控件：Chgrid，简化型

网络编程 2024/9/28 佚名

3 2 1

无为清净楼资源网 Design By www.qnjia.com

本着自由共享的精神，把代码帖出来，同时大家也可以一起来测试以及添加新功能，请大家根据网友提出的问题，把自己修改好的版本都帖出来跟在下面，最后作为一款比较全面的表格软件。
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;}
注意：最后一列是不用定义宽度的，程序会自动调整

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> #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;}  </style>  </head> <body onload="Chgrid.init('Chgrid_container',20,20,true,true,true,1,column,data,sortable);">  <input type="button" value="前一页" onclick="Chgrid.fillData(Chgrid.startPage-1)" class="button" /><input type="button" value="后一页" onclick="Chgrid.fillData(Chgrid.startPage+1)" class="button" /><input type="button" value="注册事件" onclick="Chgrid.registerCallBack('click',[-1,2],renewData)" class="button" /> </body> </html>

[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表格控件：Chgrid，简化型

标签：

javascript表格控件：Chgrid，简化型

无为清净楼资源网 Design By www.qnjia.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

无为清净楼资源网 Design By www.qnjia.com

评论“javascript表格控件：Chgrid，简化型”

暂无评论...

www.qnjia.com 无为清净楼资源网

139,976互联网资源

144,792高清电影

21,817无损音乐

631,128技术资源

最新文章

李国祥.1995-九五变奏【嘉音】【WAV+CUE】

2024/9/28

许景淳.1992-你来自何方【全美唱片】【WAV+

2024/9/28

石欣卉.2007-剧欣卉集·完整电视剧主题精丫华

2024/9/28

群星.2005-LOVE情歌集VOL.5.2CD【正东】【W

2024/9/28

孙悦.1996-伙伴【正大国际】【ＷAV+CUE】

2024/9/28

一句话新闻

苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/9/28

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

javascript表格控件：Chgrid，简化型

javascript表格控件：Chgrid，简化型

诘屈聱牙之javascript中国象棋

仿豆瓣分页原型(Javascript版)

评论“javascript表格控件：Chgrid，简化型”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

javascript表格控件：Chgrid，简化型

javascript表格控件：Chgrid，简化型

诘屈聱牙之javascript中国象棋

仿豆瓣分页原型(Javascript版)

评论“javascript表格控件：Chgrid，简化型”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存