当柳上原的风吹向天际的时候...

真正的快乐来源于创造

  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  368 Posts :: 1 Stories :: 201 Comments :: 0 Trackbacks

#

http://www.llxxb.com/upload/source/Teambiz2012-2-29.rar

在此感谢 雷振杰  提供为此提供空间!
posted @ 2012-02-29 11:23 何杨 阅读(301) | 评论 (1)编辑 收藏

 

 

 

 

 

 

Teambiz中前台表单验证组件FormChecker

 

 

 

 

 

 

 

作者:何杨

撰写日期:2012年2月27日

版本:1.00

更新日期:  

 

 

第一部分:功能说明

对前台页面的表单组件(对于所有用.value能取到值的组件都适用)提供正则表达式验证功能。

第二部分:核心组件

名称

路径

说明

CheckItem

teambiz\WebRoot\page\js\formchecker.js

这个类表示一个页面检查项,参数有表单组件id,当不合法时提示的文字,验证表单组件内容的正则表达式和表征组件是否必填字段。

在页面中增添验证项时常会遇到这个类。

FormChecker

teambiz\WebRoot\page\js\formchecker.js

这个类表示一个前台组件正则表达式验证器。内含一个数组,以容纳多个验证项(CheckItem)

addCheckItem

teambiz\WebRoot\page\js\formchecker.js

FormChecker的数组中增添一个验证项。

在页面中增添验证项时常会遇到这个类。

checkTextBox

teambiz\WebRoot\page\js\formchecker.js

对一个checkItem进行检查,如果它是必填组件,使用正则表达式验证它,并返回验证的结果;如果它不是必填组件,且没有输入内容的话,返回真,否则依然按照正则表单时来验证它。


 

isValid

teambiz\WebRoot\page\js\formchecker.js

FormChecker的数组进行循环并逐个使用checkTextBox函数进行检查,当所有的检查项都符合验证条件后返回真;如果有一个检查项不符合条件,使用alert显示提示文字并将焦点至于该组件上。

用户在提交表单前应该调用这个函数得到表单的验证结果。

 

第三部分:CheckItem和FormChecker两个类的代码

以下代码请参见teambiz\WebRoot\page\js\ formchecker.js中同名函数

/*************************

*

*   Class:CheckItem

*   2009.08.23

**************************/

//-- Contructor

function CheckItem(textboxName,msg,validChar,isRequired){

            this.textboxName=textboxName;

            this.msg=msg;

            this.validChar=validChar;

            this.isRequired=isRequired;

}

 

/*************************

*

*   Class:FormChecker

*   2009.08.23

**************************/

//-- Contructor

function FormChecker(){

            this.checkItemArray=new Array;

}

//-- Add a check Item to array

FormChecker.prototype.addCheckItem=function(textboxName,msg,validChar,isRequired){

            var checkItem=new CheckItem(textboxName,msg,validChar,isRequired);

            this.checkItemArray[this.checkItemArray.length]=checkItem;

};

//-- Check text field in the form

FormChecker.prototype.checkTextBox=function(checkItem){

            var validChar=checkItem.validChar;

            var isRequired=checkItem.isRequired;

            var inputValue=$(checkItem.textboxName).value;

           

            if(isRequired!="true" && inputValue.length<1){

                        return true;

            }

            else{

                        var regexStr="^"+validChar+"$";

                        var regex=new RegExp(regexStr);

                        return regex.test(inputValue);

            }

};

//-- judge the validation of a form

FormChecker.prototype.isValid=function(){

            for(var i=0;i<this.checkItemArray.length;i++){

                        var       toBeCheckedObj=this.checkItemArray[i];

                       

                        var checkResult=this.checkTextBox(toBeCheckedObj);

                       

                        if(checkResult==true){

                                    continue;

                        }

                        else{               

                                    alert(toBeCheckedObj.msg);

                                    $(toBeCheckedObj.textboxName).focus();

                                   

                                    return false;

                        }

            }

            return true;

};

第四部分:使用CheckItem和FormChecker进行验证的代码

以下代码请参考:teambiz\WebRoot\page\jsp\user\register\javascript.jsp

1.初始化FormChecker及添加验证项目

formChecker=new FormChecker();

formChecker.addCheckItem("userName","请输入二到五位汉字的用户名","[\\u4E00-\\u9FA5]{2,5}","true");

formChecker.addCheckItem("userPswd","请输5位以上,最长20位的字母或数字组成的密码","(\\w){5,20}","true");

formChecker.addCheckItem("userPswd2","请输5位以上,最长20位的字母或数字组成的密码","(\\w){5,20}","true");

formChecker.addCheckItem("email","请输入您的电子邮件","\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\.\\w+([-.]\\w+)*","true");

 

2.得到表单的验证结果

function getCheckResult(){

            // 进行页面输入检查

            if(formChecker.isValid()==false){

                        return false;

            }

           

            var userPswd=$("userPswd").value;

            var userPswd2=$("userPswd2").value;

           

            if(userPswd!=userPswd2){

                        $("userPswd2").focus();

                        alert("前后两次密码必须一致.");

                        return false;

            }

           

            return true;

}

以上粗体部分就是得到FormChecker的验证结果。由于FormChecker只能对单个组件的文本内容进行正则表达式校验,无法对对多个组件进行比较,因此如果实际需要其它的验证项,可以在getCheckResult函数中进行添加。

3.注册按钮点击时间后的响应函数:

$("registerBtn").onclick=function(){

            if(getCheckResult()==true){

                        submitForm();

            }

};

 

第五部分:使用步骤

步骤

说明

参照

载入这批函数

teambiz中,这一载入一般放在style.css中。

<script src="page/js/formchecker.js" type="text/javascript"></script>

window_onload函数中初始化表单验证器并增添检查项。

 

formChecker=new FormChecker();

formChecker.addCheckItem("userName","请输入二到五位汉字的用户名","[\\u4E00-\\u9FA5]{2,5}","true");

formChecker.addCheckItem("userPswd","请输5位以上,最长20位的字母或数字组成的密码","(\\w){5,20}","true");

formChecker.addCheckItem("userPswd2","请输5位以上,最长20位的字母或数字组成的密码","(\\w){5,20}","true");

formChecker.addCheckItem("email","请输入您的电子邮件","\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\.\\w+([-.]\\w+)*","true");

使用FormChecker的isValid函数来得到验证结果。

 

function getCheckResult(){

            // 进行页面输入检查

            if(formChecker.isValid()==false){

                        return false;

            }

           

            ……

           

            return true;

}

