导师列表 删除 详情 按钮功能的实现

最新推荐文章于 2023-03-18 16:56:57 发布
最新推荐文章于 2023-03-18 16:56:57 发布
阅读量629 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39860799/article/details/82792476
版权

导师列表 删除 详情 按钮功能的实现

目录

1. 在table添加操作列和选择列 1

2. 在datatable实现操作列的按钮显示 1

效果： 2

3. 添加编辑的响应事件 2

① 先新建一个类daoshi.java 2

② 在applicationContext.xml配置写daoshi.java类 2

③ 在struts.xml添加teachercha.action 2

④ 在daoshi.java添加teachercha方法 2

⑤ 添加teacherInformation.jsp页面 3

4. 添加删除的响应事件 4

① 给删除添加onclick事件 4

② 导入dialog.js包 5

效果： 5

5. 复选框的获取数据 5

  1. 在table添加操作列和选择列

<table class="table table-bordered" id="datatable1">

<thead>

<tr>

<th>选择</th>

<th>头像</th>

<th>序号</th>

<th>工号</th>

<th>姓名</th>

<th>电话</th>

<th>学院</th>

<th style="text-align:center">简介</th>

<th>操作</th>

</tr>

</thead>

</table>

 

  1. 在datatable实现操作列的按钮显示

var right = $('#datatable1')

.DataTable(

{

ajax : "allTeacher.action",

columns : [

{

"data" : null,

"render" : function(data, type,row) {

var html = "<input name='checkBox1' id='ba' class='styled' type='checkbox' value='"+data['id']+"'></input>"

return html;  }

},

      {"data" : "photo"},

 {

"data" : null,

"render" : function(data, type,row) {

var html = "<div style='margin-top:5px;' ><a  href='teachercha.action' class='btn btn-success btn-xs' ><i class='fa fa-arrow-up'></i>编辑</a><div>"

html += "<div style='margin-top:5px' ><a  οnclick='cha()' href='javascript:void(0);' class='btn btn-success btn-xs '  style='padding-top:5px'><i class='fa fa-close'></i> 删除</a></div>"

return html;}

},],

});

效果：

  1. 添加编辑的响应事件
  • 先新建一个类daoshi.java

public class daoshi extends ActionSupport implements SessionAware {@Override

public void setSession(Map<String, Object> arg0) {

}

}

 

  • 在applicationContext.xml配置写daoshi.java类

<bean id="daoshi" class="org.daoshi.action.daoshi">

 </bean>

 

  • 在struts.xml添加teachercha.action

 <action name="teachercha" class="daoshi" method="teachercha">

         <result name="success">teacherInformation.jsp</result>

   </action>

 

  • 在daoshi.java添加teachercha方法
  1. 定义变量，用来接收网页传来的导师的id

 private String tt;并生成get set方法

  1. 定义Teacher TeacherDao变量，并生成get set方法

 private Teacher teacher;

 private TeacherDao teacherDao;

  1. 在applicationContext.xml配

 <bean id="daoshi" class="org.daoshi.action.daoshi">

           <property name="teacherDao" ref="teacherDaoImp"></property>

        </bean>

 

  1. 网页tt的传递

$('#datatable1 tbody').on('click','tr',function() {

//  获得选中行的id

var data = $('#datatable1').DataTable().row(this).data();

alert("选中id：" + data['id']);

    console.log(data);

    $.post("teachercha", {tt : data['tid']});

});//$(this).toggleClass('selected');

 

  1. 实现teachercha

public String teachercha(){

System.out.println(tt);

teacher=teacherDao.oneTeahcer(tt);

System.out.println(teacher.getTAddress());

return "success";

}

 

 

  • 添加teacherInformation.jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

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

<html>

  <head>

    <title>详细信息</title>

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->

<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>

<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->

<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="jules/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">

<link href="jules/css/animate.min.css" rel="stylesheet">

<link href="jules/css/style.min862f.css?v=4.1.0" rel="stylesheet">

