1、页面代码
<body>
<h1>显示所有员工信息</h1>
<input id="Button1" type="button" value="批量删除" onclick="PatchDel()" />
<div>
<table class="table">
@*标题*@
<thead>
<tr>
<th><input id="CkAll" type="checkbox" /></th>
<th>账号</th>
<th>真实姓名</th>
<th>电话</th>
<th>密码</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
@*内容*@
<tbody id="tbd"></tbody>
</table>
</div>
</body>
2、ajax
<script>
//文档准备就绪函数
$(function () {
lists();
})
//显示信息
function lists() {
$.ajax({
url: "http://localhost:51071/api/User",
type: "get",
success: function (data) {
//清空tbd
$("#tbd").empty();
for (var item in data) {
//进行拼接
$("#tbd").append(
"<tr>" +
//依次获取字段
"<th><input id='Checkbox1' class='Ck' type='checkbox' value='" + data[item].Id + "' /></th>" +
"<th>" + data[item].Name + "</th>" +
"<th>" + data[item].RealName + "</th>" +
"<th>" + data[item].Telphone + "</th>" +
"<th>" + data[item].Pass + "</th>" +
"<th>" + (data[item].Status==0?"禁用":"启用") + "</th>" +
"<th><input id='btndel' type='button' value='修改' onclick='Edit(" + data[item].Id + ")' />" +
"<input id='btnupdate' type='button' value='删除' onclick='Delete(" + data[item].Id + ")' /></th>" +
"</tr>");
}
}
});
} function Delete(id) {
if (confirm("确认删除？")) {
$.ajax({
url: "http://localhost:1234/api/Student/" + id,
type: "delete",
success: function (data) {
if (data > 0) {
alert("删除成功！共删除了" + data + "条数据");
location.reload();
}
else {
alert("删除失败！");
}
}
});
}
}
// 跳转修改页面
function Edit(id) {
location.href = '/User/Edit/' + id;
}
// 全选
$("#CkAll").click(function () {
$(".Ck").prop("checked", $(this).prop("checked"))
})
//批量删除
function PatchDel() {
if (confirm("确认删除？")) {
var ids = [];
$(".Ck:checked").each(function () {
ids.push($(this).val());
});
$.ajax({
url: "http://localhost:51071/api/User?ids=" + ids,
type: "delete",
success: function (data) {
if (data > 0) {
alert("删除成功！共删除了" + data + "条数据");
location.reload();
}
else {
alert("删除失败！");
}
}
});
}
}
</script>
3、修改
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Edit</title>
<link href="~/Content/bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet" />
<script src="~/jquery类库/jquery-3.1.1.js"></script>
</head>
<body>
<div>
<h1>修改员工信息</h1>
<table align="center">
<tr>
<th>员工账号：</th>
<td>
<input id="txtName" type="text" />
</td>
</tr>
<tr>
<th>员工真实姓名：</th>
<td>
<input id="txtRelaName" type="text" />
</td>
</tr>
<tr>
<th>员工电话：</th>
<td>
<input id="txtTel" type="text" />
</td>
</tr>
<tr>
<th>员工密码：</th>
<td>
<input id="txtPwd" type="text" />
</td>
</tr>
<tr>
<th>状态：</th>
<td>
<input id="Radio1" type="radio" name="use" value="" />禁用
<input id="Radio2" type="radio" name="use" value="" />启用
</td>
</tr>
<tr>
<td></td>
<td>
<input id="Button1" type="button" value="保存" onclick="Save()" />
</td>
</tr>
</table>
</div>
</body>
</html>
<script>
$(function () {
ReturnFill();
})
function Save() {
var id = @ViewBag.id;
var name = $("#txtName").val();
var realName = $("#txtRelaName").val();
var tel = $("#txtTel").val();
var pwd = $("#txtPwd").val();
var sss = ($("#Radio1").prop("checked") ? "false" : "true");
$.ajax({
url: "http://localhost:51071/api/User",
type: "put",
data: { Id:id, Name: name, RealName: realName, Telphone: tel, Pass: pwd, Status: sss},
success: function (data) {
if (data > ) {
alert("修改成功！")
if (confirm("返回到员工列表？")) {
location.href = "/User/Index"
}
}
else {
alert("修改失败！");
}
}
});
}
//反填
function ReturnFill() {
var Id = @ViewBag.id;
$.ajax({
url: "http://localhost:51071/api/User/" + Id,
type: "get",
success: function (data) {
$("#txtName").val(data[].Name);
$("#txtRelaName").val(data[].RealName);
$("#txtTel").val(data[].Telphone);
$("#txtPwd").val(data[].Pass);
if (data[].Status == true) {
$("#Radio2").prop("checked", true)
}
else{
$("#Radio1").prop("checked", true)
}
}
})
}
</script>
ajax 显示，删除，批量删除，修改反填功能实现的更多相关文章
-
SpringMVC+Ajax实现文件批量上传和下载功能实例代码
需求: 文件批量上传,支持断点续传. 文件批量下载,支持断点续传. 使用JS能够实现批量下载,能够提供接口从指定url中下载文件并保存在本地指定路径中. 服务器不需要打包. 支持大文件断点下载.比如下 ...
-
springboot + ajax + mybatis 实现批量删除
实现思路: 1. checkbox全选获取批量删除的id数组 2. ajax以字符串的形式将id数组传给控制器 3. 控制器将字符串分割成List数组作为参数传给mapper 具体代码: 1. 前端代 ...
-
使用Ajax实现的批量删除操作（C#）
今天做了一个简单的批量删除操作,虽然简单,但是很多问题出现,终究还是技术不够熟练. 现在在这里跟大家分享一下.仅供学习... 1.在前台获取用户点击的信息id,把这里id封装到一个数组里面:(rows ...
-
ssm批量删除
ssm批量删除 批量删除:顾名思义就是一次性删除多个.删除是根据前台传给后台的id,那么所谓批量删除,就是将多个id传给后台,那么如何传过去呢,前后台的交互该如何实现? 1.jsp页面,先选中所有的要 ...
-
批量删除wps文档里的回车符的方法！WPS使用技巧分享！
有时候整理文档的时候,如果是从网上复制的文字,可能会因为复制而产生很多的回车符.怎样能批量去掉这些个回车符呢,下面马上告诉你批量删除wps文档里的回车符的方法!WPS使用技巧分享! 想要批量删除批量删 ...
-
sql server中的大数据的批量操作（批量插入，批量删除）
首先我们建立一个测试用员工表 ---创建一个测试的员工表--- create table Employee( EmployeeNo int primary key, --员工编号 EmployeeNa ...
-
angularjs实现购物车批量删除，filter模糊查询，排序
数据源 $scope.data=[ {num:1234,name:"ipad",price:3400.00,count:10}, {num:1235,name:"ipho ...
-
作业：汽车查询--弹窗显示详情，批量删除 ajax做法(0521)
作业:显示以下界面: 作业要求: 1.查看详细信息,以弹窗的形式显示,使用ajax2.批量删除 一.主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
-
AJAX实现弹窗显示详情，全选和批量删除
以Nation表为例,将Nation表显示在页面上,每一行数据前面加上复选框,后面加上查看详情,点击以弹窗形式显示每一行的数据,并且在表格最后一行加上全选复选框,点击选中全部数据,后面跟一个批量删除按 ...
随机推荐
-
Android源码——应用程序的消息处理机制
Android应用程序在启动每个线程时,都会创建一个消息队列.线程的生命周期分为创建消息队列和进入消息循环两个阶段. 消息循环分为:发送消息和处理消息. Android系统主要通过MessageQue ...
-
【BZOJ-4690】Never Wait For Weights 带权并查集
4690: Never Wait for Weights Time Limit: 15 Sec Memory Limit: 256 MBSubmit: 88 Solved: 41[Submit][ ...
-
unset是不能清除保存在本地电脑上的cookie的，用于session就可以(弄了半天原来是这样)
unset($_COOKIE["historyWord[$wordId]"]); 这样是不行的,unset只是将变量在脚本运行时注销,但是cookie是写在客户端的,下一次还是可以 ...
-
c# DataTable 中 Select 和 Clone 用法结合
C# DataTable是存放数据的一个离线数据库,将数据一下加载到内存. DataTable.Select ()方法: Select();//全部查出来 Select(过滤条件);//根据过滤 ...
-
Ext.grid.GridPanel的属性
1.Ext.grid.GridPanel 主要配置项: store:表格的数据集 columns:表格列模式的配置数组,可自动创建ColumnModel列模 ...
-
spring-bean属性配置解析
autowire属性值有 byName 根据Bean定义时的“id"属性上指定的别名与Setter名称是否一致进行自动装配 byType 根据PoJo的setXXX()方法所接受的类型判断b ...
-
PyCharm 怎么查看 Python 的变量类型和变量内容
一.在程序的某一行添加断点 二.选择 debug 程序
-
（转）AutoML for Data Augmentation
AutoML for Data Augmentation 2019-04-01 09:26:19 This blog is copied from: https://blog.insightdatas ...
-
QT信号/槽
在我的理解中,QT和Android都是类似的开发框架,都是由开发团队封装了各式各样的接口和数据结构.将一些问题的解决方法简单化比如QT中将线程封装为QThread,派生类通过重写run方法来将代码投入 ...
-
springcloud 入门 9 (消息总线)
Spring cloud bus: Spring cloud bus通过轻量消息代理连接各个分布的节点.这会用在广播状态的变化(例如配置变化)或者其他的消息指令.Spring bus的一个核心思想是通 ...