ajax 显示，删除，批量删除，修改反填功能实现
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 ...
- Vue-表单验证-全选-反选-删除-批量删除
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 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 ...
- think php 上下架修改+jq静态批量删除+ajax删除+全选
视图代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...
随机推荐
- layui form表单自定义sm格式
1. 新建以下sm样式,保存为layform_sm.css文件名,然后导入到layui.css的后面. .layui-input-sm,.layui-select-sm,.layui-textarea ...
- 刷机补丁包updater-script脚本
1.单刷补丁包 新建META-INF文件夹,新建txt文件命名为:updater-script新建system文件夹,在里面新建app文件夹,把你要单刷的apk放进app文件夹在updater-scr ...
- AOP 技术原理——代理模式全面总结
前言 非常重要的一个设计模式,也很常见,很多框架都有它的影子.定义就不多说了.两点: 1.为其它对象提供一个代理服务,间接控制对这个对象的访问,联想 Spring 事务机制,在合适的方法上加个 tra ...
- QtCreator pro中相对路径和debug文件夹下未放动态库时调试报QtCreator:during startup program exited with code 0xc0000135错误
QtCreator pro中相对路径一般是以pro文件(非main函数所在文件)所在的当前目录为起点,用$$PWD表示. 如头文件和库文件 INCLUDEPATH +=$$PWD/inc win32 ...
- js 原型链和继承（转）
在理解继承之前,需要知道 js 的三个东西: 什么是 JS 原型链 this 的值到底是什么 JS 的 new 到底是干什么的 1. 什么是 JS 原型链? 我们知道 JS 有对象,比如 var ob ...
- CleanAop使用笔记
前言,本(ˇˍˇ) 想用PostSharp做case,但是破解不成功,所以在github里找了一个CleanAop 地址: https://github.com/Jarvin-Guan/CleanAO ...
- Code::Blocks设置支持C++ 11
进入codeblocks,点击Settings --> Compiler..,进入如下页面 勾选“Have g++ follow the C++11 ISO language standard ...
- 关于HOOK KiPageFault需要用到自旋锁研究
KeAcquireSpinLockRaiseToDpc 可以使用这个函数 来开启自旋锁
- SQL Server清空日志以及查看日志大小语句
为了安全起见,使用的时候,先数据备份一遍 作者hongb:SQL Server:查看SQL日志文件大小命令:dbcc sqlperf(logspace) https://www.cnblogs.com ...
- 排序算法--插入排序(Insertion Sort)_C#程序实现
排序算法--插入排序(Insertion Sort)_C#程序实现 排序(Sort)是计算机程序设计中的一种重要操作,也是日常生活中经常遇到的问题.例如,字典中的单词是以字母的顺序排列,否则,使用起来 ...