注册按钮点击时间后的响应函数

 

$("registerBtn").onclick=function(){

            if(getCheckResult()==true){

                        submitForm();

            }

};

 

第六部分:小结

进行表单元素验证是程序员不得不做却又较为乏味的工作之一,FormChecker类能有助于减轻他们的负担,从而使得用正则表达式验证文本内容的工作变得简单,程序员只需要在正则表达式的编写上下些功夫或者求助于网络。

FormChecker的不足之处是验证模式单一,验证逻辑比较简单,但对于验证,似乎也没有多少共性的需求了,如果有希望大家能赐教。

posted @ 2012-02-29 10:41 何杨 阅读(467) | 评论 (0)编辑 收藏

 

 

 

 

 

 

Teambiz中后台参数容器RequestParamMap

 

 

 

 

 

 

 

作者:何杨

撰写日期:2012年2月27日

版本:1.00

更新日期:  

 

 

第一部分:功能说明

简化页面请求参数的取值和存放,解决乱码问题,并简化数据传输通道上函数参数的编写。

第二部分:核心组件

名称

路径

说明

RequestParamMap

teambiz\src\com\ibm\heyang\action\base\RequestParamMap.java

它是一个页面请求参数的容器,内含一个哈希表,以键值对的方式来存储请求参数的名和值。

它的构造函数接受一个哈希表,这个哈希表在AjaxAction的getRequestParamMap函数中被生成,并传入强制子类实现的process函数中,因此每个继承自AjaxAction的类中直接使用RequestParamMap对象即可,无需考虑它的由来。

有一点需要说明的是,由于非ASC码字符在URL中是不允许的,因此在使用Ajax.Request对象发起请求前使用javaScript函数eval两次对url进行转码,与之对应的,在AjaxAction的getRequestParamMap函数中使用UTF8Coder类decode方法又将其还原了回来,因此程序员无需担心乱码问题。

getParamValue

teambiz\src\com\ibm\heyang\action\base\RequestParamMap.java中同名函数。

程序员可以参数名为单位,使用这个函数取出参数的值,当参数名不存在,即请求参数中没有后台想要的值,一个异常将被抛出。按照teamBiz的异常传递体系,这个异常会在用户界面上显示出来,这样做有助于问题的快速定位。

addParam

teambiz\src\com\ibm\heyang\action\base\RequestParamMap.java中同名函数。

程序员可以将参数名和参数值添加到RequestParamMap,设计这个函数的考虑到很多参数如用户信息在请求中往往是不见的,需要在Action中从session或是其它地方取出再往后方传递。

 

第三部分:有关RequestParamMap使用的代码

1. RequestParamMap类的代码

/**

 * 页面请求参数容器

 * @author 何杨(heyanghy@cn.ibm.com)

 * @version 1.00

 * @time Feb 6, 2012 10:47:39 AM

 *

 */

public class RequestParamMap{

            // 存储页面请求参数的哈希表

            private Map<String,String> map;           

            /**

             * 构造函数

             * @param map

             */

            public RequestParamMap(Map<String,String> map){

                        this.map=map;

            }          

            /**

             * 按请求参数的名称取得请求参数的值

             * @param paramName

             * @return

             */

            public String getParamValue(String paramName) throws IllegalArgumentException{

                        if(map.containsKey(paramName)){

                                    return map.get(paramName);

                        }else{

                                   throw new IllegalArgumentException("找不到名为"+paramName+"的页面请求参数.");

                        }

            }

           

            /**

             * 添加一个参数

             * @param paramName

             * @param paramValue

             */

            public void addParam(String paramName,String paramValue){

                        map.put(paramName, paramValue);

            }

}

以上代码路径:teambiz\src\com\ibm\heyang\action\base\RequestParamMap.java

 

2. AjaxAction的getRequestParamMap函数

private RequestParamMap getRequestParamMap(HttpServletRequest request){

            Map<String,String> map=new HashMap<String,String>();

           

            for (Enumeration<?> e = request.getParameterNames(); e.hasMoreElements();) {

                        String name = (String) e.nextElement();

                        String[] values = request.getParameterValues(name);

                       

                        if (values != null && values.length >= 1) {

                                    String value=UTF8Coder.decode(values[0]);

                                    map.put(name, value);

                        }

            }

           

            return new RequestParamMap(map);

}

以上代码路径:teambiz\src\com\ibm\heyang\action\base\AjaxAction.java

 

3.继承自AjaxAction的Action类中对RequestParamMap的使用

public final class FetchExecuterAction extends AjaxAction {

            private static Logger logger = Logger.getLogger(FetchExecuterAction.class);

           

            public void process(ActionMapping mapping, ActionForm form,

                                    HttpServletRequest request, HttpServletResponse response,RequestParamMap paramMap)

                                    throws Exception {

                        logger.trace("取得执行者名单Action");

                                   

                        // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

                        PrintWriter out = response.getWriter();

                                   

                        RelationService service=SpringUtil.getRelationService();

                        Long userId=(Long)request.getSession().getAttribute("userId");

                        if(userId!=null){

                                    paramMap.addParam("userId", String.valueOf(userId));

                                    paramMap.addParam("userName", "自己");

                                    paramMap.addParam("status", Relation.Status_Agree);

                                   

                                    String xml=service.getExecuterXml(paramMap);

                                   

                                    out.println("<response>");

                                    out.println("<status>ok</status>");

                                    out.println(xml);

                                    out.println("</response>");

                                   

                        }else{

                                    out.println("<response>");

                                    out.println("<status>ng</status>");

                                    out.println("<text>请登录后再来执行此操作</text>");

                                    out.println("</response>");

                        }

            }

}

以上代码来自:teambiz\src\com\ibm\heyang\action\relation\FetchExecuterAction.java

 

4.后台DAO类对RequestParamMap的使用

public String getExecuterXml(RequestParamMap paramMap) throws Exception{

            String userId=paramMap.getParamValue("userId");

            String userName=paramMap.getParamValue("userName");

            String status=paramMap.getParamValue("status");

           

            StringBuilder sb=new StringBuilder();

            sb.append("    select");

            sb.append("        tb01.toUserId as id,");

            sb.append("        tb02.name as name");

            sb.append("    from");

            sb.append("        teambiz_relation");

            sb.append("        tb01,");

            sb.append("        teambiz_user");

            sb.append("        tb02");

            sb.append("    where");

            sb.append("        tb01.toUserId=tb02.id");

            sb.append("        and");

            sb.append("        tb01.fromUserId="+userId+"");

            sb.append("        and");

            sb.append("        tb01.status='"+status+"'");

            sb.append("    order by");

            sb.append("        tb01.id");

            String sql=sb.toString();

           

            List<?> ls=fetchRecords(sql,new NameValueRowMapper());

           

            StringBuilder sb2=new StringBuilder();

            sb2.append(new NameValueList(ls).asXML());

            sb2.append("<node>");

            sb2.append("<id>"+userId+"</id>");

            sb2.append("<name>"+userName+"</name>");

            sb2.append("</node>");

           

            return sb2.toString();

}

