程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 更多編程語言 >> 編程綜合問答 >> spring mvc-求助:哪位大神幫我實現下點擊修改按鈕彈出彈框並且裡面自動獲取值

spring mvc-求助:哪位大神幫我實現下點擊修改按鈕彈出彈框並且裡面自動獲取值

編輯:編程綜合問答
求助:哪位大神幫我實現下點擊修改按鈕彈出彈框並且裡面自動獲取值

我用的是hibernate+springMvc+maven實現的demo想要點擊首頁列表顯示的數據後面的修改按鈕可以彈出一個彈框,彈框力量有input文本框 ,彈框出現的時候裡面自動有要修改的那一條數據的值
頁面:

<%@ page language="java" import="java.util.*"
    contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<base href="<%=basePath%>" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sidebar Transitions</title>
<meta name="description"
    content="Sidebar Transitions: Transition effects for off-canvas views" />
<meta name="keywords"
    content="transition, off-canvas, navigation, effect, 3d, css3, smooth" />
<link rel="stylesheet" type="text/css"
    href="static/test/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="static/test/css/demo.css" />
<!-- 樣式 -->
<link rel="stylesheet" type="text/css"
    href="static/test/css/component.css" />
<link rel="stylesheet" href="static/css/pintuer.css" />
<link rel="stylesheet" href="static/css/admin.css">
<link rel="stylesheet" href="static/css/main.css" type="text/css" />
<script src="static/test/js/modernizr.custom.js"></script>
<style>
#pop {
    width: 300px;
    height: 400px;
    border: solid 1px #000;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -200px;
    border: solid 1px #000;
    border-radius: 5px;
    background: #fff;
    display: none;
    z-index: 22
}

