最近花了一周搞定报表模块
Posted in ajax, asp, javascript, jquery on 01/19/2010 01:59 下午 by tunpishuang
报表列表
报表编辑
报表显示
当任务布置下来的时候，我完全不知道报表是个啥东东。开始做的那个单表的完全就是自己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的相关文章，下面这段代码用了一下午才憋出来，囧。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $("#selectTableInner").change(function(){ var fieldName=this.options[this.selectedIndex].value; $.ajax({ type :"GET", url :"getData.asp?table_name="+fieldName, dataType:"json", success :function(msg){ $("#selectFieldInner").empty(); $("#selectTableInner option").each(function(i){ selectFieldInner.options.add(new Option(msg.fieldlist[i].FIELD_ALIASES,msg.fieldlist[i].FIELD_NAME)); }); } }); document.getElementById("condition_en").value=""; }); |
还有一个javascript原生版本ajax
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | sel.onchange=function(){ var fieldName=this.options[this.selectedIndex].value; var url="getData.asp?table_name="+fieldName; if(window.ActiveXObject) xhr=new ActiveXObject("Microsoft.XMLHTTP"); else if(window.XMLHttpRequest) xhr=new XMLHttpRequest(); xhr.open("GET",url); xhr.onreadystatechange=callback; xhr.send(null); }; function callback() { msg2=xhr.responseText; var func=new Function("return"+msg2); var json=func(); var selectFieldInner=document.getElementById("selectFieldInner"); for(i=0;i<json.fieldlist.length;i++){ FieldList.add(new Field(json.fieldlist[i].FIELD_ALIASES,json.fieldlist[i].FIELD_NAME,'varchar','100','','')); } } |
我是通过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没学好的后果。
接下来的博文我会将一些具体问题记录一下。
