该楼层疑似违规已被系统折叠隐藏此楼查看此楼
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;
