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 显示，删除，批量删除，修改反填功能实现的更多相关文章

  1. SpringMVC+Ajax实现文件批量上传和下载功能实例代码

    需求: 文件批量上传,支持断点续传. 文件批量下载,支持断点续传. 使用JS能够实现批量下载,能够提供接口从指定url中下载文件并保存在本地指定路径中. 服务器不需要打包. 支持大文件断点下载.比如下 ...

  2. springboot + ajax + mybatis 实现批量删除

    实现思路: 1. checkbox全选获取批量删除的id数组 2. ajax以字符串的形式将id数组传给控制器 3. 控制器将字符串分割成List数组作为参数传给mapper 具体代码: 1. 前端代 ...

  3. 使用Ajax实现的批量删除操作（C#）

    今天做了一个简单的批量删除操作,虽然简单,但是很多问题出现,终究还是技术不够熟练. 现在在这里跟大家分享一下.仅供学习... 1.在前台获取用户点击的信息id,把这里id封装到一个数组里面:(rows ...

  4. Vue-表单验证-全选-反选-删除-批量删除

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. ssm批量删除

    ssm批量删除 批量删除:顾名思义就是一次性删除多个.删除是根据前台传给后台的id,那么所谓批量删除,就是将多个id传给后台,那么如何传过去呢,前后台的交互该如何实现? 1.jsp页面,先选中所有的要 ...

  6. 批量删除wps文档里的回车符的方法！WPS使用技巧分享！

    有时候整理文档的时候,如果是从网上复制的文字,可能会因为复制而产生很多的回车符.怎样能批量去掉这些个回车符呢,下面马上告诉你批量删除wps文档里的回车符的方法!WPS使用技巧分享! 想要批量删除批量删 ...

  7. sql server中的大数据的批量操作（批量插入，批量删除）

    首先我们建立一个测试用员工表 ---创建一个测试的员工表--- create table Employee( EmployeeNo int primary key, --员工编号 EmployeeNa ...

  8. angularjs实现购物车批量删除，filter模糊查询，排序

    数据源 $scope.data=[ {num:1234,name:"ipad",price:3400.00,count:10}, {num:1235,name:"ipho ...

  9. think php 上下架修改+jq静态批量删除+ajax删除+全选

    视图代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...

随机推荐

  1. EntityFramework安装失败

    PM> Install-Package EntityFramework正在尝试收集与目标为“.NETFramework,Version=v4.0”的项目“ConsoleApplication1” ...

  2. 【转】Eclipse 乱码 解决方案总结（UTF8 -- GBK）

    转载自: http://www.cnblogs.com/bluestorm/archive/2012/09/20/2695567.html UTF8 --> GBK;   GBK --> ...

  3. SecureCRT自动上传文件python脚本

    本人在ubuntu下使用SecureCRT,上传文件习惯用rz命令.每次上传都弹对话框选择文件按确定后才上传,感觉很费力.最后自己摸索整理出一个脚本. 使用方法是,在[Script]菜单点[Run.. ...

  4. vlc-ts

    https://github.com/jiayayao/vlc_2.1.0-vs_2010 https://wenku.baidu.com/view/a0634d26336c1eb91a375d70. ...

  5. [原创]Fashion汽车定位器拆解

    随着共享单车的爆发增长,定位方案被彻底激活.当下主流的共享单车都采用了MTK2503的方案(后续再详细分解),本文针对某商城热卖的汽车定位器进行拆解分析. 第一部分,定位器外观. 第二部分,拆解开壳, ...

  6. springboot-multisource

    项目中经常会出现需要同时连接两个数据源的情况,这里基于MyBatis来配置两个数据源,并演示如何切换不同的数据源. 通过自定义注解+AOP的方式,来简化这种数据源的切换操作. <properti ...

  7. Elasticsearch学习笔记——常用命令

    1.创建一个名字为index的topic curl -XPUT http://localhost:9200/index 2.创建一个mapping curl -XPOST http://localho ...

  8. Webservice学习之WSDL详解

    1. <definitions/> 这部分在基础篇里已经介绍,主要说明引用了哪些schema以及schema的位置等,可以看下基础篇的介绍,SayHello的Demo这部分内容如下: &l ...

  9. 事件Event

    信号量可以控制一个或多个进程同时进行阻塞或执行. 一个事件被创建后,默认是阻塞状态. from multiprocessing import Event e = Event() # 创建一个事件,默认 ...

  10. JAVA课程课后作业03之作业一

    作业:使用类的静态字段和构造函数,可以跟踪某个类所创建对象的个数.请写一个类,在任何时候都可以向它查询“你已经创建了多少个对象?”. 代码: package TestJava; import java ...