以上代码来自:teambiz\src\com\ibm\heyang\dao\RelationDao.java

 

第四部分:小结

函数参数如果杂乱很不利于一些基类中共通函数的编写,比如分页函数,在RequestParamMap类的帮助下,这个问题能够得到解决。它附带的自动生成对象,解码,无参数时抛出异常要给程序中参数的取值,转码和异常处理带来了方便.

RequestParamMap类体积很小,功能也不复杂,但对后台的整个代码结构的改善带来了莫大好处,类似这种组件是值得发掘的。

 

posted @ 2012-02-29 10:41 何杨 阅读(397) | 评论 (0)编辑 收藏

 

 

 

 

 

 

Teambiz中与表格操作相关的函数

 

 

 

 

 

 

 

作者:何杨

撰写日期:2012年2月26日

版本:1.00

更新日期:  

 

 

第一部分:功能说明

提供向表格行的单元格中添加文本,链接,图片等是操作表格内容的常见操作函数。它们在诸如addDatasToTable之类的函数常常被使用。

第二部分:核心组件

名称

路径

说明

createTextTd

teambiz\WebRoot\page\js\dom.js中同名函数。

创建一个仅含文本的单元格。

createLink

teambiz\WebRoot\page\js\dom.js中同名函数。

创建一个链接,它是为createLinkTd函数准备的。

createLinkTd

teambiz\WebRoot\page\js\dom.js中同名函数。

创建一个仅含链接的单元格,当程序员需要在单元格中需要创建链接或是需要通过js伪协议调用js函数可以使用它。

createImageTd

teambiz\WebRoot\page\js\dom.js中同名函数。

创建一个仅含图片的单元格,当需要用图标表示数据的状态时可以使用它。

createTitledLink

teambiz\WebRoot\page\js\dom.js中同名函数。

创建一个带提示性说明(tooltiptext)的链接,它是为createTitledLinkTd函数准备的

createTitledLinkTd

teambiz\WebRoot\page\js\dom.js中同名函数。

创建一个包含提示性说明链接的单元格,它比createLinkTd更具用户友好型。

createIamgeLink

teambiz\WebRoot\page\js\dom.js中同名函数。

创建一个图片链接,它是为createImageLinkTd函数使用的。

createImageLinkTd

teambiz\WebRoot\page\js\dom.js中同名函数。

创建一个包含图片链接的单元格,如果图片比文字更加形象时可以考虑用它取代createLinkTd和createTitledLinkTd

createImageTextTd

teambiz\WebRoot\page\js\dom.js中同名函数。

创建一个兼具图片和文字说明的单元格。

createStartSearchRowBy

teambiz\WebRoot\page\js\changepage.js中同名函数。

创建一个colspan为40的表格行,内含图片和文字,一般在开始查询时使用。

createNgRowBy

teambiz\WebRoot\page\js\changepage.js中同名函数。

创建一个colspan为40的表格行,内含文字,一般从后台没有得到相要的数据时使用。

 

第三部分:实际代码

以下代码请参见teambiz\WebRoot\page\js\dom.js中同名函数

/******************************************************

* create a text cell

* 2011-3-1 9:27:07 heyang

******************************************************/

function createTextTd(text){

            var cell=document.createElement("td");

            cell.appendChild(document.createTextNode(text));  

            return cell;

}

 

/******************************************************

* create a image cell

* 2011-3-1 9:27:07 heyang

******************************************************/

function createImageTd(imageUrl){

            var cell=document.createElement("td");           

            var image=document.createElement("img");

            image.setAttribute("src",imageUrl);

            cell.appendChild(image);  

            return cell;

}

/******************************************************

* create a link

* 2011-3-1 9:27:07 heyang

******************************************************/

function createLink(text,url){

            var link=document.createElement("a");

            link.appendChild(document.createTextNode(text));

            link.setAttribute("href",url);          

            return link;

}

/******************************************************

* create a link cell

* 2011-3-1 9:27:07 heyang

******************************************************/

function createLinkTd(text,url){

            var link=createLink(text,url);

 

            var cell=document.createElement("td");

            cell.appendChild(link);       

            return cell;

}

/******************************************************

* create a titled link

* 2011-7-9 10:46:50 heyang

******************************************************/

function createTitledLink(text,title,url){

            var link=document.createElement("a");

            link.appendChild(document.createTextNode(text));

            link.setAttribute("href",url);

            link.setAttribute("title",title);       

            return link;

}

/******************************************************

* create a Titled link cell

* 2011-7-9 10:46:50 heyang

******************************************************/

function createTitledLinkTd(text,title,url){

            var link=createTitledLink(text,title,url);

            var cell=document.createElement("td");

            cell.appendChild(link);       

            return cell;

}

/******************************************************

* create a Iamge link

* 2011-3-1 9:27:07 heyang

******************************************************/

function createIamgeLink(imageUrl,url){

            var link=document.createElement("a"); 

            var image=document.createElement("img");

            image.setAttribute("src",imageUrl);       

            link.appendChild(image);

            link.setAttribute("href",url);          

            return link;

}

/******************************************************

* create a Iamge linked table cell

* 2011-3-1 9:27:07 heyang

******************************************************/

function createImageLinkTd(imageUrl,url){

            var cell=document.createElement("td");           

            cell.appendChild(createIamgeLink(imageUrl,url));      

            return cell;

}

/******************************************************

* create a Iamge and text cell

* 2012-1-9 10:31:31 heyang

******************************************************/

function createImageTextTd(imageUrl,text){

            var cell=document.createElement("td");           

            var image=document.createElement("img");

            image.setAttribute("src",imageUrl);

            cell.appendChild(image);  

            cell.appendChild(document.createTextNode(text));  

            return cell;

}

 

第四部分:使用步骤

步骤

说明

参照

载入这批函数

teambiz中,这一载入一般放在style.css中。

<script src="page/js/dom.js" type="text/javascript"></script>

根据实际情况使用这批函数

 

