Java layui下拉框的数据绑定

最新推荐文章于 2024-03-15 11:32:30 发布

Amewin

最新推荐文章于 2024-03-15 11:32:30 发布

阅读量1.8k

点赞数 1

文章标签： layui下拉框 servlet 下拉框下拉框

本文链接：https://blog.csdn.net/weixin_44552215/article/details/90896502

版权

Java layui下拉框数据绑定

开发工具与关键技术：java、 elipse2019、jdk1.8 
作者：Amewin	
撰写时间：2019年6月5日

说明：

由于servlet 传输限制，传输数据时会将数据转换成字符串(不考虑使用jar)，导致前台接收时，只能显示字符串，而字符不是我们需要的数据，无法进一步处理，就需要用到js 将字符串转换为json数据。

下面是我在不使用框架的情况下，开发纯servlet作为控制器的web 项目，封装成的下拉框绑定查询数据库方法。

/***
	 * 下拉框绑定  
	 * @param id 主键id
	 * @param name 名称需要绑定的列名
	 * @param table 表名
	 * @return
	 */
public List<SelectVo> selectVoTest(String id , String name,String table){
		
		PreparedStatement ps=null;
		ResultSet rs=null;
		
		List<SelectVo> list = new ArrayList<SelectVo>();
	
		String sql = "SELECT "+id+" AS id  ,"+name+" AS name  FROM "+table+"" ;
		System.out.println(sql);
		SelectVo u=null;
		try { 
			//加载驱动
			Class.forName("com.mysql.jdbc.Driver");
			//创建数据库连接
			Connection  conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/test02", "root", "root");
			//通过ps通道查询 sql 
			ps=conn.prepareStatement(sql);
			//返回数据集
			rs=ps.executeQuery();
						
			while(rs.next()){
				u =new SelectVo();
				u.setId(rs.getInt("id"));
				u.setName(rs.getString("name"));
				System.out.println(rs.getString("name"));
				System.out.println(rs.getInt("id"));
				list.add(u);
			}
		
		} catch (SQLException e) {
			e.printStackTrace();
		}
		catch (ClassNotFoundException e) {
			e.printStackTrace();
		}
		finally{	
				//封装关闭流的方法
				DBUtil.close(rs,ps,conn);
		}
		return list;
	}

import java.io.Serializable;
/**
 * 下拉框，封装接收数据对象
 * @author CGR
 *
 */
public class SelectVo implements Serializable {
	
	//兼容所有序列化
	private static final long serialVersionUID = 1L;
	private int id ;
	private String name;
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public SelectVo(int id, String name) {
		super();
		this.id = id;
		this.name = name;
	}
	
	public SelectVo() {
		super();
	}
	@Override
	public String toString() {
		return "SelectVo [Id=" + id + ", Name=" + name + "]";
	}

	// 下拉框绑定测试
	public void selectGroup(ServletRequest req, ServletResponse resp) throws ServletException, IOException {

		List<SelectVo> lists = test.selectVoTest("userid", "username", "user");
		JSONArray jsonArray = JSONArray.fromObject(lists);
		resp.getWriter().write(jsonArray.toString());
	}

说明:

由于为方便展示使用在servlet 中直接调用daoimpl 层，使用时注意要把层分清楚，避免影响逻辑业务

jsp 页面代码

	<%@ page language="java" import="java.util.*,com.duxiu.po.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta charset="utf-8">
<base href="<%=basePath%>">

<title>from</title>
<meta name="renderer" content="webkit">
<link rel="stylesheet" type="text/css"
	href="layuiadmin/layui/css/layui.css" media="all" />
<link rel="stylesheet" type="text/css" href="layuiadmin/style/admin.css"
	media="all" />
</head>
<body>

	<div class="layui-fluid">
		<div class="layui-card">
			<div class="layui-card-header">表单组合</div>
			<div class="layui-card-body" style="padding: 15px;">
				<form class="layui-form" action="" lay-filter="component-form-group">
					<div class="layui-inline">
						<label class="layui-form-label">项目进度</label>
						<div class="layui-input-inline">
							<select id="Progress" lay-filter="progress">						
							</select>
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">用户选择</label>
						<div class="layui-input-inline">
							<select id="UserType">					
							</select>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<script language="JavaScript" src="layuiadmin/layui/layui.js"></script>
	<script language="JavaScript" src="js/jquery-3.2.1.min.js"></script>
	<script language="JavaScript">
    //项目进度下拉框
          layui.use(['form', 'laydate'], function () {
            var form = layui.form;
            //项目进度下拉框
            $.post('selectVoTest?Type='+"selectGroup", function (data) {
             console.log(data);
              	 $("#Progress").append("<option value=" + 0 + ">" + "请选择" + "</option>");
            console.log(data);
                //Json 转换成json 对象
            var str=JSON.parse(data);
               console.log(str);
               $.each(str, function (i) {
              		$("#Progress").append('<option value="' + str[i].id + '">' + str[i].name + '</option>');
                })
                form.render();//layui封装的遍历,每次绑定下拉框都需要加上
            })
        });
  </script>

</body>
</html>

示例：

在这里插入图片描述

Amewin

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Java layui下拉框的数据绑定

Java layui下拉框数据绑定开发工具与关键技术：java、 elipse2019、jdk1.8 作者：Amewin 撰写时间：2019年6月5日说明：由于servlet 传输限制，传输数据时会将数据转换成字符串(不考虑使用jar)，导致前台接收时，只能显示字符串，而字符不是我们需要的数据，无法进一步处理，就需要用到js 将字符串转换为json数据。下面是我在不使用框架的情况下，...
复制链接

扫一扫