全部选中与取消操作,选中后的删除(ajax)实现无刷新效果

最新推荐文章于 2022-06-22 10:46:00 发布

昕颖

最新推荐文章于 2022-06-22 10:46:00 发布

阅读量1.7k

点赞数

分类专栏： C#技术文档文章标签： ajax function string action javascript delete

本文链接：https://blog.csdn.net/zhouxin464585932/article/details/4264087

版权

C#技术文档专栏收录该内容

43 篇文章 0 订阅

订阅专栏

现在我们在编程的时刻总是要利用一些最新的技术去解决问题。。。。下面是我用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' οnclick='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' οnclick=' 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='删除' οnclick='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();
        }
    }
}

效果图：

昕颖

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
全部选中与取消操作,选中后的删除(ajax)实现无刷新效果

现在我们在编程的时刻总是要利用一些最新的技术去解决问题。。。。下面是我用ajax与jequery结合在一起使用的一个实例。希能给一起学习的朋友们带来帮助。前台代码:http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> 用户信息操作 /
复制链接

扫一扫