teambiz\WebRoot\page\jsp\task\sent\javascript.jsp中addDatasToTable函数,这个函数基本使用到了上面提到的所有函数。

 

第五部分:小结

使用DOM生成文字,链接,图片等元素是繁重的劳动,将它们归纳成函数有利于提高程序员的生产率,并把精力集中于更值得投放精力的方向上。

 

posted @ 2012-02-29 10:38 何杨 阅读(208) | 评论 (0)编辑 收藏

 

 

 

 

 

 

Teambiz中MyTable类

 

 

 

 

 

 

 

作者:何杨

撰写日期:2012年2月26日

版本:1.00

更新日期:  

 

 

第一部分:功能说明

帮助程序员更轻松的操作前台的表格。

第二部分:核心组件

名称

路径

说明

MyTable

teambiz\WebRoot\page\js\myTable.js

一个JavaScript类,用于操作表格。实际上,它代表的是table的tbody部分,而不包括caption,thead,tfoot。

MyTable

同上文件的同名函数

这是MyTable类的构造函数,传入tbody的id,得到表格的tbody部分。

clear

同上文件的同名函数

一次性删除tbody的所有行。

在查询开始前基本都有这一步以清除以往的数据。

removeFirstRow

同上文件的同名函数

删除tbody的第一行。

这个函数在实际中使用很少。

getRowCount

同上文件的同名函数

得到tbody中所有行的个数。

当需要计算当前显示多少行时可以用到。

appendRow

同上文件的同名函数

tbody底部添加一行,并且给奇偶行赋予不同的样式。

逐行往表格中添加数据时常用到它。

removeRow

同上文件的同名函数

删除tr的id为传入参数的行。

当删除对象成功时需要调用这一函数。

refreshRowColor

同上文件的同名函数

给奇偶行赋予不同的样式。

一般在appendRow和removeRow中被调用,外界也可主动调用。

 

第三部分:实际运用代码说明

以下代码请参见teambiz\WebRoot\page\jsp\relation\sent\javascript.jsp中search函数。

1. 得到表格并清除原有行

var userTable=new MyTable("userTable");

userTable.clear();

以上代码就是新建一个MyTable对象并清除原有行的过程,MyTable构造函数接受一个tbody的id,请与页面中tbody的实际ID相对应。

 

2. 向表格添加行

userTable.appendRow(createStartSearchRowBy("page/img/waiting.gif","开始查询已经发送的联系..."));

userTable.appendRow(createNgRowBy("没有查询到已经发送的联系."));

以上代码就是向tody中添加一个tr的过程,至于createStartSearchRowBy,createNgRowBy两个函数我们将在后文详述。

 

以上代码路径:teambiz\WebRoot\page\js\changePage.js

 

3. 向表格中添加一个完整的行。

var arr=tableDatas[i];                     

// 创建行

var row=document.createElement("tr");           

                       

// 加入复选框

var checkBox=document.createElement("input");

checkBox.setAttribute("type","checkbox");

checkBox.setAttribute("id",arr[0]);

 

var td=document.createElement("td");

td.appendChild(checkBox);                      

row.appendChild(td);        

 

row.appendChild(createTextTd(arr[1]));

row.appendChild(createTextTd(arr[2]));

row.appendChild(createTextTd(arr[3]));

row.appendChild(createTextTd(arr[4]));

row.appendChild(createTextTd(arr[5]));

row.appendChild(createTextTd(arr[6]));

 

userTable.appendRow(row);

以上代码完整显示使用DOM创建tr以及一个个td,并往td中添加对象的过程。根据实际情况的不同,我们可能会往行row中添加文本,链接,图片,图片链接等对象,TeamBiz为此类事务设计了一批函数以简化代码编写,这将在后面的文章详述。

 

以上代码位置:teambiz\WebRoot\page\jsp\relation\sent\javascript.jsp中addDatasToTable函数。

 

4.页面表格

<table class="stocktable" width="100%" cellspacing="0">

            <caption>

                        <select id="pageSizeCbo" onchange='fetchDatas(0)'>

                                    <option value="20">20</option>

                                    <option value="50">50</option>

                                    <option value="100">100</option>

                                    <option value="1000">1000</option>

                        </select>

            总记录数<span id="recordCount">0</span> 总页数<span id="pageCount">0</span> 当前第<span id="currentPage">0</span>页 <span id="pageData">0</span></caption>

            <thead>

                        <tr>

                                    <th width="28"><input type="checkbox" id="selectAllChk" onclick="selectAllCheckBox()"/></th>

                                    <th width="17%">发送用户</th>

                                    <th width="16%">接收用户</th>

                                    <th width="16%">接收用户邮件</th>

                                    <th width="16%">接收所属组名</th>

                                    <th width="16%">接收所属公司</th>

                                    <th width="16%">联系状态</th>

                        </tr>

            </thead>

            <tbody id="userTable">

                        <tr class="odd">

                                    <td colspan="40"><img src='page/jsp/relation/create/img/waiting.gif'/> 查询中,请稍候...</td>

                        </tr>

            </tbody>

             <tfoot>

                        <tr>

                                    <td colspan="40" align="right" width="100%">

                                                <div class="submitDiv">

                                                            <label for="gotoPageBtn">&nbsp;</label>

                                                            <input type='button' name='gotoPageBtn' onchange='gotoPage()' value='转到' />第<input type='text' id='pageIndexTxt' onchange='gotoPage()' size='1' />页&nbsp;页码:<span id="footPageData"></span>

                                                </div>

                                    </td>

                        </tr>

            </tfoot>

</table>

以上代码中,红色粗体部分的“userTable”就是需要往MyTable构造函数中传入的参数,而黑色粗体部分就是MyTable类诸函数实际操作的区域。

以上代码位置: teambiz\WebRoot\page\jsp\relation\sent\content.jsp

 

第四部分:使用步骤

步骤

说明

参照

载入MyTable类

teambiz中,这一载入一般放在style.css中。

<script src="page/js/myTable.js" type="text/javascript"></script>

创建MyTable对象

由于作用域的不同,这一过程可能会使用多次,但应该避免使用全局的myTable对象。

var table=new MyTable(“tableID”);

操作MyTable对象

使用teambiz\WebRoot\page\js\myTable.js中定义的多个函数操作表格对象,如果这些函数不能满足您的需求,可以参照原有行数的模式来创建新的函数。

 

 

 

 

第五部分:小结

表格是前台程序操作的主要对象之一,将表格的常用操作加以归纳综合,就形成了MyTable类,它能减少重复代码,减少出错的可能行,减轻劳动和增加代码的一致性,如果我们在编写程序时多加归纳总结,还会诞生出更多相似的类出来。

 

posted @ 2012-02-29 10:37 何杨 阅读(321) | 评论 (0)编辑 收藏

     摘要:             Teambiz中分页之前台处理               作者:何杨 撰写日期:2012年2月25日 版本:1.02 更新日期:  2012年2月27日     第一部分:功...  阅读全文
posted @ 2012-02-29 10:36 何杨 阅读(252) | 评论 (0)编辑 收藏

 

 

 

 

 

 

Teambiz中分页之后台处理

 

 

 

 

 

 

 

作者:何杨

撰写日期:2012年2月25日

版本:1.00

更新日期:  

 

 

第一部分:功能说明

分页是Web程序的常见功能之一,此文主要讲述后台对分页功能的处理。

第二部分:核心组件

名称

路径

说明

BaseService

teambiz\src\com\ibm\heyang\service\base\BaseService.java

此抽象类是诸Service类的基类,它提供了专用于分页的函数pagedSearch,用户只需传入相应的SQL语句,RequestParamMap实例和dao实例即可完成分页功能,实际上后两者一个是在AjaxAction中自动生成的,一个是Sping中配置的,因此,用户只需书写正确的查询SQL语句即可。

由于DB2数据库分页操作的特殊性,它需要分页时加入排序项,因此若数据源是DB2,那么请换用功能相似的pagedSearch4DB2函数。

JdbcDao

teambiz\src\com\ibm\heyang\dao\base\JdbcDao.java

此抽象类是诸Dao类的基类,它提供了getSqlCount,pageSearchList两个函数以实现分页功能,前者用于得到结果集的总数,后者用于取得某一页的结果集。

若数据库是DB2,请换用功能相似的pageSearchList4DB2。

 

第三部分:关键代码说明

1. BaseService中的pagedSearch函数:

public String pagedSearch(String sql,RequestParamMap paramMap,JdbcDao dao) throws Exception{

            int currentPage=Integer.parseInt(paramMap.getParamValue("start"));

            int pageSize=Integer.parseInt(paramMap.getParamValue("pageSize"));

           

            StringBuilder sb=new StringBuilder();

            sb.append("<currentPage>"+currentPage+"</currentPage>");

           

            // 取得总记录数

            long recordCount=dao.getSqlCount(sql);

            sb.append("<recordCount>"+recordCount+"</recordCount>");

           

            // 得到总页数

            long pageCount=0;

            if((recordCount % pageSize)==0){

                        pageCount=recordCount/pageSize;

            }

            else{

                        pageCount=recordCount/pageSize+1;

            }          

            sb.append("<pageCount>"+pageCount+"</pageCount>");

           

            NameValueList nvList=dao.pageSearchList(sql,currentPage*pageSize, (currentPage+1)*pageSize);

            sb.append(nvList.asXML());

           

            return sb.toString();

}

这个函数对数据库进行了两次查询,一次是取出SQL语句能得到的记录总数,一次是取出当前页的数据,另外从paramMap中取出了当前页和一页可以容纳的记录数等数据,有了这些数据,进行一点计算,就能获得前台页面需要的当前页,总记录数,页数和当前页记录等数据,最后此函数将所有数据都变换为XML格式的字符串。

 

2. JdbcDao的getSqlCount函数

public int getSqlCount(String sql) throws Exception{

            RecordCounter rc=new RecordCounter(sql,this.getJdbcTemplate());

            return rc.getCount();

}

这个类利用RecordCounter类对SQL语句进行了一定程序的处理,然后取出这个SQL语句能查询出的记录总数量,RecordCounter类代码如下:

public class RecordCounter{

            private String sql;

           

            private JdbcTemplate jdbcTemplate;

           

            /**

             * 构造函数

             * @param sql

             * @param jdbcTemplate

             */

            public RecordCounter(String sql,JdbcTemplate jdbcTemplate){

                        this.sql=sql;

                        this.jdbcTemplate=jdbcTemplate;

            }

           

            /**

             * 得到SQL语句查询到的记录数,对外的关键语句

             * @author: 何杨(heyanghy@cn.ibm.com)

             * @date : Apr 23, 2011

             * @time : 11:09:35 AM

             * @return

             */

            public int getCount() throws Exception{

                        StringBuilder sb=new StringBuilder();

                        sb.append("    select ");

                        sb.append("        count(*) as recordCount ");

                        sb.append("    from ("+sql+") t ");

                        String sql=sb.toString();

 

                        List<?> ls = jdbcTemplate.query(sql, (new IntegerRowMapper()));

                        Integer i=(Integer)ls.get(0);

                       

                        return i.intValue();

            }

}

以上代码路径:teambiz\src\com\ibm\heyang\dao\rowmapper\RecordCounter.java

 

3. JdbcDao类的fetchPageRecords和fetchPageRecords4DB2函数。

下面两个函数用于取出分页的数据,按照数据库的不同使用不同的部分或是换用不同的函数。

/**

 * 查询分页数据,如果是Oracle则放开上面一段,如果是MySql则放开下面一段

 * @author: 何杨(heyanghy@cn.ibm.com)

 * @date : Mar 29, 2011

 * @time : 3:34:44 PM

 * @param start

 * @param end

 * @param sql

 * @param mapper

 * @return

 */

protected final List<?> fetchPageRecords(int start,int end,String sql,RowMapper mapper){

            StringBuilder sb=new StringBuilder();

           

            // Oracle

            /*sb.append(" Select                              ");

            sb.append("        *                            ");

            sb.append(" from                                ");

            sb.append("        (                            ");

            sb.append("         Select                      ");

            sb.append("                t01.*,               ");

            sb.append("                rownum as newRowNum ");

            sb.append("         from                        ");

            sb.append("                (                    ");

            sb.append(sql);

            sb.append("                ) t01                ");

            sb.append("         where                       ");

            sb.append("                rownum<='"+end+"'    ");

            sb.append("        )                            ");

            sb.append(" where                               ");

            sb.append("        newRowNum>'"+start+"'        ");*/

           

            // MySql

            sb.append(sql+" limit "+start+","+(end-start));

            String sql2=sb.toString();

           

            return this.getJdbcTemplate().query(sql2,mapper);

}

 

/**

 * 专门为DB2制作的查询分页数据,特殊的地方是比上面的函数多了一个Order by

 * @param start

 * @param end

 * @param sql

 * @param orderBy

 * @param mapper

 * @return

 */

