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 ...
随机推荐
- Oracle 11gR2 RAC DBCA无法识别ASM磁盘组(ORA-19504,ORA-15045,ORA-17502,ORA-15081)
ORA-19504: failed to create file "+DATA" ORA-15045: ASM file name '+DATA' is not in refere ...
- Web API 异常处理
Web Api的ExceptionFilter只能截获并处理Action执行过程中发生的异常,在Action执行过程之外如果出现异常,ExceptionFilter是无能为力的. 这些异常包括: 1. ...
- [转]理解Go语言中的nil
最近在油管上面看了一个视频:Understanding nil,挺有意思,这篇文章就对视频做一个归纳总结,代码示例都是来自于视频. nil是什么 相信写过Golang的程序员对下面一段代码是非常非常熟 ...
- win10下安装基于caffe的 Faster-Rcnn
安装教程 本篇博客将会教会你在Windows下配置py-faster-rcnn,请细心仔细阅读.说白了,Windows下配置这些东西就是一个坑. 安装配置Anaconda 由于py-faste ...
- R包的小技巧
通常我们都是直接使用library(pkg_name) 的形式加载R包,在同一台机器上面,对于我们而言,这个包所在的路径一定是在.libPaths() 路面的,但是对于其他用户而言,这个路径可能不存 ...
- ajax跨域，这应该是最全的解决方案了
前言 从刚接触前端开发起,跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了,16年时也整理过一篇相关文章,但是感觉还是差了点什么,于是现在重新梳理了一下. 个人见 ...
- iOS开发之--UIImageView的animationImages动画
图片动画实现,代码如下: -(UIImageView *)animationImageView { if (!_animationImageView) { _animationImageView= [ ...
- Rafy环境配置
如果现在项目已经创建好啦,要使用Rafy框架进行存储,这里我简单的总结下配置的环境步骤: 一.添加引用Rafy的SDK,如下几个; 二.新建文件夹Entities 在此文件夹下创建rafy实体以及仓库 ...
- VS2017 编译Assimp
1. 下载Assimp:http://assimp.sourceforge.net/ 2. 要下载和安装DirectX SDK 安装出现错误,错误代码s1023,解决方法:https://blog.c ...
- 【消灭代办】第5周 - null拷贝,input自适应,进度条加载,颜色随机值
2018.12.10 代办一:javascript中js怎么拷贝null的值 null属于简单类型的数值,直接进行拷贝即可: 2018.12.11 代办二:怎么让input自适应宽度? 这样是写下代办 ...