asp_异步列表的增删查改

原创 2013年12月03日 15:21:49

UserList.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--html是静态页面,不能执行C#代码,则不能用<% %>来执行C#代码,若想执行,则是用JQuery-->
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/tableStyle.css" />
    <script src="../js/jquery-1.7.1.js" type="text/javascript"></script>


   
    <!--主题引用-->
    <link href="../js/jquery-easyui-1.3.1/themes/default/easyui.css" rel="stylesheet"
        type="text/css" />
    <!-- 图标引用-->
    <link href="../js/jquery-easyui-1.3.1/themes/icon.css" rel="stylesheet" type="text/css" />
   <!-- 一下三条jquary顺序不能颠倒-->
    <script src="../js/jquery-easyui-1.3.1/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="../js/jquery-easyui-1.3.1/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../js/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>


    <script src="../js/datapattern.js" type="text/javascript"></script><!--日期转换-->
    <script type="text/javascript">
        $(function () {


            initTableList();
            //            (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-M-d h:m:s.S");
            $("#showDetail").css("display", "none");
            $("#editDiv").css("display", "none");
            $("#addDiv").css("display", "none");
        });
            //提交添加新闻表单到后台
            function subAddFrom() {
                //把整个表单序列化成JSON  ARRAY
                var formData = $("#frmAdd").serializeArray();
                var sendData = { txtTitle: $("#txtTitle").val(), txtPeople: $("#txtPeople").val() };
                //表单提交
                //                $.post("Add.ashx", formData, function (data) {
                //                    if (data == "OK") {
                //                        //关闭对话框刷新列表
                //                        $("#addDiv").dialog("close");
                //                        //刷新表格
                //                        initTableList();


                //                    }
                //                });


                //$.get
                //$.post
                //$.getJSON
                $.ajax({
                    url: "Add.ashx",
                    type: "POST",
                    data: fromData,
                    async: true, //true时为异步请求,默认是true
                    cache: false, //解决缓存问题
                    success: function (data) {
                        if (data == "OK") {
                            //关闭对话框刷新列表
                            $("#addDiv").dialog("close");
                            //刷新表格
                            initTableList();
                        }
                        else {
                            alert(data);
                        }
                    }
                });
            }
            function BindAddEvent(){
            $("#btnAdd").click(function () {
                $("#addDiv").css("display", "block");
                $("#addDiv").dialog({
                    title: "对话框",
                    model: true,
                    width: 300,
                    height: 300,
                    collapsible: true,
                    minimizable: true,
                    maxmizable: true,
                    resizable: true,
                    button: [{
                        text: "添加",
                        id: 'btnAdd',
                        iconCls: 'icon-add',
                        handler: function () {
                            subAddFrom
                            //                            //把整个表单序列化成JSON  ARRAY
                            //                            var temp = $("#frmAdd").serializeArray();
                            //                            var temp2 = { txtTitle: $("#txtTitle").val(), txtPeople: $("#txtPeople").val() };
                            //                            //表单提交
                            //                            $.post("AddMain.ashx", temp, function () {


                            //                            });
                        }
                    }, {
                        text: "关闭",
                        id: 'btnClose',
                        iconCls: 'icon-cancel', //图标
                        handler: function () {//按钮被点击时  执行此方法
                            $("#addDiv").dialog("close");
                        }
                    }]
                });
            });
        
        }
        function initTableList() {
            $.getJSON("LoadAllNews.ashx", {}, function (data) {


                $("#tbData").html("");
                for (var key in data) {//加载表格的数据
                    var main = data[key];
                    $("#tbData").append("<tr><td>" + main.ID + "</td><td>" + main.title + "</td><td>" + (eval(main.Date.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-M-d h:m:s.S") + "</td><td><a href='#' class='detail' nId='" + mian.ID + "'>详情</a>&nbsp;&nbsp;<a class='editLink' href='javascript:void(0)' uId='" + main.ID + "'>修改</a>&nbsp;&nbsp;<a class='deleteLink' href='#'>删除</a></td></tr>");
               
                bindDetailEvent();
                bindDeleteEvent();
                BindAddEvent();
                bindEditEvent();
               
        }
         });
        function bindEditEvent()
        {
            $(".editLink").click(function () { 
            var id=$(this).attr("uId");
            //弹出对话框之前,对文本赋值
            $.ajax({
              url:"GetNewsById.ashx",
              data:{newId:id},
              type:"Post",
              dataType:"json",
              success:function(data){
                 var editId=data.ID;
                 $("#hidId").val(editId);
                 var title=data.title;
                 $("#txtEditTitle").val(title);
                 var people=data.people;
                  $("#txtEditPeople").val(people);
              }
            });
                //弹出一个修改的对话框});
                $("#editDiv").css("display","block");
                  $("#editDiv").dialog({
                    title: "对话框",
                    model: true,
                    width: 300,
                    height: 300,
                    collapsible: true,
                    minimizable: true,
                    maxmizable: true,
                    resizable: true,
                    button: [{
                        text: "修改",
                        id: 'btnEdit',
                        iconCls: 'icon-add',
                        handler: function () {
                            subEditFrom
                            //                            //把整个表单序列化成JSON  ARRAY
                            //                            var temp = $("#frmAdd").serializeArray();
                            //                            var temp2 = { txtTitle: $("#txtTitle").val(), txtPeople: $("#txtPeople").val() };
                            //                            //表单提交
                            //                            $.post("AddMain.ashx", temp, function () {


                            //                            });
                        }
                    }, {
                        text: "关闭",
                        id: 'btnClose',
                        iconCls: 'icon-cancel', //图标
                        handler: function () {//按钮被点击时  执行此方法
                            $("#editDiv").dialog("close");
                        }
                    }]
                });
            });
        }
         //提交修改的表单
         function subEditFrom(){
           //将修改的表单提交到后台
           var editFrmData=$("#editFrm").serializeArray();
           $.post("Edit.ashx",editFrmData,function(data){
              if(data=="OK")
              {
                   //如果后台返回成功
           //关闭对话框
            $("#editDiv").dialog("close");
           //刷新列表
           initTableList();
              }
              else
              {
                 alert(data);
              }
           });
          
         }


        function bindDetailEvent() {
            //详情的点击事件,必须在加载完成之后
            $(".detail").click(function () {
                //通过当前的ID把数据再查一遍
                $.getJSON("GetNewsById.ashx", { id: $(this).attr("nId") }, function () {
                    $("#title").text(data.title);
                    $("#people").text(data.people);
                    $("#Date").text(data.Date);
                    $("#content").text(data.content);
                });
                //弹出对话框
                //先隐藏一个div
                $("#showDetail").css("display", "block");
                $("#showDetail").dialog({
                    title: "对话框",
                    model: true,
                    width: 300,
                    height: 300,
                    collapsible: true,
                    minimizable: true,
                    maxmizable: true,
                    resizable: true,
                    button: [{
                        text: "确定",
                        id: 'btnOK',
                        iconCls: 'icon-add',
                        handler: function () {
                            alert("确定被点击了");
                        }
                    }, {
                        text: "关闭",
                        id: 'btnClose',
                        iconCls: 'icon-cancel', //图标
                        handler: function () {//按钮被点击时  执行此方法
                            alert("取消被点击了");
                        }
                    }]
                });
        


        function bindDeleteEvent() {
        //删除方法1
//            $("#tbData a:contains('删除')").click(function () {
//                if (confirm("您会删除吗")) {
//                    //发送异步请求,把Id发送到后台,后台删除这条数据
//                    //删除成功之后
//                    $(this).parent().hide(2000); // $(this).parent().hide("slow").remove();
//                }
//            });
     //删除方法2:
        $(".deleteLink").click(function(){
          var id=$(this).attr("uId");
          var trDom=$(this).parent().parent();
//        $.messager.alert("提醒消息","提醒的内容");
            $.messager.confirm("提醒的消息","您会删除吗?",function(r){
              if (r){
                 $.get("Delete.ashx",{id:id},function(data){
                      if (data=="ok")
                      {
                      trDom.hide(1500);
                      }
                      else
                      {
                         $.messager.alert("提醒消息标题","删除败了");
                      }
                 });
              }
            });
        });
        }
    </script>
</head>
<body>
  <a id="btnAdd" href="javascript:void(0)">添加</a>
<!--表格数据的 开始-->
   <table>
   <thead>
      <tr>
        <th>编号</th>
         <th>新闻标题</th>
          <th>新闻发布时间</th>
           <th>操作</th>
      </tr>
      </thead>
      <tbody id="tbData">
         <tr>
          
         </tr>
      </tbody>
   </table>
   <!--表格数据的结束-->




   <!--弹出的详情对话框-->
   <div id="showDetail">
     <h3>我是弹出来的对话框</h3>
     <table>
       <tr>
         <td>新闻标题</td><td><span id="title"></span></td>
       </tr>
       <tr>
         <td>新闻发布人</td><td><span id="people"></span></td>
       </tr>
       <tr>
         <td>新闻发布时间</td><td><span id="Date"></span></td>
       </tr>
       <tr>
         <td>新闻内容</td><td><span id="content"></span></td>
       </tr>
     </table>
   </div>
   <!--弹出的详情对话框的结束-->


   <!--弹出的添加对话框开始-->
       <div id="addDiv">
     <h3>我是弹出来的对话框</h3>
     <form id="frmAdd">
     <table>
       <tr>
         <td>新闻标题</td><td><input type="text" name="txtTitle" id="txtTitle"/></td>
       </tr>
       <tr>
         <td>新闻发布人</td><td><input type="text" name="txtPeople" id="txtPeople"/></td>
       </tr>
       
     </table>
     </form>
   </div>
    <!--弹出的添加对话框结束-->


    
   <!--弹出的修改对话框开始-->
       <div id="editDiv">
     <h3>修改的表单</h3>
     <form id="editFrm">
     <input type="hidden" value="" id="hidId" name="hidId"/>
     <table>
       <tr>
         <td>新闻标题</td><td><input type="text" name="txtEditTitle" id="txtEditTitle"/></td>
       </tr>
       <tr>
         <td>新闻发布人</td><td><input type="text" name="txtEditPeople" id="txtEditPeople"/></td>
       </tr>
       
     </table>
     </form>
   </div>
    <!--弹出的修改对话框结束-->
</body>
</html>

相关文章推荐

Mybatis基于注解实现增删查改和多参数列表查询

在【Mybatis】Mybatis入门概述及第一个Mybatis实例实现增删改查 和【Mybatis】Mybatis接口编程方式实现增删改查 演示了如何使用XML来操作My...

SSM搭建-Mybatis基于注解实现增删查改和多参数列表查询(20)

Mybatis基于注解实现增删查改和多参数列表查询
  • nimiky
  • nimiky
  • 2016年11月02日 18:59
  • 1468

23、SSM框架-Mybatis基于注解实现增删查改和多参数列表查询(5)

在前面的文章中演示了如何使用XML来操作Mybatis实现CRUD,但是大量的XML配置文件的编写是非常烦人的。因此Mybatis也提供了基于注解的配置方式,下面我们来演示一下使用接口加注解来实现CR...

Asp.net MVC4 使用EF实现数据库的增删查改

mvc4asp.net数据库数据 EF的使用 步骤: (1)将EF添加到项目:在Model右击添加新建项 找到ADO.NET实体数据模型,接着。。。 (2)实现数据库的增删改查 ...

ASP.NET 电影票信息的增删查改

题目1、使用Code First技术创建一个Movie数据模型。public class Movie { public int ID { get; set; } //电影编...

ASP.NET 电影票信息的增删查改

  • 2016年12月14日 09:36
  • 30.96MB
  • 下载

黑马程序员_学习日记70_721ASP.NET(Web三层增删查改CRUD)

Web三层增删查改(CRUD) 主要为了演示Web三层的结构,具体实现方法在学习过程中可作进一步优化,比如可以用SqlHelper或EF代替DataSet实现增删查改,用“男”和“女”代替True和...

asp的增删查改

  • 2011年12月01日 16:14
  • 37KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:asp_异步列表的增删查改
举报原因:
原因补充:

(最多只允许输入30个字)