TechGuru

报表列表

报表编辑

报表显示

当任务布置下来的时候，我完全不知道报表是个啥东东。开始做的那个单表的完全就是自己yy出来的结果，最后不满意，只有重新做过。

思路简单也造成了这个报表模块功能的局限性。在写代码的过程中碰到了很多的问题，并一一解决掉。

这个模块使用两个表report_info和report_field。

report_info记录报表的基本信息，包括报表名称、说明、模板、建立的用户、创建时间等。

report_field通过report_id和report_info的id是关联字段，包括主要保存每个需要调出数据的sql语句。

report_field填写好的数据，通过模板上的[#keyword#]关键字来替换，就得到了一个简单的报表。

界面的问题

开始全部使用div，发现排版很乱，最后碰巧找到了<fieldset>这个不是很流行的标签。报表信息填写、sql语句生成、模板、已添加字段都有条不紊的排好了，<fieldset>里面放一个<legend> 就知道这个字段集合主要是用来做啥的了。

用javascript表单生成sql语句的问题

开始本来打算自己制作一个表单用来自动生成sql语句，但是后来越想越复杂，有and有or，多表的时候有left join,right join,full join，还有括号表示优先级，比如数据类型是数字还得验证、是日期类型至少也得弹出一个js的日期选择框吧。最后找到了codeslave哥写的highquery，这东西就是我所需要的，完全可以满足这个报表模块的需求，但是在后来发现了一个棘手的问题。highquery初始化的时候里面的字段列表是通过它自己写的Field对象new出来的。这样每次页面加载后，从request.querystring传过来的表名就固定了，无法动态的载入其他表单字段信息，最后只有弄成弹窗了。

级联下拉菜单问题

我使用级联下拉菜单来让用户选定需要查询指定表的指定字段的指定函数 比如db1.max(field1)。也需要通过无刷新页面取数据，所以临时看了一下jquery调用ajax的相关文章，下面这段代码用了一下午才憋出来，囧。

还有一个javascript原生版本ajax

我是通过json格式来传输数据。在服务器端将asp对象转换成json对象又让我犯难了。找到了一个项目:aspjson，同时包含里面的JSON.asp和JSON_UTIL.asp 可以直接将sql执行出来的数据转换成json对象。因为javascript对json原生支持，所以javascript对json的访问也是非常简单的。因为aspjson是老外开发的，自称是支持unicode，但在写代码的时候出现asp下标越界错误。最后搞了半天找到原因，提交了一个issue，并被作者fixed了。很快，貌似他一直都在线，恩，是个宅男。

开网上的文章所jquery对象不能被赋值，最后在写代码的时候也出现这个问题。所在最后在包含了jquery.js的页面里面写了很多的getElementById()，代码混杂，这就是jquery没学好的后果。

接下来的博文我会将一些具体问题记录一下。

如上图，需要做一个组合查询功能，“字段名”可能是一般的字符，也可能是日期，当选定的“字段名”是日期类型的时候，需要将“参数”里面的文本框加入一个“日期选择框”。

代码：

d2是“字段名” text1是“参数”
d2的onchange事件触发后调用addDatePickerClass函数，addDatePickerClass函数遍历options，查找关键字包含“时间”的option（也算是半自动化吧，囧。），如果是就调用datePicker函数，这个是别人写的日期控件，直接调用，非常方便。

本来打算使用attachEvent或者是addEventListener来监听事件的，onclick属性使用setAttribute()，但是发现IE貌似没反应了，调试了一下午，无果。左右用比较保守点的方法。至少firefox,opera,IE都兼容了。

我发现还是firefox比较好“服侍”，当然也和技术水平有关。

最近在看zend框架，确实很牛逼的说，准备看懂个50%，写个工作流转发系统出来。

这里实际上是匿名函数

function(arg){…}
这就定义了一个匿名函数，参数为arg

而调用函数时，是在函数后面写上括号和实参的，由于操作符的优先级，函数本身也需要用括号，即：
(function(arg){…})(param)
这就相当于定义了一个参数为arg的匿名函数，并且将param作为参数来调用这个匿名函数

而(function($){…})(jQuery)则是一样的，之所以只在形参使用$，是为了不与其他库冲突，所以实参用jQuery

via

百度知道有人提问：

如题：
有三个下拉列表，分别为年，月，日。年和月的好实现，循环即可。但是天数却要根据年和月来定。循环次数要看条件。
怎样实现这样的代码。
期待解决……

于是就花了一下午的时间弄了一个：

——-
解释一下。
重点是根据年和月生成适合大小的日子，一般情况是日期最大可以是30，31，这个根据月份来判断。还有比较特殊的二月，需要判断是不是闰年，如果是那么2月有29天，不是闰年有28天。
整个程序封装为一个date对象，通过init方法初始化，参数为需要显示年的跨度和月的跨度。

有个任务，给个公司系统的“人员定岗”加入“人员查找”功能。
这个功能的界面如上图，左边的组织结构树，中间的一个id为left的select是该部门职位下的人员，右边是一个id为right的select，是整个组织的全部人员。可以对left里面的人员进行添加、删除、编辑，这就是“人员定岗”的大致功能。

但是有个缺点，right列表里面的人员多了（比如几千甚至上万）就不好快速的找到需要的人。

所以加入了查找功能。

首先在插入一个文本框和按钮

然后是我写了3个小时的50行js代码加入页面头部的script标签中：

下面的代码加入页面页脚的script标签中：

主要的思路就是：第一次加载页面的时候，从后台数据库把所有员工数据放到了right列表中，输入关键字点查询的时候首先将所有列表项的value和text读入到两个数组中，然后将输入的查询关键字一次和这两个数组用indexOf比较。
indexOf()的作用是查询某字符串是否输入它的一个子字符串，比如不包含返回-1。
然后将查询符合要求的赋值给另外两个数组selectedPersonValue和selectedPersonText，先删除所有列表项，然后将这两个数组用options.add依次添加到列表项中。
当第二次，第三次…点“查询”的时候，就快了，因为直接和内容中的两个数组比较。

1400多个列表项，在IE6下面点“查询” cpu跳到60%~80%，Firefox下面 cpu为30%-40%。可能firefox对js的一些函数有优化吧。

还有一点就是js放的位置也是有讲究的，比如这个例子中，读取right列表长度放在页面页首就不行。因为文档还没有加载晚上，它是识别不出来列表right，回显示”undefined”。

这次修改工作，对js有了近一步了解。我再次感谢firefox的牛逼扩展：firebug，调试js，just easy。

———irrelevant gossip
前天我一同学的公司叫我做网站，是搞教育培训的，比如计算机等级，英语等级等。报价5k8。有个难点就是：在线远程视频培训这块，还有美工的问题，我找了很多同学，同学的同学，都没有牛逼一点的网站美工。唉，看来这笔业务不好接。

需要注意的是
0=< random() <1
round()四舍五入，比如round(1.4)=1 ,round(1.5)=2
ceil()总是向上取近似值，比如ceil(0.00000000001)=1
floor()总是向上取近似值，比如floor(0.9999999999999)=0

介绍一个基于jquery的插件soChange，下载地址、demo、文档：

http://www.ceshile.cn/lxProject/ceshi/soChange/soChange.html

压缩后的js只有1.6k。其实不仅仅是一个图片切换，所有的对象都可以实现切换。

可以自定义是否自动切换，切换时间，鼠标悬停等待，自定义切换按钮，自定义缩略图，还有其他更多的能用到的地方需要用到css的一些页面特效技巧。

这是作者的主页：http://hi.baidu.com/bujichong

一直都关注cnbeta的动态，没想到20号的时候登录尽然有这条新闻：‘“2009年6月CET6成绩于今天2009年8月20号早上9点公布” ，cnbeta现在是嘛新闻都出啊。于是乎就拿出了俺的“证件夹”，掏出了准考证开始查成绩，我对这个网上cet查分的网站的认识和评价基本上和此文一样，这次6级得到437分，感觉还是差不多了，因为还重来没有认认真真的停下来背单词、作题，除了考四级的时候作了一张模拟卷。

这个查询网站通过ajax来查询，需要等待15秒的时间，每次限查询一人成绩，听说08年的时候还要安装activex控件才能查询，对于linux用户就恼火了。通过分析一下http://cet.99sushe.com/这个页面发现没有表单(form)，而是这样一句：

<input id="btn" type="button" name="" value="查询" onclick="submit_search();" /></p>

调用了一个js函数submit_search(); 网页引用了一个js文件：http://cet.99sushe.com/res/js/cet0908.js ：

——————————————-

总结起来就是向getscore.html post一个数据”id=”+xxxxxxxxxxxx

可以通过curl向指定的服务器发送数据包，具体方法此文 “斗智斗勇续 四六级查分技巧 ” 有介绍，需要注意的一点是查询的服务器有referer验证，referer验证一般用来防盗链，防止数据从非本站的提交上去，不过自定义referer并不是什么好难的事情，此为的作者还做了一个c#的gui前端，基本上就是把cmd的输出放在gui界面上，没有多大的意义。这个 “CET在线连续查分程序” 是别人用c#弄的一个在线查询，可以指定准考证号的起始号码和结束号码，就可以连续查询了。

然后我受到这样的启发，做了一个php版本的，演示地址：http://tunpishuang.iamspace.com/cet.php ， 和c#那个略有不同的是并不是指定起始和结束地址，而是直接输入前6位，最多输出6000人的成绩，我贴一下源代码：

cet.php —————————————————

cet_query.php—————————————————-

没有什么好讲的吧，主要是用到了php的libcurl库抓网页。

自从一心专攻网站技术，就开始学习javascript, 学习javascript对于网站开发人员来说是极其重要的。是以后要学习的ajax,jquery,json的基础，好像是这样的，因为上面提及的三门技术我还没什么概念。

这本书从09.5.12看到09.7.3，进度很慢，原因有2。1是英文版看起吃力，2是每天无聊的课的耽搁，为了加快进度，上课的时候在psp上看。

我喜欢看电子书有两个原因，1是，这种教材式的书籍上面都有很多的例子，参照电子书写例子比看纸质书籍好，纸质书籍不好放。2是，计算机类的书籍都比较贵，买不起，除非我觉得确实很经典的，我就会买。

电子书我还是觉得html,pdf,chm格式好，最怕碰到下载的电子书格式是pdg，很多国内的出版的电子书都用的是超星扫描的，不知道是技术落后，还是故意的，pdg的清晰度让人汗颜，特别是图片，基本上是一团乱麻。

废话说完了，谈谈这本书吧，它是2003年出版的，是有点历史了，讲解主要以javascript 1.x为范例，2.0的一些新特性只是介绍性的谈讨了一下。实验环境，也就是浏览器用的是windows 98自带的那个版本的IE, 还有netscape(netscape已经在08年停止官方支持)，现已经是2009过半了，IE7,8， firefox3,3.5已经普天盖地，这样就造成了有几个例子在firefox 3.5上的无效，比如这个通过Js修改页面样式的例子，在IE8，firefox 3.5下面都无效：

<!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=utf-8″ />
<title>modify styles using javascript</title>
<script language=”javascript” type=”text/javascript”>
var textboxes = document.getElementsByTagName(“input”);
for (var counter=0;counter<textboxes.length;counter++)
{
var mytextbox= textboxes[counter];
mytextbox.style.backgroundColor =”black”;
mytextbox.style.color=”white”;
mytextbox.style.font=”22pt Arial”; }
</script>
</head>
<body>
<form action=”#” method=”get”>
<div style=”position:absolute;top:50px;left:100px;”> full name:<br />
<input type=”text” name=”fullname” id=”fullname” />
<br />
email address:<br />
<input type=”text” name=”email” id=”email” />
</div>
</form>
</body>
</html>
——————————————

具体无效的原因我不知道。

书中讲解javascript语法没有什么好说的，什么if,while,switch,for,也是中规中矩的讲解，后面关于javascript操作DOM的例子我觉得少了一点，当然一本300多页的书，要把每个属性，方法都用例子来阐述一遍那绝对是无稽之谈。该书还涉及到了js对框架的操作，我觉得框架貌似现在正在从人们的眼前中消失，记得高中的时候我在弄一个个人主页，还没有学css，也没有听说过表格排版，当时就用frame的组合来做了一个主页，google搜索的时候把每个frame分别看作单独的网页索引了起来，header,footer,nav 全是分离了的，这让我对frame的印象一直不是很好。不过一些大型的社区网站仍然采用框架，比如猫扑大杂烩左边框架显示帖子标题，右边显示帖子内容。

书中最后提到javascript操作对象，比如java applet,window媒体，flash。也就是说javascript起初开发出来的目的主要还是对java applet起到一定的交互作用，后面功能不断的扩大，还有了官方的规范。

看了这本书我对这些规范有了更加深刻的认识，国内计算机类的书籍有个弊病就是经常只讲技术而忽略了讲的语言的一些相关规范，工具的使用许可之类涉及到法律的问题。也难怪“绿坝”用了别个的函数库也不声明一下。扯远了….

总之我觉得这是一本概念性的书籍，我想更深入的DOM，我不知道学来做什么，也不知道可以做什么，但很重要的说。

接下来打算在http://www.w3school.com.cn 混迹，上面有很多鲜活的例子。

————–irrelevant———-

距放暑假还有1个星期，先跟到同学去西安耍几天，然后学车，争取暑假完之前拿到驾照，哈哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈哈哈啊哈哈。

All AJAX image editor

Read the rest of this entry »