<link href="jules/css/dataTables.bootstrap.css" rel="stylesheet">

  </head>

  <body class="gray-bg">

  <div style="width:auto;margin-top:10px">

  <form action="teacherac">

      <table class="table table-bordered" style="width:500px;margin:0 auto">

       <tr>

          <th>图片</th><td><img src="${teacher.TPicture }" style="width:100px;height:100px"></img></td>

       </tr>

       <tr><th>序号：</th><td><input type="text" name="xuhao" class="form-control" value="${teacher.id.TId }" readonly> </input></td></tr>

       <tr><th>工号：</th><td><input type="text" name="gonghao" class="form-control" value="${teacher.id.TTeacherId }" readonly></input></td></tr>

       <tr><th>姓名：</th><td><input type="text" name="xingmin" class="form-control" value="${teacher.TName}"></input></td></tr>

       <tr><th>电话：</th><td><input type="text" name="tel" class="form-control" value="${teacher.TPhone }"></input></td></tr>

       <tr><th>学院：</th><td><input type="text" name="xueyuan" class="form-control" value="${teacher.TCollege }"></input></td></tr>

       <tr><th>简介：</th><td><textarea rows="3" cols="20" type="text" name="jianjia" style="height:auto;" class="form-control" value="">${teacher.TIntroduction }</textarea></td></tr>

       <tr><th colspan="2"style="height:auto"><div style="margin-left:150px;"><input class="btn btn-success" type="submit" value="确定" id="sure"></input>

       <input class="btn btn-success" type="reset" value="重置" id="sure"></input>

       </div></th></tr>

      </table>

      </form>

    </div>

  </body>

  <Script >

  $(function(){

  $("#sure").click(function(){

  alert("修改成功");

  })

  })

  </Script>

</html>

 

 

  1. 添加删除的响应事件
  • 给删除添加onclick事件

function cha() {

modal.open();

}

 

  • 导入dialog.js包

<script src="js/dialog.js"></script>

<script type="text/html" id="modal-tpl">

    <form>

    <h>你将删除此信息！</h>

    </form>

</script>

<script>

var modal = new Modal({

title : '是否删除',

content : $('#modal-tpl').html(),

width : 200,

onOk : function() {

$.post("shan.action", {});

alert("已删除");

window.location.reload();

},

onModalShow : function() {

}

});

function cha() {

modal.open();

}

</script>

效果：

 

  1. 复选框的获取数据

<script>

//<input type="checkbox" name="allxuan" id="allxuan">全选</input>

$('#allxuan').click(function() {

if ($(this).is(':checked')) {//判断复选框是否被选中

$('#datatable1').toggleClass('selected');

} else {

$('#datatable1').removeClass('selected');

}

});

//<button id="daying">显示选中数据</button>

//<input name='checkBox1' id='ba' class='styled' type='checkbox' //value='"+data['id']+"'></input>"

 

$('#daying').click(function(){

 var checkedBox = $("input[name='checkBox1']:checked");

            if (checkedBox.length != 0) {

               alert("共选择了："+checkedBox.length);

               }

                $('input[name="checkBox1"]:checked').each(function () {

                      alert($(this).val());

                });

    /*判断复选框是否选中

  if($("input[type='checkbox']").is(':checked')){

  }

  */

         });

</script>

 

全部代码

<%@page contentType="text/html; charset=UTF-8"%>

<%--<%@taglib uri="/struts-tags" prefix="s"%>--%>

<%--<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> --%>

<%@ page isELIgnored="false"%>

<!DOCTYPE html>

<html>

<!-- Mirrored from www.zi-han.net/theme/hplus/article.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:47 GMT -->

<head>

 

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

 

<title>老师列表</title>

<link rel="stylesheet"

href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

<script

src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="jules/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">

<link href="jules/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">

 

<link href="jules/css/animate.min.css" rel="stylesheet">

<link href="jules/css/style.min862f.css?v=4.1.0" rel="stylesheet">

<link href="jules/css/dataTables.bootstrap.css" rel="stylesheet">

<script src="matrixadmin/js/jquery.min.js"></script>

<style type="text/css">

.selected {

background-color: #a7aaab;

cursor: pointer;

}

</style>

</head>

 

<body class="gray-bg">

<div class="row">

<div class="col-sm-12">

<div class="tabs-container">

<ul class="nav nav-tabs">

<li class="active"><a data-toggle="tab" href="#tab-1"

aria-expanded="true"> 老师列表</a></li>

</ul>

<div class="tab-content">

<div id="tab-1" class="tab-pane active">

<div class="panel-body">

<input type="checkbox" name="allxuan" id="allxuan">全选</input>

<button id="daying">显示选中数据</button>

<!--   <input type="checkbox" id="ss" name="checkbox" value="checkboxgg1">checkbox1</input>-->  

<table class="table table-bordered" id="datatable1">

<thead>

<tr>

<th>选择</th>

<th>头像</th>

<th>序号</th>

<th>工号</th>

<th>姓名</th>

<th>电话</th>

<th>学院</th>

<th style="text-align:center">简介</th>

<th>操作</th>

</tr>

</thead>

 

</table>

</div>

</div>

</div>

</div>

 

</div>

 

 

</div>

 

<script src="jules/js/content.min.js?v=1.0.0"></script>

<script src="jules/js/jquery.dataTables.js"></script>