#lightbox {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    filter: alpha(opacity = 50);
    opacity: .5;
    display: none
}
</style>
</head>
<body id="7" style="background-image: url('static/images/bj3.jpg');">
    <div id="st-container" class="st-container">
        <!--    
                example menus 
                these menus will be on top of the push wrapper
            -->


        <nav class="st-menu st-effect-11" id="menu-11">
            <h2 class="icon icon-lab">Column</h2>
            <ul>
                <li><a class="icon icon-group (alias)" href="mian">首頁</a></li>
                <li><a class="icon icon-plus" href="add">增加</a></li>
                <li><a class="icon icon-edit (alias)" href="#">修改</a></li>
                <li><a class="icon icon-thumb-tack" href="#">待定</a></li>
                <li><a class="icon icon-wrench" href="#">測試</a></li>
            </ul>
        </nav>
        <!-- content push wrapper -->
        <div class="st-pusher" id="5">
            <div class="st-content" id="4">
                <!-- this is the wrapper for the content -->
                <div class="st-content-inner" id="3">
                    <header class="codrops-header">
                        <h1 style="color: #48a770">
                            ChenHonest Administrate <span>User information management
                                case</span>
                        </h1>
                    </header>
                    <div class="main clearfix" id="2">
                        <div id="st-trigger-effects" class="column"
                            style="padding-left: 0px; padding-right: 18px;">
                            <form action="vague" method="post">

                                <div class="form-group">
                                    <div class="field">
                                        <div class="input-group">
                                            <span class="addbtn">
                                                <button type="button"
                                                    class="button bg-green-light icon-search"></button>
                                            </span> <input id="vague" type="text" class="input" name="name"
                                                size="50" placeholder="用戶名關鍵詞" /><span class="addbtn">
                                                <button type="submit" class="button bg-green-light">搜索</button>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <br>
                            <table class="table table-hover"
                                style="line-height: 35px; color: #48a770;">

                                <tr>
                                    <th width="400">用戶名</th>
                                    <th width="600">昵稱</th>
                                    <th width="200">年齡</th>
                                    <th width="1000">操作</th>
                                </tr>
                                <c:if test="${empty list}">
                                    <tr style="height: 340px;">
                                        <td align="center" colspan=4><h3>未找到內容</h3></td>
                                    </tr>
                                </c:if>
                                <c:forEach var="item" items="${list}">
                                    <tr id="content">

                                        <th width="400"><a href="con?id=${item.id}">${item.name }</a></th>
                                        <th width="600"><a href="upd?id=${item.id}">${item.nice_name }</a></th>
                                        <th width="200"><a href="upd?id=${item.id}">${item.age }</a></th>
                                        <th width="1000"><a
                                            class="button border-dot button-little"
                                            href="delete?id=${item.id}" onclick="return confirm('確認刪除?')">刪除</a>
                                            <a class="button border-dot button-little" href="#"
                                            onclick="return PopLayer(this)">修改</a></th>
                                    </tr>
                                </c:forEach>
                            </table>
                            <br>
                            <div>
                                <ul class="pagination border-mix"
                                    style="width: 441px; padding-right: 120px;">
                                    <li class="disabled"><a href="#">«</a></li>
                                    <li><a href="#">1</a></li>
                                    <li class="active"><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                    <li><a href="#">»</a></li>
                                </ul>
                            </div>
                            <br>
                            <button data-effect="st-effect-11">更多功能</button>
                        </div>
                        <div class="column" style="color: #48a770">
                            <p>顯示內容</p>
                            <p>Here is some inspiration for showing them in style using
                                CSS transitions.</p>
                            <a href="test" class="button border-dot">測試</a>
                        </div>
                    </div>
                </div>








            </div>
        </div>
    </div>
    <script src="static/test/js/classie.js"></script>
    <script src="static/test/js/sidebarEffects.js"></script>



    <div id="lightbox"></div>
    <div id="pop">
        <form>
            <table width="100%" border="0" cellpadding="5" cellspacing="5">
                <tr>
                    <td colspan="2">修改用戶</td>
                </tr>
                <tr>
                    <td align="right">用戶名:</td>
                    <td><input type="text" name="name" /></td>
                </tr>
                <tr>
                    <td align="right">昵 稱:</td>
                    <td><input type="text" name="nickname" /></td>
                </tr>
                <tr>
                    <td align="right">年 齡:</td>
                    <td><input type="text" name="age" /></td>
                </tr>
                <tr>
                    <td colspan="2" align="right"><input type="button" value="保存" />
                        <input type="button" value="關閉" onclick="PopLayer()" /></td>
                </tr>
            </table>
        </form>
    </div>
    <script>
        var pop = document.getElementById('pop'), popf = pop
                .getElementsByTagName('form')[0], lightbox = document
                .getElementById('lightbox')
        function PopLayer(obj) {
            lightbox.style.display = pop.style.display = obj ? 'block' : 'none';
            if (obj) {//點擊修改
                var tr = obj.parentNode.parentNode
                popf.name.value = tr.cells[0].innerHTML
                popf.nickname.value = tr.cells[1].innerHTML
                popf.age.value = tr.cells[2].innerHTML
            }
            return false
        }
    </script>
</body>
</html>

dao層

 /*
 * @(#) usersDaoImpl.java 2015年12月9日
 *
 * Copyright (c) 2015,RongHui Technology. All Rights Reserved.
 * WWW.RHTECH.NET CONFIDENTIAL
 */
package com.ronghui.dao;

import java.util.List;

import javax.annotation.Resource;

import org.hibernate.Query;
import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.springframework.stereotype.Repository;

import com.ronghui.model.User;


@Repository("usersDao")
public class usersDaoImpl  implements usersDao {

    // extends BaseDaoImpl<UserEntity, Integer>
        @Resource
        protected SessionFactory sessionFactory;


        public Session getSession() {
            return sessionFactory.getCurrentSession();
        }
        public void setSessionFactory(SessionFactory sessionFactory) {
            this.sessionFactory = sessionFactory;
        }


        //顯示
        @Override
        public List<User> listInfo() {
            // TODO Auto-generated method stub
            String hql="from User";
            Query query=(Query)this.getSession().createQuery(hql);
            List<User> list=query.list();
            return list;
        }



