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 ...
随机推荐
- 物联网系统与CoAP之Hello,World
物联网系统与CoAP Hello,World 关于CoAP与物联网系统我们在上一篇中(ps:CoAP与物联网系统)中做一个简单的介绍,接着我们便開始试试CoAP协议的应用 CoAP应用 開始之前我们须 ...
- am335x ubi Read-only mode
是因为kernel里面有一个错误,要注释一下就好.
- HTTP 07 追加协议与 Ajax
Ajax 解决方法 是一种有效的利用 JavaScript 和 DOM 的操作, 以达到局部Web 页面替换加载异步的通信手段.以达到局部web页面替换加载异步通信手段.和以前的同步通信相比, 由于它 ...
- springboot项目使用拦截器修改/添加前端传输到后台header和cookie参数
本质上来讲,request请求当中的参数是无法更改的,也不能添加或者删除. 但在后台程序中,一般对request的参数的操作,都是通过request的getParameter.getParameter ...
- laravel5.8笔记十：Redis操作
> 位置:\vendor\laravel\framework\src\Illuminate\Redis\Connections\PhpRedisConnection.php > 参考:ht ...
- Ai challenger 2017 image caption小结
参加了今年的ai challenger 的image caption比赛,最终很幸运的获得了第二名.这里小结一下. Pytorch 越来越火了.. 前五名有三个pytorch, 两个tensorflo ...
- docker-compose & docker 镜像/加速
docker-compose: http://sanwen.net/a/nuwruoo.html docker加速: http://guide.daocloud.io/dcs/daocloud-915 ...
- HBuilder控制台集成命令提示符(终端/CMD)功能
参考:https://jingyan.baidu.com/album/6b97984dc9cda31ca2b0bf00.html?picindex=3
- openshift 配置 bitbucket 的webhook
参考 https://docs.openshift.org/latest/dev_guide/builds/triggering_builds.html oc set triggers bc < ...
- js jq 手机号实现(344) 附带删除功能 jq 实现银行卡没四个数加一个空格 附带删除功能
js 手机号实现(344) 下面有将正则验证去掉“-” 或“空格” 下一篇博客有单独的删除功能方法 <!DOCTYPE html> <head> <meta char ...