LayUI项目

一，项目原型图

二，项目表设计

三，多功能下拉框

1.前端开发

2.layui之formSelects多选组件定义及动态数据绑定

3.如何设置内置操作

4.选择日期样式

四，项目新增（后台编码）

一，项目原型图

二，项目表设计
由于相对应的表过多，这里仅提供一张图参考

三，多功能下拉框

1.前端开发

jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/common/header.jsp"%>




发布会议








	
	   
	   
	
	
	    会议标题
	    
	      
	    
	
	
	    会议内容
	    
	      
	    
	
	
	    参与者
	    
	     	
	    
	
	
	    列席者
	    
	     	
	    
	
	
	    主持人
	    
	      
	      
	    
	
	
	    会议地点
	    
	      
	    
	
	
	    会议时间
	    
	      
	    
	
	
	    备注

搭好前台后，先运行以下看能不能出来效果，由于后台还未编码插入数据，所以只有样式

2.layui之formSelects多选组件定义及动态数据绑定

1. 为了更好的展现前台效果，我们需要借助工具类formSelects

2.文档地址：https://hnzzmsf.github.io/example/example_v4.html#download
下载地址：https://github.com/hnzzmsf/layui-formSelects

怎么下载formSelects

点击以上提供的网址里的dist,开元的源码都在里面

dist里都是需要导入的插件

点击code即可下载

下载完毕之后导入项目中

导入完毕后，下一步就是引入，引入代码如下，切记引入代码时注意路径问题,还有就是注意导入顺序的问题，先引入fromSelects在引入JavaScript

环境搭好后效果就如前台代码效果一致

3.如何设置内置操作

<代码演示>

设置内置操作'canyuzhe'与'liexize'为前台代码的数据的id

    //添加多功能下拉框选项
	formSelects.btns('canyuze','select1', ['select', 'remove', 'reverse']);
	formSelects.btns('liexize','select1', ['select', 'remove', 'reverse']);

提示：select指的是xm-select的值

选择模式

这里选择本地模式

<代码演示>

//local模式
		formSelects.data('canyuze', 'local', {
			arr: rs.data
		});
		formSelects.data('liexize', 'local', {
			arr: rs.data
		});
	});

《效果图如下》

下拉框中获取的是name值与对应的id，所以需要写一个dao方法

//查询所有的用户,用于绑定多功能下拉框
	public List> queryUserAll(User user,PageBean pageBean) throws Exception{
		String sql = "select id as values,name from t_oa_user";
		return super.executeQuery(sql, pageBean);
	}

子控制器也需调用以上方法

//查询所有的用户,用于绑定多功能下拉框
		public String queryUserAll(HttpServletRequest req,HttpServletResponse resp) {
			
			try {
				PageBean pageBean = new PageBean();
				pageBean.setRequest(req);
				List> users = ud.queryUserAll(user, null);
				//注意：layui中的数据的格式
				ResponseUtil.writeJson(resp, R.ok(0, "多功能下拉框用户数据查询成功",users));
			} catch (Exception e) {
				e.printStackTrace();
				try {
					ResponseUtil.writeJson(resp,R.error(0, "多功能下拉框用户数据查询失败"));
				} catch (Exception e1) {
					e1.printStackTrace();
				}
	 
			}
				return null;
		
		}

前台需要拿到后台的数据，通过json拿到数据

$.getJSON("user.action",{methodName:"queryUserAll"},function(rs){
		//测试rs是否有数据
		console.log(rs);
		//local模式
		formSelects.data('canyuze', 'local', {
			arr: rs.data
		});
		formSelects.data('liexize', 'local', {
			arr: rs.data
		});
	});

《效果图》

列席者也是同样的方式拿到数据

4.选择日期样式

找到自己所需的样式后，查看原代码

<代码演示>

进行了一点点的改动

//日期时间范围
	  laydate.render({
	    elem: '#dt'
	    ,type: 'datetime'
	    ,range: '至'
	  });

定义时间分割符

将代码整理一下：初始化form元素

function initForm(){
	//设置内置操作
	//添加多功能下拉框选项
	formSelects.btns('canyuze','select1', ['select', 'remove', 'reverse']);
	formSelects.btns('liexize','select1', ['select', 'remove', 'reverse']);

	$.getJSON("user.action",{methodName:"queryUserAll"},function(rs){
		//测试rs是否有数据
		console.log(rs);
		//local模式
		formSelects.data('canyuze', 'local', {
			arr: rs.data
		});
		formSelects.data('liexize', 'local', {
			arr: rs.data
		});
	});
	
	//日期时间范围
	  laydate.render({
	    elem: '#dt'
	    ,type: 'datetime'
	    ,range: '至'
	  });
}

如何提交form表单

 //如何提交form表单
	form.on('submit(meeting)', function(data){
	    let rs = data.field;
	    //将原有的时间区间范围进行处理，拿到开始的时间结束时间并且去空格，放入json对象rs中
	    //split切割      trim去空格
	    rs["startTime"] = rs.dt.split("至")[0].trim();
	    rs["endTime"] = rs.dt.split("至")[1].trim();
	    rs["methodName"] = "add";
	    console.log(rs);
	    //向后台发送请求
	   $.post("info.action",rs,function(res){
		   console.log(res);
		   if(res.success){
			   layer.msg(res.msg, {icon: 6});
			   $("btn_reset").click();
		   }else{
			   layer.msg(res.msg, {icon: 5});
		   }
		   
	   },"json")
	    return false;
	  });
});

