论坛首页 Web前端技术论坛

尝试写了个表格装饰jstd

浏览 1857 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2008-03-16  
预览效果:
jstd 0.8beta:http://army.512j.com/temp/table.html
jstd 0.9alpha:http://army.512j.com/temp/table2.html

尝试写着玩儿的,也算锻炼一下吧~
使用方法:先引入jstd.js文件,当然最好是在head部分了。然后在要装饰的table后面(建议body末尾)加上一句:
<script type="text/javascript">
jstd.exec(id);
</script>
id就是要装饰表格的id。

0.8目前实现了排序、自定义着色(高亮),改变列宽、双击隐藏列功能。

自定义着色方面通过color属性来,用数学上的区间来表示。比如(1,10]:#f33就是说这一列单元格的内容中如果在1和10之间(不包括1但包括10,开闭区间的不同)就着上#f33的颜色。

排序和着色种类则是通过命名name属性来,比如int、num、string、date、price等等。

代码写得很乱,很多地方还要改,先搞定功能后全面优化……

今天下午尝试0.9加入拖动改变列序的时候遇到问题了,头疼好久也没搞定……只要和隐藏列混到一起就会出现问题,调试的我头都大了,虽然知道完全归于自己开始设计上的失误,也知道问题出的方向所在,可就是改不好它。都准备放弃这一功能,在jstd2里再重新设计引入了……果然还是太年轻,经验不足啊……

另外在0.9页面里我把那几个表头上附着的红色div给显示出来了,这就是列宽和列序拖动的关键所在:每个th后面通过计算附加一个小div来实现拖拽,从而原有的table的dom没有任何改变。

写得不是很好,提点意见吧……
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics