通过ajax实现参数的动态过滤

在参数表单中支持参数的动态过滤,即选择省份后,再选择城市时,城市所在单元格会动态过滤出当前省内的城市,供用户选择,提高客户的参数选择速度。实现方式是取出所有数据,然后通过js来实现,这样当数据量比较大时,性能是一个不得不考虑的问题,同过ajax的异步处理方式能很好解决这一问题。

实现方法:

1、通过设计器制作参数模板文件:

B2单元格设置为下拉数据集,选择地区字段,C2单元格数据类型设置成html,里边输入

<SELECT width=’500′ name=’skill’ id=’skill’><OPTION value=’0′></OPTION>                         </SELECT>

要想实现B2单元格数据变后调用相应处理方法,必须在增加一个对B2单元格的监听,在A5单元格的自动计算中输入:Change_Select(B2),及当点击B2时,调用该js函数进行相关处理。

2jsp页面的代码

jsp中增加该js函数,并实现相关功能

function Change_Select(arg1){                  

            var url=”select?id=”+arg1;

              if(window.XMLHttpRequest)

            {  req=new XMLHttpRequest();

            }else if(window.ActiveXObject)

            {

  req=new ActiveXObject(“Microsoft.XMLHTTP”);

            }           

            if(req)

            {

                req.open(“GET”,url,true);

                req.onreadystatechange=callback;

                req.send(null);

            }

                   }

页面得到相关值后,将值传给servlet后台计算,然后取出值放到页面端展现。

try

        {

            con = ctx.getConnectionFactory(ctx.getDefDataSourceName()).getConnection();

            stmt = con.createStatement();

        }

        catch(Exception e)

        {

            e.printStackTrace();

        }

        String targetId = request.getParameter(“id”).toString();

        String sql = (new StringBuilder(“select distinct 城市 from 客户 where 地区=’”)).append(targetId).append(“‘”).toString();

        try

        {

            rs = stmt.executeQuery(sql);

        }

        catch(SQLException e)

        {

            e.printStackTrace();

        }

将编译后的servlet放到WEB-INF/classes目录下,并在web.xml中注册

       <servlet>

    <servlet-name>SelectServlet</servlet-name>

    <servlet-class>com.SelectServlet</servlet-class>

  </servlet>

 

  <servlet-mapping>

    <servlet-name>SelectServlet</servlet-name>

    <url-pattern>/select</url-pattern>

  </servlet-mapping>

这样就能在页面上选择地区后,城市所在单元格能按照所选地区列出相应城市供用户选择,由于用到的是异步处理方式,所以性能上会大大提升。

热门文章