提交信息如下

四，项目新增（后台编码）

1.实体类

package com.zking.entity;

import java.util.Date;

public class MeetingInfo {
    private Long id;

    private String title;

    private String content;

    private String canyuze;

    private String liexize;

    private String zhuchiren;

    private String location;

    private Date startTime;

    private Date endTime;

    private String fujian;

    private Integer state;

    private String seatPic;

    private String remark;
    
    private String auditor;

	public String getAuditor() {
		return auditor;
	}

	public void setAuditor(String auditor) {
		this.auditor = auditor;
	}

	public Long getId() {
		return id;
	}

	public void setId(Long id) {
		this.id = id;
	}

	public String getTitle() {
		return title;
	}

	public void setTitle(String title) {
		this.title = title;
	}

	public String getContent() {
		return content;
	}

	public void setContent(String content) {
		this.content = content;
	}

	public String getCanyuze() {
		return canyuze;
	}

	public void setCanyuze(String canyuze) {
		this.canyuze = canyuze;
	}

	public String getLiexize() {
		return liexize;
	}

	public void setLiexize(String liexize) {
		this.liexize = liexize;
	}

	public String getZhuchiren() {
		return zhuchiren;
	}

	public void setZhuchiren(String zhuchiren) {
		this.zhuchiren = zhuchiren;
	}

	public String getLocation() {
		return location;
	}

	public void setLocation(String location) {
		this.location = location;
	}

	public Date getStartTime() {
		return startTime;
	}

	public void setStartTime(Date startTime) {
		this.startTime = startTime;
	}

	public Date getEndTime() {
		return endTime;
	}

	public void setEndTime(Date endTime) {
		this.endTime = endTime;
	}

	public String getFujian() {
		return fujian;
	}

	public void setFujian(String fujian) {
		this.fujian = fujian;
	}

	public Integer getState() {
		return state;
	}

	public void setState(Integer state) {
		this.state = state;
	}

	public String getSeatPic() {
		return seatPic;
	}

	public void setSeatPic(String seatPic) {
		this.seatPic = seatPic;
	}

	public String getRemark() {
		return remark;
	}

	public void setRemark(String remark) {
		this.remark = remark;
	}

	public MeetingInfo() {
		super();
		// TODO Auto-generated constructor stub
	}

	@Override
	public String toString() {
		return "MeetingInfo [id=" + id + ", title=" + title + ", content=" + content + ", canyuze=" + canyuze
				+ ", liexize=" + liexize + ", zhuchiren=" + zhuchiren + ", location=" + location + ", startTime="
				+ startTime + ", endTime=" + endTime + ", fujian=" + fujian + ", state=" + state + ", seatPic=" + seatPic + ", remark=" + remark + "]";
	}
    
}

2.dao层

package com.zking.dao;

import java.util.List;

import com.zking.entity.MeetingInfo;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;

public class MeetingInfoDao extends BaseDao {

	public int add(MeetingInfo t) throws Exception {
		String sql = "insert into t_oa_meeting_info(title,content,canyuze,liexize,zhuchiren,location,startTime,endTime,remark) values(?,?,?,?,?,?,?,?,?)";
		return super.executeUpdate(sql, t, new String [] {"title","content","canyuze","liexize","zhuchiren","location","startTime","endTime","remark"});
	}
}

3.子控制器

package com.zking.web;

import java.sql.Date;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.beanutils.ConvertUtils;

import com.zking.dao.MeetingInfoDao;
import com.zking.entity.MeetingInfo;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.MyDateConverter;
import com.zking.util.R;
import com.zking.util.ResponseUtil;

public class InfoAction extends ActionSupport implements ModelDriver{

	private MeetingInfo info = new MeetingInfo();
	private MeetingInfoDao infodao = new MeetingInfoDao();
	
	@Override
	public MeetingInfo getModel() {
		//注入一个转换器
		ConvertUtils.register(new MyDateConverter(), Date.class);
		return info;
	}

	
public String add(HttpServletRequest req,HttpServletResponse resp) {
		
		try {
			//影响行数
			int rs = infodao.add(info);
			if(rs>0) {
				ResponseUtil.writeJson(resp, R.ok(200, "会议数据新增成功"));
			}
			else {
				ResponseUtil.writeJson(resp,R.error(0, "会议数据新增失败"));
			}
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp,R.error(0, "会议数据新增失败"));
			} catch (Exception e1) {
				e1.printStackTrace();
			}
 
		}
			return null;
	
	}
	
}

这里需要一个转接器，要调用工具类的方法

@Override
	public MeetingInfo getModel() {
		//注入一个转换器
		ConvertUtils.register(new MyDateConverter(), Date.class);
		return info;
	}

工具类如下

MyDateConverter 类

package com.zking.util;

import java.text.SimpleDateFormat;
import java.util.Date;

import org.apache.commons.beanutils.Converter;

public class MyDateConverter implements Converter {
	@Override
	public Object convert(Class type, Object value) {
		String dateStr = (String)value;
		SimpleDateFormat spdt = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		try {
			Date date = spdt.parse(dateStr);
			return date;
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
}

4.xml配置

当新增提示的语句没有表情样式时，可以先看看是否是浏览器兼容的问题

LayUI项目

一，项目原型图

二，项目表设计 由于相对应的表过多，这里仅提供一张图参考

三，多功能下拉框

Java相关栏目本月热门文章

二，项目表设计
由于相对应的表过多，这里仅提供一张图参考