全部選中與取消操作,選中後的刪除(ajax)實現無重新整理效果

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

現在我們在編程的時刻總是要利用一些最新的技術去解決問題。。。。下面是我用ajax與jequery結合在一起使用的一個執行個體。希能給一起學習的朋友們帶來協助。

前台代碼:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>
    <script language="javascript" type="text/javascript" src="ajax/jquery.js"></script>
   <script language="javascript" type="text/javascript">
   //頁面的初始化
    $(document).ready( function(){ loadUserInfo(); });
    //載入使用者資訊到頁面
    function loadUserInfo()
    {
            $.ajax(
            {
                   type:"POST",
                   url:"Default.aspx",
                   data:{action:'action'},
                   success:loadUserInfoCallbace
            }
            );
    }
    //頁面初始化回呼函數
    function loadUserInfoCallbace(r)
    {
      if(r=="")
      {
         $("#userInfo").html("暫無資料");
      }
      else
      {
       $("#userInfo").html(r);
      }
    }
    //全部選中
    function CheckAll(obj)
    {
        $("input[@type=checkbox][@name=checkItem]").attr("checked",$(obj).attr("checked"));
    }
    //收集所有選中項
   function NumberID()
   {
      var allcheckboxs=$("input[@type=checkbox][@name=checkItem][checked]");
      var ids="";
      for(i=0;i<allcheckboxs.length;i++)
      {
       var id=$(allcheckboxs[i]).attr("id").split("_")[1];
        ids+=id;
        ids+=",";
      }
      return ids;

   }
   //刪除使用者
   function DeleteUser()
   {

      if(!window.confirm("您真的要刪除選中使用者資訊嗎?"))
        {
          return;
        }
     var ids=NumberID();
     $.ajax({
     type:'POST',
     url:'Default.aspx',
     data:{action:'Delete',userid:ids},
     success:deleteUserCall
     });
   }
   //刪除使用者回呼函數
   function deleteUserCall(r)
   {
     if(r=="ok")
     {
     alert("刪除成功");
     loadUserInfo();
     }
     else
     {
      alert("失敗");
     }
   }
   </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="text-align:center" id="userInfo">

    </div>


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

後台代碼:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using System.Text;

public partial class _Default : System.Web.UI.Page
{
    string Straction = "";
    protected void Page_Load(object sender, EventArgs e)
    {
        Straction = Request["action"];
        if(Straction=="action")
        {
          UserInfo();
        }
        if (Straction == "Delete")
        {
            DeleteUser();
        }
    }
    /// <summary>
    /// 周昕 2009-6-8號載入使用者詳細資料
    /// </summary>
    public void UserInfo()
    {
        SqlConnection mycon = new SqlConnection();
        mycon.ConnectionString = ConfigurationManager.ConnectionStrings["BoBoConn"].ToString();
        string sql = "select * from loginuser";
        SqlCommand mycom = new SqlCommand(sql, mycon);
        mycon.Open();
        SqlDataReader myda = mycom.ExecuteReader();
        StringBuilder str = new StringBuilder();
        str.Append("<table><tr><td><input id='checkall' name='checkall' type='checkbox' onclick='CheckAll(this)'/>全選</td><td>使用者名稱</td><td>使用者全名</td></tr>");
        while (myda.Read())
        {
            str.Append("<tr><td>");
            str.Append("<input id='checkItem_" + myda["ID"].ToString() + "' type='checkbox' name='checkItem' style='text-align='left' onclick=' NumberID()'/></td>");
            str.Append("<td>" + myda["UserName"].ToString() + "</td>");
            str.Append("<td>" + myda["FullName"].ToString() + "</td></tr>");
        }
        str.Append("</table>");
        str.Append(" <div style=' text-align:center'><input type='button' value='刪除' onclick='DeleteUser()' /></div>");
        Response.Clear();
        Response.ContentType = "application/text";
        Response.Write(str);
        Response.End();
    }
    /// <summary>
    /// 周昕 2009-6-8 刪除選中使用者的詳細資料
    /// </summary>
    public void DeleteUser()
    {
        //擷取使用者ID
        string strID = Request["userid"];
        string Userid = strID.Substring(0, strID.Length - 1);
        //轉換成為數組
        string[] stridArray = Userid.Trim().Split(',');
        string sql = "delete from loginuser where ID='" + stridArray[0].ToString() + "'";
        for (int i = 0; i < stridArray.Length; i++)
        {
            string id = stridArray[i].ToString();

            sql += "or ID='" + id + "'";
        }
        SqlConnection mycon = new SqlConnection();
        mycon.ConnectionString = ConfigurationManager.ConnectionStrings["BoBoConn"].ToString();
        mycon.Open();
        SqlCommand mycom = new SqlCommand(sql, mycon);
        int n = (int)mycom.ExecuteNonQuery();
        mycon.Close();
        if (n > 0)
        {
            Response.Clear();
            Response.ContentType = "application/text";
            Response.Write("ok");
            Response.End();
        }
        else
        {
            Response.Clear();
            Response.ContentType = "application/text";
            Response.Write("no");
            Response.End();
        }
    }
}

：

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More