ssm+ajax实现新增和修改(layerui后台系统模板)
最近使用layerui后台模板实现的一个新增和修改，大家looklook、、、、、
一、jsp页面
-
admin_list.jsp页面，该页面显示数据（代码太多了，我就只写一部分就行了）
添加：οnclick="addAdmin()" ，调用admin.js中的函数
添加编辑：οnclick="updateAdmin(this)"，this为取到点击编辑当前的对象
编辑
好的，table：
管理员列表
ID
管理员账号
管理员密码
管理员级别
手机号码
性别
注册时间
操作
${item.ad_id}
${item.ad_account}
${item.ad_pwd}
${item.ad_level}
${item.phone}
${item.sex}
${day}
编辑 删除
2.修改和添加填写数据的页面，admin_add.jsp
二、admin.js代码
//管理员-编辑
function updateAdmin(event){
//获取并赋值
var a_id = $(event).parents().children("td").eq(1).html();//取到id
var a_account = $(event).parents().children("td").eq(2).html();//取到账号
var a_pwd = $(event).parents().children("td").eq(3).html();//取到密码
var a_level = $(event).parents().children("td").eq(4).html();//取到级别
var phone = $(event).parents().children("td").eq(5).html();//取到手机号码
var sex = $(event).parents().children("td").eq(6).html();//取到性别
//弹出一个窗口
layer.open({
type: 2,
title: '编辑管理员',
area: ['800px', '500px'],
content: ["Backstage/admin-add.jsp",'no'],
success:function(layero, index){
//获取弹窗页面的标签对象
var id = $("#id", layero.find("iframe")[0].contentWindow.document);
var account = $("#account", layero.find("iframe")[0].contentWindow.document);
var pwd = $("#pwd", layero.find("iframe")[0].contentWindow.document);
var level = $("#level", layero.find("iframe")[0].contentWindow.document);
var ph = $("#phone", layero.find("iframe")[0].contentWindow.document);
var s = $("#radio", layero.find("iframe")[0].contentWindow.document);
//给弹出的窗口中的内容赋值
id.attr("value", a_id);
account.attr("value", a_account);
pwd.attr("value", a_pwd);
level.find('option').each(function(){
//遍历下拉框的子标签
if($(this).val() == a_level){
//如果下拉框的子标签的值与从上个页面获取到的值相同，则选中
$(this).attr('selected','selected');
}else{
$(this).attr('selected',false);
}
});
ph.attr("value", phone);
s.find('input').each(function(){
//遍历div的子标签input
if($(this).val() == sex){
//如果下拉框的子标签的值与从上个页面获取到的值相同，则选中
$(this).attr('checked','checked');
}else{
$(this).attr('checked',false);
}
});
var save = $("#saveSubmit", layero.find("iframe")[0].contentWindow.document);
save.click(function(){
//表单验证
if(account.val()==""){
layer.msg('账号不能为空',{icon:1,time:1000});
}else if(!new RegExp("^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]{6,20}$").test(account.val())){
layer.alert('只能输入6~20个含有汉字、数字、字母、下划线,不能以下划线开头和结尾');
}
if(pwd.val()==""){
layer.msg('密码不能为空',{icon:1,time:1000});
}else if(!new RegExp("^([A-Z]|[a-z]|[0-9]|_){6,20}$").test(pwd.val())){
layer.alert('密码必须由6-20个字母、数字、下划线组成');
}
if(level.val()==""){
layer.msg('请选择管理员级别',{icon:1,time:1000});
}
if(ph.val()==""){
layer.msg('手机号码不能为空',{icon:1,time:1000});
}else if(!new RegExp("^1[0-9]{10}$").test(ph.val())){
layer.msg('手机号码格式不正确',{icon:1,time:2000});
}
// //将要传到控制器中的参数保存到json中，利用ajax实现跳转
var admin = {
"ad_id" : id.val(),
"ad_account" : account.val(),
"ad_pwd" : pwd.val(),
"ad_level" : level.find('option:selected').val(),
"phone" : ph.val(),
"sex" : s.find('input:checked').val()
};
$.ajax({
url:'admin/addOrUpdate.do',
type:'post',
dataType:'json',
data: admin,
success:function (res) {
layer.msg(res.msg,{icon:1,time:1000});//打出提示信息
//点击关闭按钮就刷新页面
layer.close(index);
location.reload();
},
'error':function () {
layer.msg('系统错误',{icon:1,time:1000});
}
});
});
},
end:function(layero, index){
//点击关闭按钮就刷新页面
layer.close(index);
}
});
}
//添加
function addAdmin(){
//弹出一个窗口
layer.open({
type: 2,
title: '添加管理员',
area: ['800px', '500px'],
content: ["Backstage/admin-add.jsp",'no'],
success:function(layero, index){
//获取弹窗页面的标签对象
var id = $("#id", layero.find("iframe")[0].contentWindow.document);
var account = $("#account", layero.find("iframe")[0].contentWindow.document);
var pwd = $("#pwd", layero.find("iframe")[0].contentWindow.document);
var level = $("#level", layero.find("iframe")[0].contentWindow.document);
var ph = $("#phone", layero.find("iframe")[0].contentWindow.document);
var s = $("#radio", layero.find("iframe")[0].contentWindow.document);
var save = $("#saveSubmit", layero.find("iframe")[0].contentWindow.document);
save.click(function(){
//表单验证
if(account.val()==""){
layer.msg('账号不能为空',{icon:1,time:1000});
}else if(!new RegExp("^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]{6,20}$").test(account.val())){
layer.alert('只能输入6~20个含有汉字、数字、字母、下划线,不能以下划线开头和结尾');
}
if(pwd.val()==""){
layer.msg('密码不能为空',{icon:1,time:1000});
}else if(!new RegExp("^([A-Z]|[a-z]|[0-9]|_){6,20}$").test(pwd.val())){
layer.alert('密码必须由6-20个字母、数字、下划线组成');
}
if(level.val()==""){
layer.msg('请选择管理员级别',{icon:1,time:1000});
}
if(ph.val()==""){
layer.msg('手机号码不能为空',{icon:1,time:1000});
}else if(!new RegExp("^1[0-9]{10}$").test(ph.val())){
layer.msg('手机号码格式不正确',{icon:1,time:2000});
}
// //将要传到控制器中的参数保存到json中，利用ajax实现跳转
var admin = {
"ad_id" : id.val(),
"ad_account" : account.val(),
"ad_pwd" : pwd.val(),
"ad_level" : level.find('option:selected').val(),
"phone" : ph.val(),
"sex" : s.find('input:checked').val()
};
$.ajax({
url:'admin/addOrUpdate.do',
type:'post',
dataType:'json',
data: admin,
success:function (res) {
layer.msg(res.msg,{icon:1,time:1000});//打出提示信息
//点击关闭按钮就刷新页面
layer.close(index);
location.reload();
},
'error':function () {
layer.msg('系统错误',{icon:1,time:1000});
}
});
});
},
end:function(layero, index){
//点击关闭按钮就刷新页面
layer.close(index);
}
});
}
三、Admin实体类：（记得封装）
private Integer ad_id;//用户编号
private String ad_account;//用户账号
private String ad_level;//管理员等级
private String ad_pwd;//密码
private Date ad_time;//注册时间
private String phone;//手机号码
private String sex;//性别
private Set covers = new HashSet();//配置一对多//封面图
private Set hImgs = new HashSet();//头像
private Set userinfos = new HashSet();//用户信息
//封装略
四、控制器
//管理员控制器
@Controller
@RequestMapping("admin")
public class AdminController {
//配置时间
@InitBinder
public void initBinder(WebDataBinder dataBinder){
dataBinder.registerCustomEditor(Date.class, new CustomDateEditor(new SimpleDateFormat("yyyy-MM-dd"), true));
}
@Autowired
private AdminService adminService;
public AdminService getAdminService() {
return adminService;
}
public void setAdminService(AdminService adminService) {
this.adminService = adminService;
}
/**
* 新增或者修改管理员
* @param admin
* @param response
* @return
*/
@RequestMapping("addOrUpdate")
@ResponseBody
public String addOrUpdate(Admin admin,HttpServletResponse response) {
JSONObject jsonObject = new JSONObject();
if(admin.getAd_id()!=null) {
try {
adminService.updateAdmin(admin);//修改执行的方法
jsonObject.put("msg", "修改成功");
} catch (Exception e) {
jsonObject.put("msg", "修改失败");
}
}else {
try {
adminService.addAdmin(admin);//修改执行的方法
jsonObject.put("msg", "新增成功");
} catch (Exception e) {
jsonObject.put("msg", "新增失败");
}
}
OutUtil.print(jsonObject, response);
return null;
}
}
五、Service和serviceImpl
package cn.jbit.service;
import java.util.List;
import cn.jbit.pojo.Admin;
public interface AdminService {
void updateAdmin(Admin admin);
void addAdmin(Admin admin);
}
package cn.jbit.service.impl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import cn.jbit.dao.AdminDao;
import cn.jbit.pojo.Admin;
import cn.jbit.service.AdminService;
@Service("adminService")
public class AdminServiceImpl implements AdminService{
@Autowired
private AdminDao adminDao;
public AdminDao getAdminDao() {
return adminDao;
}
public void setAdminDao(AdminDao adminDao) {
this.adminDao = adminDao;
}
public void updateAdmin(Admin admin) {
//修改
adminDao.updateAdmin(admin);
}
public void addAdmin(Admin admin) {
//新增
adminDao.addAdmin(admin);
}
}
六、Dao
package cn.jbit.dao;
import java.util.List;
import org.apache.ibatis.annotations.Param;
import cn.jbit.pojo.Admin;
public interface AdminDao {
//配置一对多
Admin getAdminByAd_id(int ad_id);
//修改
void updateAdmin(Admin admin);
//新增
void addAdmin(Admin admin);
}
七、mapper.xml
UPDATE admin SET ad_account=#{ad_account},ad_pwd=#{ad_pwd},ad_level=#{ad_level},phone=#{phone},sex=#{sex},ad_time=NOW() where ad_id=#{ad_id}
INSERT INTO admin VALUE(NULL,#{ad_account},#{ad_pwd},#{ad_level},#{phone},#{sex},NOW())
ps:我就不解释了，没得时间构思组织语言打字了~
你可能感兴趣的:(ssm+ajax实现新增和修改(layerui后台系统模板))