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 ...
随机推荐
- Win7 SP1 64位 旗舰版 IE8 快速稳定 纯净优化 无人值守 自动激活 20180604
一.系统特色 1.采用微软原版旗舰版定制而成. 2.优化系统服务,关闭一些平时很少使用的服务. 3.精简掉一些无用的东西. 4.系统全程离线制作,不包含任何恶意插件,放心使用. 5.右下角时间加上星期 ...
- 手动安装mysql
需要在本机(mac)上装个mysql,看到压缩版的体积最小,结果进入了手工安装的坑(正常有界面可以安装,但安装目录将是/usr/local/mysql),既然入了坑就填上吧. 1.解压到自己选择的目录 ...
- docker 的使用
docker 学习 1. Docker 允许你在容器内运行应用程序, 使用 docker run 命令来在容器内运行一个应用程序. 输出Hello world docker run ubuntu:15 ...
- C# 多线程中经常访问同一资源可能造成什么问题?
竞态条件和死锁. 如果两个或多个线程访问相同的对象,或者访问不同步的共享状态 ,就会出现竞态条件: 为了避免出现该问题,可以锁定共享的对象.但是过多的锁定也会有麻烦,那就是死锁: 当至少有两个线程被挂 ...
- mvc 控制器忽略某些方法
需求:登录信息验证,需要忽略登录注册这些接口的验证,通过给方法加忽略过滤器实现 1.需要忽略的方法加[IgnoreLoginFilter] 2.定义忽略过滤器 public class IgnoreL ...
- 4依赖倒转原则DIP
一.什么是倒转? 传统的过程式设计倾向于使高层次的模块依赖于低层次的模块,抽象层依赖 于具体的层次. 二.什么是依赖倒转原则 依赖倒转(Dependence Inversion Principle ) ...
- C#使用xpath简单爬取网站的内容
public static void Get() { // string xpathtrI = "//*[@id='classify-list']/dl/dd/a/cite/span/i&q ...
- JS的eval函数解密反混淆
https://www.hhtjim.com/js-decryption-de-obfuscate-eval-function.html JS的eval函数解密反混淆
- 基于VS Code快速搭建Java项目
有时候随手想写一点Java测试代码,以控制台程序为主,还会用到一些其它框架,并基于Maven构建. 1.Java Extension Pack一定要安装. 2.VS Code打开一个指定目录,创建相应 ...
- 如何在spring-boot web项目中启用swagger
swagger的三个项目及其作用 我们打开swagger的官网,会发现有三个swagger相关的项目,它们分别是 swagger-editor 作用是通过写代码,生成文档描述(一个json文件或其他格 ...