<script src="jules/js/dataTables.bootstrap.js"></script>

<script src="js/dialog.js"></script>

<script type="text/html" id="modal-tpl">

    <form>

    <h>你将删除此信息！</h>

    </form>

    </script>

 

<script type="text/javascript">

var url = window.location;

function getUrlParam(url, name) {

var pattern = new RegExp("[?&]" + name + "\=([^&]+)", "g");

var matcher = pattern.exec(url);

var items = null;

if (matcher != null) {

try {

items = decodeURIComponent(decodeURIComponent(matcher[1]));

} catch (e) {

try {

items = decodeURIComponent(matcher[1]);

} catch (e) {

items = matcher[1];

}

}

}

return items;

}

var deleteid = getUrlParam(url, 'actid');

</script>

<script>

$('#allxuan').click(function() {

if ($(this).is(':checked')) {

$('#datatable1').toggleClass('selected');

} else {

$('#datatable1').removeClass('selected');

}

});

$('#daying').click(function(){

 var checkedBox = $("input[name='checkBox1']:checked");

            if (checkedBox.length != 0) {

               alert("共选择了："+checkedBox.length);              

               }

                $('input[name="checkBox1"]:checked').each(function () {

                      alert($(this).val());

                });

    /*判断复选框是否选中

  if($("input[type='checkbox']").is(':checked')){

 

  }

  */

         });

 

</script>

<script type="text/javascript">

$(document)

.ready(

 

function() {

 

var right = $('#datatable1')

.DataTable(

{

// 及格

destory : true,

searching : true,

bLengthChange : true,

ordering : false,

bScrollInfinite : true,

bScrollCollapse : true,

ajax : "allTeacher.action",

columns : [

{

 

"data" : null,

"render" : function(

data, type,

row) {

var html = "<input name='checkBox1' id='ba' class='styled' type='checkbox' value='"+data['id']+"'></input>"

return html;

}

},

{

"data" : "photo"

 

},

{

"data" : "id"

},

{

"data" : "tid"

},

{

"data" : "name"

},

{

"data" : "iphone"

},

{

"data" : "college"

},

{

"data" : "in"

},

 

{

 

"data" : null,

"render" : function(

data, type,

row) {

var html = "<div style='margin-top:5px;' ><a  href='teachercha.action' class='btn btn-success btn-xs' ><i class='fa fa-arrow-up'></i>编辑</a><div>"

 

html += "<div style='margin-top:5px' ><a  οnclick='cha()' href='javascript:void(0);' class='btn btn-success btn-xs '  style='padding-top:5px'><i class='fa fa-close'></i> 删除</a></div>"

return html;

}

},

],

});

 

$('#datatable1 tbody').on(

'click',

'tr',

function() {

//  获得选中行的id

var data = $('#datatable1').DataTable()

.row(this).data();

alert("选中id：" + data['id']);

console.log(data);

$.post("teachercha", {

tt : data['tid']

})

//$(this).toggleClass('selected');

});

 

});

</script>

    <!-- 删除按钮 -->

<script>

var modal = new Modal({

title : '是否删除',

content : $('#modal-tpl').html(),

width : 200,

onOk : function() {

$.post("shan.action", {});

alert("已删除");

window.location.reload();

},

onModalShow : function() {

 

}

});

function cha() {

modal.open();

}

</script>

</body>

 

 

<!-- Mirrored from www.zi-han.net/theme/hplus/article.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:47 GMT -->

</html>

 

