手工实现Dojo配合Struts的级联选项功能

级联选项功能，很多时候当我们的分类有2层以上的时候，就需要引入级联选项了。下面我说说我自己手工实现的一个dojo+Struts的级联选项。

首先需要有页面部分：

<script type="text/javascript" src="../../../dojos/dojo.js"></script>
   <script type="text/javascript">
    dojo.require("dojo.widget.*");//导入包
    var a;//变量，用于转换一下页面元素的值。
    var b;//变量，用于转换一下页面元素的值。注：这2个变量好像必须要设置一个，不然当使用dojo.byId().value获取元素值得时候是无法直接给另一个元素赋值的。

    function getSubcategoryMethod() {//获取子分类的函数
     a = dojo.byId("selectedCgId").value;//获取选择的父分类ID
     dojo.byId("cgvalue").value = a;//给显示的元素赋值，用于在页面上能看到结果
      dojo.io.bind({//这个就是dojo的Ajax函数了
       encoding : 'UTF-8',//编码方式
       url : '../../../cascadeCategory.do',//请求地址
       method : 'POST',//传递方法
       handler : function(type, data, evt) {//代理函数
        if (type == 'error') {//当服务器错误的时候输出资源文件中的信息
         dojo.byId('subcategorySelect').innerHTML = '<bean:message key="exception.002"/>';
        } else {
         dojo.byId('subcategorySelect').innerHTML = data;//将输出后台数据
        }
       },
       content : {
        selectedCgId : dojo.byId("selectedCgId").value//传输的参数和值
       }
      });
    };
   
    function changeValueMethod(){//这个方法很重要，当后台的Action将数据传输到前台时，dojo可以完全获取，如果是HTML标签，也能输出效果。我就是利用了这个特性
     b = dojo.byId("selectedScgId").value;//将子分类的选择ID保存到变量
     dojo.byId("scgvalue").value = b;//将变量的值显示在页面元素上
    }
   </script>

注：上面的是脚本部分

<td>
       <%
        List<Categories> lc = (List<Categories>) request.getSession()
          .getAttribute("lc");
       %>

//这里只是一个循环显示父类的下拉列表，注意这个地方有个问题，就是Struts的迭代标签好像不支持集合类型有不同的情况，不如 List<categories>下面有Set<Subcategoies>这样的集合，好像无法循环迭代出来，只能通过用脚本 的方式循环。
       <select id="selectedCgId" οnchange="getSubcategoryMethod()">
        <%
         for (Categories c : lc) {
        %>
        <option value="<%=c.getId()%>" label="<%=c.getName()%>" />
         <%
          }
         %>
       
       </select>
       <div id="subcategorySelect"></div>//这个用于显示自分类的下拉列表
      </td>
      <td>
       <input type="text" id="cgvalue">//输出父分类的ID
      </td>
      <td>
       <input type="text" id="scgvalue">//输出子分类的ID
      </td>

这些是需要显示的部分，我这里只截取主要部分代码。

下面是action部分了

public class CascadeCategoryAction extends BaseAction {

public ActionForward execute(ActionMapping mapping, ActionForm form,
    HttpServletRequest request, HttpServletResponse response)
    throws IOException, ServiceException {
   Integer cgId = Integer.parseInt(request.getParameter(
     "selectedCgId").toString().trim());//获取父分类的ID
   Categories c = this.serviceManager.findCategoryById(cgId);//查询出子分类的集合
   StringBuilder data = new StringBuilder();//通过stringbuilder对象组合字符串
   data.append("<select id='selectedScgId' οnchange='changeValueMethod();return false'>");核心的地方在这里，通过调用js函数实现获取用户的选择
   for (Iterator i = c.getSubcategorieses().iterator();i.hasNext();){
    Subcategories s = (Subcategories)i.next();
    data.append("<option value='"+s.getId()+"' label='"+s.getName()+"' />");
   }
   data.append("</select>");
   response.getWriter().write(data.toString());//最后将生成的下拉列表传给dojo接收

   return null;
}
}

总结一下：大体思路就是，利用dojo的ajax功能将用户选择的父分类ID传输给Action，后台的Action获取到父分类ID后查询数据 库，获取子分类的集合，通过stringbuilder组合字符串，动态生成下拉列表，生成的字符串直接传给dojo接收，显示在页面上，当用选择子分类 的时候触发js函数，将用户选择的子ID显示在页面上。思路就是这样，可能大家看不明白，但自己理清了思路要实现这样的功能也不是什么难事。