Jsp页面上的下拉框代码按照如下格式写:
用bug模块的无限联动效果实例:
在select中添加onchange事件οnchange="buildSelect(this.value, 'selB','/bug/LgpBug_searchAssign.action?parentId=')"。其中url为产生下拉值集合的action。在框架中buildSelect函数实现如下:
function buildSelect(selectId,childId,url){
if (selectId == "") { //selectId为空串表示选中了默认项
clearOptions(document.getElementById(childId)); //清除目标列表及下级列表中的选项
document.getElementById(childId).onchange();
return; //直接结束函数调用,不必向服务器请求信息
}
targetId = childId;
var pars = "";
url = url+ selectId;
var myAjax = new Ajax.Request(
url,
{
method: 'get',
parameters: pars,
onComplete: afterSelect
});
}
this.value的值最终会拼接到url上,所以parentId的值为this.value的值。在action中获得parentid的值后进行操作
使用ajax提交数据后回传数据进行数据处理,数据格式采用json串的格式
function afterSelect(originalRequest){
//alert(originalRequest.responseText);
var optionsInfo = JSON.parse(originalRequest.responseText); //将从服务器获得的文本转为对象直接量
var targetSelNode = document.getElementById(targetId); //得到下级对象
clearOptions(targetSelNode); //清除目标列表中的选项
if(optionsInfo == null){
return;
}
//遍历对象直接量中的成员
for(var i=0; i < optionsInfo.list.length; i++){
targetSelNode.appendChild(createOption(optionsInfo.list[i].menuId, optionsInfo.list[i].menuName)); //在目标列表追加新的选项
}
targetSelNode.onchange();
}
//根据传入的value和text创建选项
function createOption(value, text) {
var opt = document.createElement("option"); //创建一个option节点
opt.setAttribute("value", value); //设置value
opt.appendChild(document.createTextNode(text)); //给节点加入文本信息
return opt;
}
//清除传入的列表节点内所有选项
function clearOptions(selNode) {
selNode.length = 1; //设置列表长度为1,仅保留默认选项
selNode.options[0].selected = true; //选中默认选项
}
注意:targetId是js中的全局变量。在js中处理返还的json数据,转换为对象类型变量后在js中遍历展示添加到option中。
在action中
public String searchAssign(){
String parentId=this.getRequest().getParameter("parentId");
List list=lgpBugService.searchAssign(parentId);
String str=JSONUtil.getJsonString(list);
try {
this.getResponse().setCharacterEncoding("utf8");
this.getResponse().getWriter().write(str);
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
获得产生的数据对象添加到response中。注意必须设置response的编码方法,因为ajax的request提交用的是get方法,存在乱码问题。
service层:
public List searchAssign(String parentId){
return lgpBugDao.searchAssign(parentId);
}
dao层:
public List searchAssign(String parentId){
String sql="select new com.luguang.bug.model.LgpBugExtends(c.userId,c.userAlias)from LgpProject as a ,LgpProjectGroup as b ,LgmUser as c where 1=1"
+" and a.projectId=b.projectId "
+" and b.userId=c.userId";
List userList=new ArrayList
userList=this.getHibernateTemplate().find(sql);
return userList;
}
其中的LgpBugExtends类定义如下:
public class LgpBugExtends extends BaseEntity{
private Long menuId;
private String menuName;
public Long getMenuId() {
return menuId;
}
public void setMenuId(Long menuId) {
this.menuId = menuId;
}
public String getMenuName() {
return menuName;
}
public void setMenuName(String menuName) {
this.menuName = menuName;
}
public LgpBugExtends(Long menuId, String menuName) {
super();
this.menuId = menuId;
this.menuName = menuName;
}
public LgpBugExtends() {
super();
}
public LgpBugExtends(Long menuId) {
super();
this.menuId = menuId;
}
}
在定义该类时必须提供menuId,menuName属性,因为在jsp中处理json数据时访问的就是这两个属性,用来设置下拉框的listkey和listvalue属性。
返还的json数据格式如下:
list:{{menuId:id1,menuName:name1},{menuId:id2,menuName:name2},{},{}}所以必须按照这种数据格式来设计添加到下拉框中的类对象。