Java实现Layui的form表单动态绑定下拉框
Java实现Layui的form表单动态绑定下拉框
【1】视图层
<link href="${ctx}/Content/layui/css/layui.css" rel="stylesheet" />
<form class="layui-form" id="fruserInfor" lay-filter="layform">
<div class="layui-form-item" style="margin-bottom:10px;">
<label class="layui-form-label label-txt">爱好:label>
<div class="layui-input-inline">
<select name="hobbyID" id="hobbyID" lay-filter="test">select>
div>
div>
<button class="layui-btn" id="saveUserInfor">立即提交button>
<button type="reset" class="layui-btn layui-btn-primary">重置button>
form>
<script src="${ctx}/Content/jquery-3.3.1/jquery-3.2.1.min.js">script>
<script src="${ctx}/Content/layui/layui.js">script>
<script src="${ctx}/Content/layui/layui.all.js">script>
<script src="${ctx}/Content/jquery-3.3.1/jquery.form.js">script>
<script type="text/javascript">
$(function () {
//【1】加载&初始化layui模块-弹出层与table数据表格
layui.use(["layer","form"], function () {
var layer = 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 < obj.data.length; i++) {
$("#hobbyID").append("">" + obj.data[i].hobby + "");
//每次动态添加下拉框都要重新手动渲染一次
form.render();
}
},"json");
}
script>
1）使用getJSON返回的数据是object的对象
- 使用ajax返回的数据是字符串类型
- 可以使用JSON.parse将字符串转换成对象
data= JSON.parse(data);
【2】控制器
注意我引用json-lib-2.4-jdk15.jar将数据转换为json格式
@WebServlet("/web/UserInforServlet")
public class UserInforServlet extends HttpServlet{
private IuserService is=new UserServiceImpl();
public void doGet(HttpServletRequest request,HttpServletResponse response)throws IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request,HttpServletResponse response) throws IOException {
String method= request.getParameter("method");
if("selectHobby".equals(method)){
System.out.println("selectHobby");
selectHobby(request,response);
}
}
public void selectHobby(HttpServletRequest request,HttpServletResponse response) throws IOException {
//【1】设置编码
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=UTF-8");//处理响应编码
List
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 模块 的自动化渲染是会对其失效。
- 解决方法-重新渲染
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();
}
});
});
});
- 下拉框有时候加载不了数据的解决方法
//取消异步
$.ajaxSettings.async = false;
addoption();//下拉框绑定
//开启异步
$.ajaxSettings.async = true;