protected final List<?> fetchPageRecords4DB2(int start,int end,String sql,String orderBy,RowMapper mapper){

            StringBuilder sb=new StringBuilder();

           

            // Db2

            sb.append(" Select                              ");

            sb.append("        *                            ");

            sb.append(" from                                ");

            sb.append("        (                            ");

            sb.append("         Select                      ");

            sb.append("                table01.*,               ");

            sb.append("                ROW_NUMBER() OVER(ORDER BY "+orderBy+" ) AS ROWNUM ");

            sb.append("         from                        ");

            sb.append("                (                    ");

            sb.append(sql);

            sb.append("                ) table01 )               ");

            sb.append("         where                       ");

            sb.append("                ROWNUM >"+start+" and ");

            sb.append("                ROWNUM <="+end+" ");

 

            String sql2=sb.toString();

            return this.getJdbcTemplate().query(sql2,mapper);

}

 

第四部分:使用步骤

步骤

说明

参照

Dao类中编写需要进行分页查询的SQL语句,并用函数进行包装。

建议对SQL进行良好的整形。

teambiz\src\com\ibm\heyang\dao\RelationDao.java中的getSentRelationSql函数。

Service类中撰写调用dao中的分页查询函数

teambiz\src\com\ibm\heyang\service\RelationService.java中的pagedSearchMySentRelation函数。

Action中调用Service中的分页查询函数

如果需要在paramMap中增加新的参数,可以使用com.ibm.heyang.action.base.RequestParamMap类的addParam函数

teambiz\src\com\ibm\heyang\action\relation\SearchSentRealationAction.java类

 

第五部分:小结

后台的分页处理,实际上需要程序员动脑筋的地方就是SQL语句的编写,其它都是固定模式的操作,TeamBiz通过BaseService和JDBCdao两个类中相应函数的帮助,固化了这些固定的部分,程序员只要正确调用即可,这在一定程度上减轻了程序员的工作量,降低了人为出错的可能。

 

通过不同分页SQL语句的采用,TeamBiz能适应三种数据库,Oracle,MySQL和Db2,如果要增添更多数据库的支持,对分页SQL进行改写即可。

 

posted @ 2012-02-29 10:35 何杨 阅读(256) | 评论 (0)编辑 收藏

 

 

 

 

 

 

Teambiz中三种特殊RowMapper的使用

 

 

 

 

 

 

作者:何杨

撰写日期:2012年2月25日

版本:1.00

更新日期:

 

 

 

第一部分:功能说明

针对特殊目的的查询,TeamBiz提供了一系列的RowMapper类以减轻程序员的劳动。

第二部分:核心组件

名称

路径

说明

IntegerRowMapper

teambiz\src\com\ibm\heyang\dao\rowmapper\IntegerRowMapper.java

只需进行数量查询时,如select count(*) from tb,明确只会返回一行一列,这时建议使用这个类。

StringRowMapper

teambiz\src\com\ibm\heyang\dao\rowmapper\StringRowMapper.java

当只查询一列时,如select a from table,建议使用这个类。

UserRowMapper

eambiz\src\com\ibm\heyang\dao\rowmapper\UserRowMapper.java

当需要从JDBCTemplate查询到的链表中取出对象时,建议仿照这个类制作自己的RowMapper类

 

第三部分:各种RowMapper类的具体使用

1. IntegerRowMapper。

StringBuilder sb=new StringBuilder();

sb.append("    select ");

sb.append("        count(*) as recordcount");

sb.append("    from teambiz_menu");

String sql=sb.toString();

List<?> ls=this.getJdbcTemplate().query(sql, new IntegerRowMapper());

Integer count=(Integer)(ls.get(0));

以上代码路径:teambiz\src\com\ibm\heyang\dao\MenuDao.java中isNoMenu函数。

 

2. StringRowMapper

StringBuilder sb=new StringBuilder();

sb.append("    select");

sb.append("        t01.group_name");

sb.append("    from");

sb.append("        sys_group");

sb.append("        t01,");

sb.append("        sys_user");

sb.append("        t02");

sb.append("    where");

sb.append("        t01.groupid=t02.groupid");

sb.append("        and");

sb.append("        t02.userid="+userid+"");

String sql=sb.toString();

 

// 查询

List<?> ls = this.getJdbcTemplate().query(sql,new StringRowMapper());

最后得到的ls就是一个包含字符串元素的链表,要取值对其进行遍历即可。

3. UserRowMapper的使用示例

StringBuilder sb=new StringBuilder();

sb.append("    select ");

sb.append("          ID, ");

sb.append("          name, ");

sb.append("          email, ");

sb.append("          pswd, ");

sb.append("          groupName, ");

sb.append("          companyName,");

sb.append("          level");

sb.append("    from teambiz_user");

sb.append("    where name='"+name+"' and ");

sb.append("          pswd='"+pswd+"' ");

String sql=sb.toString();

 

List<?> ls = this.getJdbcTemplate().query(sql, (new UserRowMapper()));

 

if(ls.size()==1){

            return (User)ls.get(0);

}else{

            throw new Exception("用户名或密码错误!");

}

以上代码路径:teambiz\src\com\ibm\heyang\dao\UserDao.java中的getUserByNamePswd函数。

 

第四部分:小结

对数据库进行各种查询是程序员的常见任务之一,如果能适当运用以上类,能减少代码的重复程度及减轻他们的劳动强度。

posted @ 2012-02-29 10:34 何杨 阅读(367) | 评论 (0)编辑 收藏

 

 

 

 

 

 

Teambiz中从Sql到XML的转化过程

 

 

 

 

 

 

 

作者:何杨

撰写日期:2012年2月23日

版本:1.00

更新日期:2012年2月24日

 

 

第一部分:功能说明

将后台编写的SQL语句,向数据库请求后获得的数据,整理成XML格式的文本。

第二部分:核心组件

名称

路径

说明

JdbcDao

com.ibm.heyang.dao.base.JdbcDao

此类中的fetchRecords函数用来取得数据库中的数据,

NameValueRowMapper

com.ibm.heyang.dao.rowmapper.NameValueRowMapper

此类用于将进行数据库查询得到的行集转化为一个NameValue链表对象。

NameValue

com.ibm.heyang.domain.NameValue

此类用于存储行集中某字段的名称和值,在将对象链表转化为XML的过程中使用了它的函数asXML()。

NameValueList

com.ibm.heyang.domain.NameValueList

内含一个链表,用于容纳NameValue对象链表,在将对象链表转化为XML的过程中使用了它的函数asXML()。

 

