当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript表格控件:Chgrid,简化型

Javascript
javascript function、指针及内置对象
Javascript 同时提交多个Web表单的方法
用jQuery简化JavaScript开发分析
Javascript静态分页(多个资料,静态自动分页)
JavaScript 调试器简介
JavaScript 判断浏览器类型及版本
javascript eval函数深入认识
一个写得较好的JavaScript日期挑选控件
JavaScript基本概念初级讲解论坛贴的学习记录
javascript web对话框与弹出窗口
input、button的不同type值在ajax提交表单时导致的陷阱
javascript 密码强弱度检测万能插件
javascript 特殊字符串
Javascript动态伸缩+淡出淡入
javascript URL锚点取值方法
jQuery Div中加载其他页面的实现代码
javascript 文档的编码问题解决
escape、encodeURI 和 encodeURIComponent 的区别
[推荐]javascript 面向对象技术基础教程
js 页面执行时间计算代码

Javascript 中的 javascript表格控件:Chgrid,简化型


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 314 ::
收藏到网摘: n/a

本着自由共享的精神,把代码帖出来,同时大家也可以一起来测试以及添加新功能,请大家根据网友提出的问题,把自己修改好的版本都帖出来跟在下面,最后作为一款比较全面的表格软件。
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;}
注意:最后一列是不用定义宽度的,程序会自动调整
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

其它优秀的grid控件参考:
http://www.activewidgets.com
http://www.yui-ext.com/deploy/ext-1.0-alpha3/docs/
请千万不要把我这款控件跟它们比较,差距较大,不过我也有优势,使用起来比较简单,速度也快:)
本来想多加点数据,结果发现超过限制了,大家测试的时候自己多搞点数据测试其速度如何。
[ 本帖最后由 cityvoice 于 2007-3-15 16:52 编辑 ]