        public void update(User user){
            String hql="update User set age=? ,nice_name=? ,name=?, pwd=?,content=? where id=?";
             Query query=this.getSession().createQuery(hql);
             query.setInteger(0, user.getAge());
             query.setString(1, user.getNice_name());
             query.setString(2, user.getName());
             query.setString(3, user.getPwd());
             query.setString(4, user.getPwd());
             query.setInteger(5, user.getId());
             query.executeUpdate();
        }






}

service層沒什麼我就不放了

controller

 /**
 * 
 */
package com.ronghui.controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.ronghui.model.User;
import com.ronghui.service.usersService;

@Controller
public class UserController {
    @Resource
    private usersService usersService;
    private String name;








    // list顯示
    @RequestMapping(value = "/mian", method = RequestMethod.GET)
    public String userlogin(ModelMap model) {
        List list = usersService.listInfo();
        model.addAttribute("list", list);
        return "mian";

    }



    @RequestMapping("update")
    public String update(int id, String name, String nice_name, String pwd, int age,String content) {
        User user = new User();
        user.setId(id);
        user.setName(name);
        user.setNice_name(nice_name);
        user.setAge(age);
        user.setPwd(pwd);
        user.setContent(content);
        usersService.update(user);
        return "redirect:mian";
    }
}

修改的方法都是可以實現的 就差大神們幫我加個點擊就有彈框
類似下面圖片的 樣式不重要 只要能實現就可以了 拜托各位大神0.0
圖片說明
圖片說明

最佳回答:


  <c:forEach var="item" items="${list}" >
                                    <tr id="content">

                                        <th width="400"><a href="con?id=${item.id}">${item.name }</a></th>
                                        <th width="600"><a href="upd?id=${item.id}">${item.nice_name }</a></th>
                                        <th width="200"><a href="upd?id=${item.id}">${item.age }</a></th>
                                        <th width="1000"><a
                                            class="button border-dot button-little"
                                            href="delete?id=${item.id}" onclick="return confirm('確認刪除?')">刪除</a>
                                            <a
                                            class="button border-dot button-little"
                                            href="#" onclick="return PopLayer(this)" >修改</a>
                                            </th>
                                    </tr>
                                </c:forEach>

然後body前面放這些代碼


<style>
    #pop{width:300px;height:400px;border:solid 1px #000;position:fixed;left:50%;top:50%;margin-left:-150px;margin-top:-200px;border:solid 1px #000;border-radius:5px;background:#fff;display:none;z-index:22}
    #lightbox{width:100%;height:100%;position:fixed;top:0;left:0;background:#000;filter:alpha(opacity=50);opacity:.5;display:none}
</style>
<div id="lightbox"></div>
<div id="pop"><form>
    <table width="100%" border="0" cellpadding="5" cellspacing="5">
        <tr><td colspan="2">修改用戶</td></tr>
        <tr><td align="right">用戶名:</td><td><input type="text" name="name" /></td></tr>
        <tr><td align="right">昵 稱:</td><td><input type="text" name="nickname" /></td></tr>
        <tr><td align="right">年 齡:</td><td><input type="text" name="age" /></td></tr>
        <tr><td colspan="2" align="right"><input type="button" value="保存" /> <input type="button" value="關閉" onclick="PopLayer()" /> </td></tr>
    </table>
</form>
</div>
<script>
    var pop=document.getElementById('pop'),popf=pop.getElementsByTagName('form')[0],lightbox=document.getElementById('lightbox')
    function PopLayer(obj) {
        lightbox.style.display = pop.style.display = obj ? 'block' : 'none';
        if (obj) {//點擊修改
            var tr = obj.parentNode.parentNode
            popf.name.value = tr.cells[0].innerHTML
            popf.nickname.value = tr.cells[1].innerHTML
            popf.age.value = tr.cells[2].innerHTML
        }
        return false
    }
</script>
</body>

還有就是有空多學點js,很簡單的效果

qq_31249243
qq_31249243
showbo
showbo
qq_31249243
qq_31249243
qq_31249243
showbo
showbo
qq_31249243
  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved