Table表分页以及增删改

最新推荐文章于 2024-07-03 11:19:28 发布

筱筱脱脱

最新推荐文章于 2024-07-03 11:19:28 发布

阅读量1.8k

点赞数 1

详细链接：https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak

説明：引用AjaxPro.2.dll来异步动态获取数据展示在页面上面，以Table表形式显示数据信息。

AjaxPro.2自行去网上下载，网址： http://www.ajaxpro.info/ ------->点击 Download latest version 7.7.31.1.下载

Jquery包可以自行去网上下载或者根据自己也可不适用Jquery

Jquery 下载地址：http://www.veryhuo.com/down/html/jquery-1.7.2.html

客户端：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!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 runat="server">
    <title></title>
    <style type="text/css">
body { 
font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 
margin:0; 
} 

#fullbg { 
background-color:gray; 
left:0; 
opacity:0.5; 
position:absolute; 
top:0; 
z-index:3; 
filter:alpha(opacity=50); 
-moz-opacity:0.5; 
-khtml-opacity:0.5; 
} 
#dialog { 
background-color:#fff; 
border:5px solid rgba(0,0,0, 0.4); 
height:400px; 
left:50%; 
margin:-200px 0 0 -200px; 
padding:1px; 
position:fixed !important; /* 浮动对话框 */ 
position:absolute; 
top:50%; 
width:400px; 
z-index:5; 
border-radius:5px; 
display:none; 
} 
#dialog p { 
margin:0 0 12px; 
height:24px; 
line-height:24px; 
background:#CCCCCC; 
} 
#dialog p.close { 
text-align:right; 
padding-right:10px; 
} 
#dialog p.close a { 
color:#fff; 
text-decoration:none; 
}  
        .did_22{width:0;height:0;position:fixed;left:50%;rigth:50%;top:50%;bottom:50%; }
    .aaa{width:600px;height:220px;margin-left:-300px;margin-top:-110px;background-color:#666;color:#fff;font-size:40px;font-family:"Comic Sans MS", cursive;text-align:center;line-height:220px;}
    </style>
    <script src="Javascript/jquery-1.7.2.min.js" type="text/javascript"></script>
     <script type="text/javascript">
         //通过新增按钮来控制表格的显示与隐藏
         var optionFlag = "save";
         var updateRowIndex = -1;
         var checkFlag = false; //默认为不显示
         function show() {
             var kd = document.body.scrollWidth;
             var gd = document.body.scrollHeight;
             if ((navigator.userAgent.indexOf('MSIE') >= 0)
    && (navigator.userAgent.indexOf('Opera') < 0)) {//iE浏览器
                 kd = window.screen.width;
                 gd = window.screen.height;
              }
             
             var bh = $("body").height();
             var bw = $("body").width();
             $("#fullbg").css({
                 height: gd,
                 width: kd,
                 display: "block"
             });
             $("#dialog").show();



             optionFlag = "save";
             var f = document.getElementById("did"); //获得id为did的 div
             if (!checkFlag) {
                 f.style.visibility = "visible";
             } else {
                 f.style.visibility = "hidden";
             }
             checkFlag = !checkFlag;
         }
         //通过保存按钮将数据添加到表格中
         function insertRow_() {
             switch (optionFlag) {
                 case "save":
                     insertRow_$save();
                     break;
                 case "update":
                     insertRow_$update();
                     break;
                 default:
                     alert("操作失败！！");
             }
         }
         function getName() {
             var name = WebApplication1.WebForm1.getName().value;
             alert(name);
         }
         function getDataSet() {
             var ds = WebApplication1.WebForm1.getDataSet().value;
             if (ds != null && typeof (ds) == "object" && ds.Tables != null) {
                 var s = new Array();
                 s[s.length] = "<table id='mytable' border = '1' cellspacing = '0'>";
                 s[s.length] = "<tr>";
                 s[s.length] = "<td>序号</td>";
                 s[s.length] = "<td>编号</td>";
                 s[s.length] = "<td>时间</td>";
                 s[s.length] = "<td>名称</td>";
                 s[s.length] = "<td colspan='2'>操作</td>";
                 s[s.length] = "</tr>";
                 for (var i = 0; i < ds.Tables[0].Rows.length; i++) {
                     s[s.length] = "<tr>";
                     s[s.length] = "<td>"+(parseInt(i)+1)+"</td>";
                     s[s.length] = "<td>" + ds.Tables[0].Rows[i].id + "</td>";
                     s[s.length] = "<td>" + ds.Tables[0].Rows[i].f_date + "</td>";
                     s[s.length] = "<td>" + ds.Tables[0].Rows[i].f_name + "</td>";
                     s[s.length] = "<td><span id='upid" + ds.Tables[0].Rows[i].id + "' style='display:none;'>" + ds.Tables[0].Rows[i].id + "</span><a id='upbtndelete" + ds.Tables[0].Rows[i].id + "' href='#'  onclick= update('upid" + ds.Tables[0].Rows[i].id + "','upbtndelete" + ds.Tables[0].Rows[i].id + "',this.parentNode.parentNode);  >编辑</a> <span id='id" + ds.Tables[0].Rows[i].id + "' style='display:none;'>" + ds.Tables[0].Rows[i].id + "</span><a id='btndelete" + ds.Tables[0].Rows[i].id + "' href='#'  onclick= getDelete('id" + ds.Tables[0].Rows[i].id + "','btndelete" + ds.Tables[0].Rows[i].id + "',this.parentNode.parentNode);  >删除</a></td>";
                     s[s.length] = "</tr>";
                 }

                 s[s.length] = "</table>";
                 document.getElementById("div1").innerHTML = s.join("");
             }
             else {
                 alert("调用Ajax接口函数错误！");
             }
         }

         $(document).ready(function () {
             getDataSet();
             
         })
         function getDelete(idd, btnidd,row) {
             var id = document.getElementById(idd);
             var bntid = document.getElementById(btnidd);
             var ds = WebApplication1.WebForm1.getDelete(id.innerHTML).value;

             var table = document.getElementById("mytable");
             table.deleteRow(row.rowIndex);

             refurbish_();

             if (ds == "1") {
                 alert("删除成功!");
             } else {
                 alert("删除失败!")
             }
            
             
          }

          //刷新
          function refurbish_() {
              var table = document.getElementById("mytable");
              //获得table的行数
              var rows = table.rows;
              for (var i = 1; i < rows.length; i++) {
                  rows[i].cells[0].innerHTML = i;
              }
          }

          //插入数据
          function insertRow_$save() {

             

              //通过id获得要添加数据的表格
              var table = document.getElementById("mytable");

              //将所输入的内容赋给定义的变量
              var titleName = document.getElementById("title").value;
              var digestName = document.getElementById("digest").value;
              var authorName = document.getElementById("author").value;
              //获取下拉框内的内容
              //var selectIndex_ = document.getElementById("select");
              //var option = selectIndex_.options[selectIndex_.selectedIndex];
              //var selectName = option.text;

              //获取编号的内容
              var numberid = table.rows.length;

              //在表尾添加一行数据
              var row_ = table.insertRow(table.rows.length);

              row_.insertCell(0).innerHTML = numberid;
              row_.insertCell(1).innerHTML = titleName;
              row_.insertCell(2).innerHTML = digestName;
              row_.insertCell(3).innerHTML = authorName;
              //row_.insertCell(4).innerHTML = selectName;
              row_.insertCell(4).innerHTML = "<td><span id='upid" + titleName + "' style='display:none;'>" + titleName + "</span><a id='upbtndelete" + titleName + "' href='#'  onclick= update('upid" + titleName + "','upbtndelete" + titleName + "',this.parentNode.parentNode);  >编辑</a> <span id='id" + titleName + "' style='display:none;'>" + titleName + "</span><a id='btndelete" + titleName + "' href='#'  onclick= getDelete('id" + titleName + "','btndelete" + titleName + "',this.parentNode.parentNode);  >删除</a></td>";

              var ds = WebApplication1.WebForm1.getInsert(titleName, digestName, authorName).value;

              document.getElementById("title").value = "";
              document.getElementById("digest").value = "";
              document.getElementById("author").value = "";
              //document.getElementById("select").options[0].selected = "true";

              var f = document.getElementById("did");
              f.style.visibility = "hidden";
              if (ds == "1") {
                  alert("insert数据成功！！");
              } else {
              alert("新增失败"); }
      }
      //通修改按钮对table里的数据进行修改
      function update(upid, upbtn, row) {
          var kd = document.body.scrollWidth;
          var gd = document.body.scrollHeight;
          if ((navigator.userAgent.indexOf('MSIE') >= 0)
    && (navigator.userAgent.indexOf('Opera') < 0)) {//iE浏览器
              kd = window.screen.width;
              gd = window.screen.height;
          }
          var bh = $("body").height();
          var bw = $("body").width();
          $("#fullbg").css({
              height: gd,
              width: kd,
              display: "block"
          });
          $("#dialog").show();


          updateRowIndex = row.rowIndex;
          optionFlag = "update";
          //对table里的数据进行回显
          document.getElementById("title").value = row.cells[1].innerHTML;
          document.getElementById("digest").value = row.cells[2].innerHTML;
          document.getElementById("author").value = row.cells[3].innerHTML;
//          var selectText = row.cells[4].innerHTML;
//          var sel = document.getElementById("select");
//          var ops = sel.options;
//          for (var i = 0; i < ops.length; i++) {
//              if (selectText == ops[i].text) {
//                  sel.options[i].selected = "true";
//              }
//          }
          var f = document.getElementById("did");
          f.style.visibility = "visible";
      }


       //修改后的保存
            var tr;
            function insertRow_$update() {
                var table = document.getElementById("mytable");
                tr = table.rows[updateRowIndex];

                var p = document.getElementById("title");
                tr.cells[1].innerHTML = p.value;

                var p1 = document.getElementById("digest");
                tr.cells[2].innerHTML = p1.value;

                var p2 = document.getElementById("author");
                tr.cells[3].innerHTML = p2.value;

//                p = document.getElementById("select");
//                var Index_ = p.selectedIndex;
//                var option = p.options[Index_];
//                var selectName = option.text;
//                tr.cells[4].innerHTML = selectName;



                var ds = WebApplication1.WebForm1.getUpdate(p.value, p1.value, p2.value).value;

                document.getElementById("title").value = "";
                document.getElementById("digest").value = "";
                document.getElementById("author").value = "";
                //document.getElementById("select").options[0].selected = "true";

                var f = document.getElementById("did");
                f.style.visibility = "hidden";


                if (ds == "1") {

                    alert("update数据成功！！");
                }
                else {

                    alert("修改失败"); }
            }
        

    </script>
    <script type="text/javascript">
        var pageSize = 15;    //每页显示的记录条数
        var curPage = 0;        //当前页
        var lastPage;        //最后页
        var direct = 0;        //方向
        var len;            //总行数
        var page;            //总页数
        var begin;
        var end;
        $(document).ready(function display() {
            len = $("#mytable tr").length - 1;    // 求这个表的总行数，剔除第一行介绍
            page = len % pageSize == 0 ? len / pageSize : Math.floor(len / pageSize) + 1; //根据记录条数，计算页数
            curPage = 1;    // 设置当前为第一页
            displayPage(1); //显示第一页
            document.getElementById("btn0").innerHTML = "当前 " + curPage + "/" + page + " 页    每页 ";    // 显示当前多少页
            document.getElementById("sjzl").innerHTML = "数据总量 " + len + "";        // 显示数据量
            document.getElementById("pageSize").value = pageSize;

            $("#btn1").click(function firstPage() {    // 首页
                curPage = 1;
                direct = 0;
                displayPage();
            });
            $("#btn2").click(function frontPage() {    // 上一页
                direct = -1;
                displayPage();
            });
            $("#btn3").click(function nextPage() {    // 下一页
                direct = 1;
                displayPage();
            });
            $("#btn4").click(function lastPage() {    // 尾页
                curPage = page;
                direct = 0;
                displayPage();
            });
            $("#btn5").click(function changePage() {    // 转页
                curPage = document.getElementById("changePage").value * 1;
                if (!/^[1-9]\d*$/.test(curPage)) {
                    alert("请输入正整数");
                    return;
                }
                if (curPage > page) {
                    alert("超出数据页面");
                    return;
                }
                direct = 0;
                displayPage();
            });

            $("#pageSizeSet").click(function setPageSize() {    // 设置每页显示多少条记录
                pageSize = document.getElementById("pageSize").value;    //每页显示的记录条数
                if (!/^[1-9]\d*$/.test(pageSize)) {
                    alert("请输入正整数");
                    return;
                }
                alert("设置成功");

                len = $("#mytable tr").length - 1;
                page = len % pageSize == 0 ? len / pageSize : Math.floor(len / pageSize) + 1; //根据记录条数，计算页数
                curPage = 1;        //当前页
                direct = 0;        //方向
                firstPage();
                
            });
        });

        function displayPage() {
            if (curPage <= 1 && direct == -1) {
                direct = 0;
                alert("已经是第一页了");
                return;
            } else if (curPage >= page && direct == 1) {
                direct = 0;
                alert("已经是最后一页了");
                return;
            }
            lastPage = curPage;

            // 修复当len=1时，curPage计算得0的bug
            if (len > pageSize) {
                curPage = ((curPage + direct + len) % len);
            } else {
                curPage = 1;
            }



            document.getElementById("btn0").innerHTML = "当前 " + curPage + "/" + page + " 页    每页 ";        // 显示当前多少页

            begin = (curPage - 1) * pageSize + 1; // 起始记录号
            end = begin + 1 * pageSize - 1;    // 末尾记录号

            if (end > len) end = len;
            $("#mytable tr").hide();    // 首先，设置这行为隐藏
            $("#mytable tr").each(function (i) {    // 然后，通过条件判断决定本行是否恢复显示
                if ((i >= begin && i <= end) || i == 0)//显示begin<=x<=end的记录
                    $(this).show();
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    <input type="button" value="ddddddd" onclick="getDataSet()" />
    <input type="button" value="新增" onclick="show()"></input>
    <a id="btn0"></a>
    <input id="pageSize" type="text" size="1" maxlength="2" value="getDefaultValue()"/><a> 条 </a> <a href="#" id="pageSizeSet">设置</a> 
    <a id="sjzl"></a> 
    <a  href="#" id="btn1">首页</a>
    <a  href="#" id="btn2">上一页</a>
    <a  href="#" id="btn3">下一页</a>
    <a  href="#" id="btn4">尾页</a> 
    <a  href="javascript:void()"  onclick="" id="A1">尾页1</a> 
    <a>转到 </a>
    <input id="changePage" type="text" size="1" maxlength="4"/>
    <a>页 </a>
    <a  href="#" id="btn5">跳转</a>

        <div id="div1"></div>
    <span id="dd" onclick="getName()">get</span>
    </div>
    <div align="center" id="did" style="visibility:hidden;">
       
   </div>

   <script type="text/javascript">
       //显示灰色 jQuery 遮罩层 
       function showBg() {
           var bh = $("body").height();
           var bw = $("body").width();
           $("#fullbg").css({
               height: bh,
               width: bw,
               display: "block"
           });
           $("#dialog").show();
       }
       //关闭灰色 jQuery 遮罩 
       function closeBg() {
           $("#fullbg,#dialog").hide();
       } 
</script>

   <div id="main"><a href="javascript:showBg();">点击这里查看效果</a> 
<div id="fullbg"></div> 
<div id="dialog"> 
<p class="close"><a href="#" onclick="closeBg();">关闭</a></p> 
    <form action="">
         <table>
          <tr>
      <td>编号：</td>
      <td><input type="text" id="title"></input></td>
      </tr><tr>
      <td>时间：</td>
      <td><input type="text" id="digest"></input></td>
    </tr>
  
    <tr>
      <td>名称：</td>
      <td><input type="text" id="author"></input></td>
    </tr>
   </table>
   <br>  
      <center>
         <input type="button" value="保存" onclick="insertRow_()"></input>
         <input type="reset" value="重置"></input>
      </center>
      </form>
</div> 
</div> 

    </form>
</body>
</html>

服务器端：

using System;
using System.Collections.Generic;

using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

namespace WebApplication1
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            AjaxPro.Utility.RegisterTypeForAjax(typeof(WebForm1));//注册ajaxtypeof(写引用的类或者写当前页面的名称)
        }
        [AjaxPro.AjaxMethod]
        public string getName()
        {
            return "dddddddddddddd";
        }
        [AjaxPro.AjaxMethod]//必须要写
        public DataSet getDataSet()
        {
            DataSet dt = new DataSet();
            try
            {
                DataTable ds = new DataTable();
                ds.Columns.Add(new DataColumn("id", typeof(Int32)));
                ds.Columns.Add(new DataColumn("f_date", typeof(String)));
                ds.Columns.Add(new DataColumn("f_name", typeof(String)));
                DataRow dr = ds.NewRow();
                dr["id"] = 1;
                dr["f_date"] = "2016-09-09";
                dr["f_name"] = "订购1000元的货物";
                DataRow dr1 = ds.NewRow();
                dr1["id"] = 2;
                dr1["f_date"] = "2016-09-10";
                dr1["f_name"] = "订购10000元的货物";
                ds.Rows.Add(dr);
                ds.Rows.Add(dr1);
                for (int i = 0; i < 8000; i++)
                {
                    DataRow dr2 = ds.NewRow();
                    dr2["id"] = i+3;
                    dr2["f_date"] = "2016-09-10";
                    dr2["f_name"] = "订购"+(i+2)*2+"元的货物";
                    ds.Rows.Add(dr2);
                }
                dt.Tables.Add(ds);
                return dt;
            }
            catch
            {
                return null;
            }
        }
        [AjaxPro.AjaxMethod]
        public string getDelete(int id) 
        {
            if (id == 6)
                return "1";
            else
                return "0";
        }
        [AjaxPro.AjaxMethod]
        public string getInsert(string id,string data,string name) 
        {

            return "1";
        }
        [AjaxPro.AjaxMethod]
        public string getUpdate(string id, string data, string name)
        {

            return "1";
        }
    }
}

web.config文件加入下面的内容即可

<system.web>

<httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>
</httpHandlers>

............................

筱筱脱脱

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Table表分页以及增删改

详细链接：https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak説明：引用AjaxPro.2.dll来异步动态获取数据展示在页面上面，以Table表形式显示数据信息。AjaxPro.2自行去网上下载，网址： http://www.ajaxpro.info/ -------&gt;点击 D...
复制链接

扫一扫