使用dwr实现下拉框级联和js实现动态选择option的selected状态方法总结

最新推荐文章于 2022-05-07 15:53:01 发布

lgm277531070

最新推荐文章于 2022-05-07 15:53:01 发布

阅读量5.2k

点赞数

分类专栏： js、dwr、ajax、jquery、extjs 文章标签： dwr callback iterator bean jsp session

本文链接：https://blog.csdn.net/lgm277531070/article/details/4749175

版权

js、dwr、ajax、jquery、extjs 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一。第一次使用dwr，原因是需要实现级联。第一次用js动态实现option的selected的方法，整蛊了2天总算把这些问题给解决。

1.配置web.xml

<servlet> <servlet-name>dwr-test</servlet-name> <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class> <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param> <init-param> <param-name>scriptCompressed</param-name> <param-value>false</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>dwr-test</servlet-name> <url-pattern>/dwr/*</url-pattern> </servlet-mapping>

2.看jsp页面：

<mce:script type="text/javascript" src="<%=path %></mce:script> <mce:script type="text/javascript" src="<%=path %></mce:script> <mce:script type="text/javascript" src="<%=path %></mce:script>

这些必须加上而且路径要是这样不能变：/dwr/interface/ 。而menu.js中的menu下面会讲到。是你要调用javabean时js的代表了。当然如果你jsp页面要用到它去调用javabean方法就写，不用它可以不写的（当然你既然用dwr那肯定是最少要使用一个了。如果要用到好多这样的就要把他们都写出来）而其他的就照抄就行....

3.还看jsp页面：

<select id="flabel1" name="tcardGreetings.flabel1" οnchange="queryflabel2()"> <s:iterator value="tshareTreeModel" id="id"> <s:iterator value="#id"> <s:if test="ftitle==flabel1Title"> <option value="${fid }" selected="selected">${ftitle } </option> </s:if> <s:else> <option value="${fid }" >${ftitle } </option> </s:else> </s:iterator> </s:iterator> </select> <select id="flabel2" name="tcardGreetings.flabel2" > </select>

该页面是使用struts2标签循环遍历option。flabel1数据先通过actionsupport读取出来。而flabel2则需要通过选择flabel1读取相应的数据来。实现的方法是通过dwr来使用js调用javabean。当然事先要导入dwr.jar包，然后在web-inf下面加入dwr.xml配置。

4.看具体配置：

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd"> <dwr> <allow> <create creator="spring" javascript="menu"> <param name="beanName" value="tCardGreetingsDwr" /> </create> <convert converter="bean" match="com.hxw.card.entity.TshareTree" /> </allow> </dwr>

因为本人是使用ssh2框架，所以dwr要调用的类也直接使用pring的管理。create标签中creator值和param中name值不能改变，javascript的值就是你要通过js来引用javabean的对象。value值tCardGreetingsDwr是你sping配置文件中配置的bean。convert标签中converter的值也不能变，要修改的就是match就可以了。该配置是控制器的意思，就是你在用js调用javabean中属性值的那个javabean。比如你要通过js取出属性M，而M是A类的属性，你就要将A类放在控制器里面了，否则会报错提示没有A类的converter。

pring的bean：

TCardGreetingsDwr类（TshareTree不用说也知道吧，放在entity包内呵呵...）：

public class TCardGreetingsDwr extends HibernateDaoSupport { @SuppressWarnings("unchecked") public List send(int parentId){ List list = new ArrayList(); Session session = this.getSession(); list = session.createQuery("select t from TshareTree t where fParentID = ? order by fOrder").setParameter(0, parentId).list(); if(session != null){ if(session.isOpen()) session.close(); } return list; } }

记得关闭session哦！，里面方法要有返回值的，要返回给js的。

这些弄好了就可以整js了。

<mce:script type="text/javascript"></mce:script>

当我们选择label1的时候触发queryflabel2()方法，${"flabel1"} 就是select的那个对象后面加个.value当然就是指它的值了。看到那个menu没有，就相当于TCardGreetingsDwr 类了，而flabel1Id就是要传入的参数，后面那个flabel2Callback方法是下面的方法，但是下面那个方法有参数，其实flabel2Callback就已经把参数传给了flabel2s了，所以flabel2s就是那个send方法的返回值list了。因为list里面存的是TshareTree里面的值，而我们要的就是要获取TshareTree里面的属性。这就为什么要加个converter了。

好了整个级联操作就这样实现了，好像没漏掉什么吧...

二.用js实现动option动态选择selected状态

在刚才配置的基础上实现label1的动态选择,上面的jsp代码已经把这功能实现了.在这里只是说明下flabel1Title是通过ActionSupport传递过来的值,而ftitle则是通过menu调用javabean传递过来的属性.只要判断这两个值相等就给selected就行.而label2则不能用这种方法,因为label2的option那些控件都是通过js代码生成的,也就是页面里面就只有:

<select id="flabel2" name="tcardGreetings.flabel2" ></select>这样代码了。所以上述方法行不通。因为label2的所有值要通过label1做出选择，也就意味着要先获取label2的所有值才能去判断是否等于指定值。而获取label2所有值就在flabel2Callback方法里面，而直接调用这个方法也肯定不行，因为要传递一个参数过去。所以我想到的就是onload方法，在body里面添加：οnlοad="queryflabel2()" ，这样就实现了打开页面就可以直接读取label2的值而不用要通过label1去读取了，接下来就是实现动态selected了。在jsp页面添加一个hidden隐藏域：

<input type="hidden" id="flabel2Title" value="${flabel2Title }" /> value值就是要传给label2的selected状态的值。也是由ActionSupport传递过来。然后要修改的就是flabel2Callback方法了。

修改后的js：

就这样打开页面就能直接显示要显示的数据了。这样的方法用于修改数据的页面很有效果的。