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

最新推荐文章于 2023-03-18 16:56:57 发布

qq_39860799

最新推荐文章于 2023-03-18 16:56:57 发布

阅读量629

点赞数

本文链接：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

在table添加操作列和选择列

<thead>

<tr>

</tr>

</thead>

</table>

在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;}

},],

});

效果：

添加编辑的响应事件

先新建一个类daoshi.java

public class daoshi extends ActionSupport implements SessionAware {@Override

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

}

在applicationContext.xml配置写daoshi.java类

</bean>

在struts.xml添加teachercha.action

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

</action>

在daoshi.java添加teachercha方法

定义变量，用来接收网页传来的导师的id

private String tt;并生成get set方法

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

private Teacher teacher;

private TeacherDao teacherDao;

在applicationContext.xml配

</bean>

网页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');

实现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>

</head>

<tr>

</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>

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

</table>

</form>

</div>

</body>

$(function(){

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

alert("修改成功");

})

</Script>

</html>

添加删除的响应事件

给删除添加onclick事件

function cha() {

modal.open();

}

导入dialog.js包

<form>

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

</form>

</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>

效果：

复选框的获取数据

//<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>

<head>

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

<script

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

.selected {

background-color: #a7aaab;

cursor: pointer;

}

</style>

</head>

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

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

</ul>

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

<thead>

<tr>

</tr>

</thead>

</table>

</div>

<form>

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

</form>

</script>

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>

$('#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>

$(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);