该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

Java实现Layui的form表单动态绑定下拉框

【1】视图层

立即提交

重置

$(function () {

//【1】加载&初始化layui模块-弹出层与table数据表格

layui.use(["layer","form"], function () {

varlayer = layui.layer;

var form= layui.form;

});

//取消异步

$.ajaxSettings.async = false;

addoption();//下拉框绑定

//开启异步

$.ajaxSettings.async = true;

});

//下拉框绑定

function addoption(){

$.post("${ctx}/web/UserInforServlet",{"method":"selectHobby"}, function (obj) {

console.log(obj);

$("#hobbyID").empty();

$("#hobbyID").append("" + "----请选择----" + "");

for ( var i = 0; i

$("#hobbyID").append("" + obj.data[i].hobby + "");

//每次动态添加下拉框都要重新手动渲染一次

form.render();

}

},"json");

}

1)使用getJSON返回的数据是object的对象

2)使用ajax返回的数据是字符串类型

3)可以使用JSON.parse将字符串转换成对象

data=JSON.parse(data);

【2】控制器

注意我引用json-lib-2.4-jdk15.jar将数据转换为json格式

@WebServlet("/web/UserInforServlet")

publicclass UserInforServlet extends HttpServlet{

private IuserService is=new UserServiceImpl();

publicvoid doGet(HttpServletRequest request,HttpServletResponse response)throws IOException {

this.doPost(request, response);

}

publicvoid doPost(HttpServletRequest request,HttpServletResponse response) throws IOException {

String method= request.getParameter("method");

if("selectHobby".equals(method)){

System.out.println("selectHobby");

selectHobby(request,response);

}

}

publicvoid selectHobby(HttpServletRequest request,HttpServletResponseresponse) throws IOException {

//【1】设置编码

request.setCharacterEncoding("utf-8");

response.setCharacterEncoding("utf-8");

response.setContentType("text/html;charset=UTF-8");//处理响应编码

List lists=is.selectHobby();

PrintWriter out =response.getWriter();

//转换json格式数据

JSONObject jsonObj=new JSONObject();

jsonObj.put("data",lists);

out.write(jsonObj.toString());

out.flush();

out.close();

}

}

【3】Layui动态绑定下拉框不能显示的问题

1)Layui动态绑定下拉框不能显示的原因：

layui表单模块的表单元素：select、checkbox、radio都是依赖于layui.form模块的自动渲染，前提是必须给表单体系所在的父元素加上class="layui-form"。如果表单元素动态插入就会导致form模块 的自动化渲染是会对其失效。

2)解决方法-重新渲染

var form= layui.form;

$.getJSON("${ctx}/web/UserInforServlet?method=selectHobby", function(obj) {

$("#hobbyID").empty();

$("#hobbyID").append("" + "----请选择----" + "");

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

$("#hobbyID").append("" + obj.data[i].hobby + "");

//每次动态添加下拉框都要重新手动渲染一次

form.render();

}

});

});

});

3)下拉框有时候加载不了数据的解决方法

//取消异步

$.ajaxSettings.async = false;

addoption();//下拉框绑定

//开启异步

$.ajaxSettings.async = true;