第三部分:从SQL语句向XML的转化过程
NameValueRowMapper负责查询结果集一个行的转换,对于其中的每个字段,会形成一个字段名和字段值的NamaValue对象,然后放到一个类型为List<NameValue>的链表中。最终,这个链表对应着这个行集,链表里面的每个元素对应着一个字段(包含其名及值)。

NameValueList用于容纳每个行形成的链表,它本身和查询结果集是对应的。

得到最终的NameValueList之后,调用其asXML方法,将遍历其中的每个元素,得到行集链表,再遍历其中的NameValue对象,再调用每个对象的asXML函数,得到XML文本。

以下展示了两个关键函数:

NameValueList对象的asXML函数如下:

public String asXML() {

            StringBuilder sb=new StringBuilder();    

            for(Object obj:list){

                        List<NameValue> ls=(List<NameValue>)obj;              

                        sb.append("<node>");

                        for(NameValue nv:ls){

                                    sb.append(nv.asXML());

                        }

                        sb.append("</node>");

            }

            return sb.toString();

}

以上粗体部分是每个行的标志,在前台页面对XML进行解析时还要使用到它,这已经形成了前后台之间的一个约定。

NameValue对象的asXML函数如下:

public String asXML() {

            StringBuilder sb=new StringBuilder();

            sb.append("<"+name+">");

            sb.append(StringUtils.isBlank(value)?"-":value);

            sb.append("</"+name+">");       

            return sb.toString();

}

第四部分:效果展示

SQL语句示例:

select text, url, level from teambiz_menu where level<=2 order by level

使用SQL语句从数据库查询出来的结果集:


最终得到的XML文本:

<node>

            <text>登出</text>

            <url>Logout.do</url>

            <level>0</level>

</node>

<node>

            <text>修改自己信息</text>

            <url>Goto.do?page=/page/jsp/user/modify/index.jsp</url>

            <level>1</level>

</node>

<node>

            <text>建立联系</text>

            <url>Goto.do?page=/page/jsp/relation/create/index.jsp</url>

            <level>1</level>

</node>

<node>

            <text>我发出去的联系</text>

            <url>Goto.do?page=/page/jsp/relation/sent/index.jsp</url>

            <level>1</level>

</node>

<node>

            <text>发给我的联系</text>

            <url>Goto.do?page=/page/jsp/relation/received/index.jsp</url>

            <level>1</level>

</node>

<node>

            <text>创建任务</text>

            <url>Goto.do?page=/page/jsp/task/create/index.jsp</url>

            <level>1</level>

</node>

<node>

            <text>我发出去的任务</text>

            <url>Goto.do?page=/page/jsp/task/sent/index.jsp</url>

            <level>1</level>

</node>

<node>

            <text>发给我的任务</text>

            <url>Goto.do?page=/page/jsp/task/received/index.jsp</url>

            <level>1</level>

</node>

<node>

            <text>今日待办任务/已办任务</text>

            <url>Goto.do?page=/page/jsp/task/tododone/index.jsp</url>

            <level>1</level>

</node>

<node>

            <text>用户管理</text>

            <url>#</url>

            <level>2</level>

</node>

 

第五部分:使用步骤

步骤

说明

参照

编写SQL语句

编写一个正确的查询语句,建议使用SqlToolBox进行整形工作。

com.ibm.heyang.dao.MenuDao中的函数getMenuByUserLevel中的SQL语句。

使用fetchRecords函数得到结果集。

这个函数处于com.ibm.heyang.dao.base.JdbcDao类中,无需改动,只需要传入正确的sql语句和RowMapper即可。

com.ibm.heyang.dao.MenuDao中的函数getMenuByUserLevel中的List<?> ls=super.fetchRecords(sql,new NameValueRowMapper());一句。

将结果集用NameValueList包装起来

将结果集传入NameValueList类的构造函数即可。

com.ibm.heyang.dao.MenuDao中的函数getMenuByUserLevel中的return new NameValueList(ls);一句。

将结果集转化为XML

使用NameValueList类的asXML函数。

com.ibm.heyang.service.MenuService的getMenuByUserLevel函数。

 

第六部分:小结

编写SQL语句并将其转化为前台可以辨识的格式是程序员的主要工作负担,采用以上方式的好处有:

1.整个过程中,一个函数fetchRecords和三个对象NameValueRowMapper,NameValue,NameValueList都是系统提供的,程序员无需编码,而只需把SQL语句写好,放到DAO类的一个函数中就可以了。

2.任何查询类的SQL语句,无论字段类型如何,都可以用如上方式处理。

3.如果有特殊的查询方式,com.ibm.heyang.dao.rowmapper下还提供了很多类供使用,如针对select count(*) from tb的IntegerRowMapper类,针对select * from tb where id=XX 的MapRowMapper类,及将将一行记录转化成一个包含键值对的链表的StringRowMapper等,用户也可参照UserRowMapper来书写自己的RowMapper类。这些类的使用将给编码带来较大遍历,关于它们将另行文详述。

posted @ 2012-02-29 10:32 何杨 阅读(204) | 评论 (0)编辑 收藏

 

 

 

 

 

 

Teambiz中前台页面对XHR对象从后台取回的XML的处理

 

 

 

 

 

 

 

作者:何杨

撰写日期:2012年2月24日

版本:1.00

更新日期:2012年2月25日

 

 

第一部分:功能说明

XHR从后台得到XML文本后,使用DOM对其进行解析。

第二部分:核心组件

名称

路径

说明

Ajax.Request

teambiz\WebRoot\page\js\prototype-1.6.0.3.js

Prototype提供的Ajax请求对象,它将被用来想后台发出异步请求并获取反馈。

ajaxObj

它就是XMLHttpRequest对象(简称XHR)。

ajaxObj.responseText

XHR对象获得的反馈文本,在需要查看反馈的XML时会用到它。

ajaxObj.responseXML

XHR对象获得的反馈XML,也是前端需要解析的数据来源。

status

反馈XML第一个status节点的值,当它为ok是意味着顺利得到了后端传来的信息;当它为ng意味着前后端通道是通畅的,但由于某种原因不能获得想要的数据,这个原因可能是用户缺乏权限,后端组件未准备好,后他SQL调用出现异常或是运行异常。这个变量需要在前后端有固定约定才能发挥功用。

arr

包含反馈XML中所有node节点的数组。它也依赖于前后端有固定的约定。这是一个临时变量,真正发挥功用的是tableDatas。

tableDatas