qq_39860799
关注
JavaScript动态创建、删除按钮的实现
weixin_40829083的博客
11-28 5336
本文介绍了如何用JavaScript动态地创建和删除按钮，以及如何实现新建按钮的onclick函数功能，新生成的按钮和相关的onclick函数可直接保存在文件中，从而实现了用html页面编辑自身的功能。 基本的html页面 基本的html页面如下，两个输入框，Name用来输入新建按钮的名字和ID，URL用来输入新建按钮可以打开的网页地址。也就是说新建按钮的功能就是按下按钮，就能打开相对应的网页。 add a button按钮用来新建一个新的按钮，remove a button用来删除一个按钮。而p标签是用来
java删除按钮的功能实现_jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)...
weixin_39704246的博客
03-08 474
效果图第一步：加载第二步：html 小黄人小黄人小黄www.cppcns.comss="txt-item">小黄人小黄人小黄人小黄人小黄人删除第二步：css.item-wrap{overflow: hidden;}.item-wrap .item{border-bottom: 1px #fff solid;background: #000;width: 125%;overflow:...
vue实践-删除按钮的实现
wenchang-的博客
07-19 4322
Button按钮 <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" type="danger"
24-项目列表的删除按钮功能实现
weixin_45497936的博客
05-13 145
参考大佬文章：24 js删除函数 删除列表后台函数 获取参数id 删除数据库的项目表中的对应id项目 返回空字符串给前端 完成效果
java删除按钮的功能实现_Android仿微信实现左滑显示删除按钮功能
weixin_28221255的博客
02-27 431
在实际项目中删除列表中的某一项是非常常见的功能，传统的做法可以使用长按监听器等，而现在流行的做法是左滑弹出删除按钮，微信，QQ等都是这么做的，下面做一个示例，代码如下：主页面MainActivity：代码比较简单常规package com.home.testslideview;import java.util.ArrayList;import java.util.List;import andro...
基于Spring Boot技术的卓越导师双选系统设计与实现（毕业论文）
03-07
导师功能实现 项目信息管理 实现导师权限的项目信息管理功能，其运行效果见下图。导师新增项目，上传项目文件，修改项目信息，在本页面删除指定的项目信息 项目提交管理 实现导师权限的项目提交管理功能，其运行效果...
Java基于springboot的卓越导师双选系统设计与实现.rar
03-19
导师功能实现 项目信息管理 实现导师权限的项目信息管理功能，其运行效果见下图。导师新增项目，上传项目文件，修改项目信息，在本页面删除指定的项目信息 项目提交管理 实现导师权限的项目提交管理功能，其运行效果...
基于java、springboot技术的卓越导师双选系统设计与实现毕业设计（源码+论文）
最新发布
05-21
导师功能实现 项目信息管理 实现导师权限的项目信息管理功能，其运行效果见下图。导师新增项目，上传项目文件，修改项目信息，在本页面删除指定的项目信息 项目提交管理 实现导师权限的项目提交管理功能，其运行效果...
java毕设项目之基于java+Spring Boot技术的卓越导师双选系统设计与实现.zip
03-10
导师功能实现 项目信息管理 实现导师权限的项目信息管理功能，其运行效果见下图。导师新增项目，上传项目文件，修改项目信息，在本页面删除指定的项目信息 项目提交管理 实现导师权限的项目提交管理功能，其运行效果...
java毕设之卓越导师双选系统设计与实现源码（springboot+vue+mysql+说明文档+LW）.zip
03-16
导师功能实现 项目信息管理 实现导师权限的项目信息管理功能，其运行效果见下图。导师新增项目，上传项目文件，修改项目信息，在本页面删除指定的项目信息 项目提交管理 实现导师权限的项目提交管理功能，其运行效果...
vue实现点击按钮“查看详情”弹窗展示详情列表操作
12-28
html： 点击弹窗按钮 js： [removed] import http from
js添加删除行功能实现
09-14
js添加删除行功能实现 4个不同的实现方法
JAVA做的界面有添加修改以及删除按钮
05-18
一个界面，有添加修改以及删除按钮，可以用到学生信息管理系统中去。
关于button标签中传值并且实现删除功能，以及href传值实现按钮的删除功能并且添加是否确认删除弹窗
qq_66013742的博客
03-18 713
关于button标签中传值并且实现删除功能，以及href传值实现按钮的删除功能并且添加是否确认删除弹窗
Java Web实战详细教程（十八）删除功能的实现
Java朱老师博客
11-04 7374
        修完功能开发完毕后，删除功能易如反掌。         首先在删除按钮上添加一个id： <button type="button" class="btn btn-primary" id="delete">删除</button>       &nbsp
html确认删除对话框的实现并控制动作的执行
weixin_46019681的博客
04-28 3292
目的：防止删除blog的时候出现误删的情况，在点击删除按钮之后弹出确认删除对话框，使操作更人性化。 删除按钮是一个<a>标签，在原来的代码中，点击删除，会出发href，进行函数跳转，服务器会删除该记录，然后刷新页面。 我们要做到在href跳转前弹出确认删除对话框并根据用户的选择告诉服务器删不删这条数据，接下来是具体的实现步骤： 1.html代码： <a href="/blog/deleteById/#(blog.id)" onclick="delblog();">...
【前端面试题】-------实现一下，点击1个按钮的同时删除这个按钮，并创建2个新按钮
codeTcy的博客
03-31 1123
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> *{ margin: 0; padding: 0; } </style> ...
表格删除按钮功能完整版
yqw13989575652的博客
09-06 818
表格删除按钮功能完整版
研究生导师信息管理系统的设计与实现
系统的功能分析主要是针对研究生导师信息管理系统的各项功能模块进行详细的分析和描述，以此确保系统在实际应用中能够完整地实现各项功能的预期效果。 七、业务流程分析 通过对系统的业务流程进行分析，可以清晰地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值