它本身是一个数组,而内部元素也是一个数组,正如其名称描述的那样,它是一个表格形式的数据,它的“行”相当于SQL查询结果集的行,它的“列”相对于结果集的字段值集合,它的“单元格”就是数据。

之所以采用这个对象是因为在使用上相对于arr更加方便,进行一次遍历再通过数组下标就能访问到每个数据。

 

第三部分:三种前台对取回XML的处理

1.如果前台仅需status一个量。

有时,前台仅需status就能进行判定后台是否实现了自己的目的,如进行登录,变更等操作,对status直接进行判断即可,对后台进行CUD操作常会这样处理,示例代码如下:

new Ajax.Request(url,{    

               method:'get',    

               onSuccess: function(ajaxObj){   

                                    // alert(ajaxObj.responseText);

                                    hideLoadingWnd();

                                      

                                    var status=ajaxObj.responseXML.getElementsByTagName("status")[0].firstChild.data;

                                   

                                    if(status=="ok"){

                                                window.location.href="Goto.do?page=/page/jsp/task/tododone/index.jsp";

                                    }

                                    else{

                                                // 返回错误信息

                                                hideLoadingWnd();

                                               

                                                var text=ajaxObj.responseXML.getElementsByTagName("text")[0].firstChild.data;

                                                alert(text);

                                    }

               },    

               onFailure: function(){

                                    hideLoadingWnd();

                                    alert("服务器没有响应.");                                         

               }  

            }

);

以上代码所在路径:teambiz\WebRoot\page\jsp\user\login\javascript.jsp中submitForm函数。

 

2.如果前台需要按照节点名称取出传回XML的值。

有时,前台需要明确取出某个名称的节点值(意图获得后台处理的状态),这时可以如同取出status的值一样,从ajaxObj中取出想要的值,示例代码如下:

var currentPage=ajaxObj.responseXML.getElementsByTagName("currentPage")[0].firstChild.data;

var recordCount=ajaxObj.responseXML.getElementsByTagName("recordCount")[0].firstChild.data;

var pageCount=ajaxObj.responseXML.getElementsByTagName("pageCount")[0].firstChild.data;

// 设置分页数据

setPage(recordCount,currentPage,pageCount);         

以上代码路径:teambiz\WebRoot\page\jsp\task\sent\javascript.jsp中search函数。

3.如果前台需要表格形式的数据

对后台的查询操作常进行这种处理,这时需要用到系统转化出来的tableDatas对象,示例代码如下:

/*****************************************************

* 取得后方菜单

* 何杨,2012年2月7日11:40:34

*****************************************************/

function fetchMenuFromBg(){

            $("menuBar").innerHTML="";

           

            // 组合URL

            var url=encodeURI('FetchMenu.do?');

            url=encodeURI(url);           

            // 发出Ajax请求

            new Ajax.Request(url,{    

           method:'get',    

           onSuccess: function(ajaxObj){  

                // alert(ajaxObj.responseText);

                var status=ajaxObj.responseXML.getElementsByTagName("status")[0].firstChild.data;               

                                                if(status=="ok"){

                                                            // 找到所有节点放入数组

                                                            var arr=ajaxObj.responseXML.getElementsByTagName("node");

                                                            if(arr.length==0){

                                                                        alert("没有得到返回数据.");

                                                            }                                                          

                                                            var tableDatas=new Array();                                 

                                                            // 遍历这个数组

                                                            for(var i=0;i<arr.length;i++){

                                                                var node=arr[i];

                                                                        var arr2=new Array();

                                                                        for(var j=0;j<node.childNodes.length;j++){

                                                                            var child=node.childNodes.item(j);                                                                 arr2.push(child.childNodes[0].nodeValue);

                                                                        }

                                                                        // 向表格中添加行

                                                                        tableDatas.push(arr2);

                                                            }                                                          

                                                            // 显示菜单

                                                            showMenu(tableDatas);

                                                }

                                                else{

                                                            var text=ajaxObj.responseXML.getElementsByTagName("text")[0].firstChild.data;

                                                            alert(text);

                                                }

           },    

           onFailure: function(){

                        hideLoadingWnd();

                                                alert("服务器没有响应.");                                         

           }  

        }

           );

};

 

/*****************************************************

* 显示菜单

* 何杨,2012年2月7日14:03:43

*****************************************************/

function showMenu(tableDatas){

            var ul=document.createElement("ul");  

            for(var i=0;i<tableDatas.length;i++){

                        var arr=tableDatas[i];

                        var text=arr[0];

                        var url=arr[1];                      

                        var link=document.createElement("a");

                        link.appendChild(document.createTextNode(text));

                        link.setAttribute("href", url);

                       

                        var li=document.createElement("li");

                        li.appendChild(link);

                        ul.appendChild(li);

            }          

            $("menuBar").appendChild(ul);    

}

以上代码路径:teambiz\WebRoot\page\js\common.js,其中tableDatas的产生用getTableDatasFromArr进行了一定程度的简化。

 

第四部分:使用步骤

步骤

说明

参照

编写向后端发起请求的函数

请参照上面的fetchMenuFromBg函数书写新函数,主要需要修改的地方在URL和处理tableDatas的函数,其它部分无需变化。

teambiz\WebRoot\page\js\common.js中的fetchMenuFromBg函数。

编写处理tableDatas的函数(可选)

遍历方式请参照上面的showMenu函数,取得数据后进行DOM操作需要自行处理。

teambiz\WebRoot\page\js\common.js中的showMenu函数。

 

第五部分:小结

在前后台有一定约定的前提下(status,node),通过一系列对象的配合,我们轻松完成从SQL查询结果集到前台能使用的结果集的转换,这些对象及其使用方法绝大多数都是固定的或是仅需稍加改变的,程序员主要需要考虑的是最初的SQL语句和最终的DOM处理过程,中间只用按部就班的完成装配工作。

这种方式的优势在于:

1.减轻了编码量,同时也减少了出错的可能。

2.易用,因为SQL相对于HQL更容易被人接受。

3.比页面循环标签更具表现性。

这种方式的主要缺点在于:

1. JS和DOM操作需要程序员加以小心。

2.如果字段含有特殊字符可能会造成XML解析异常,但对此无需过于担心,需要注意的多在备注这样的字段中,可以在需要特殊处理再进行处理。

posted @ 2012-02-29 10:32 何杨 阅读(272) | 评论 (0)编辑 收藏

仅列出标题
共28页: First 上一页 4 5 6 7 8 9 10 11 12 下一页 Last