JqueryAjax分页加载图片列表(编辑、支持、反对、删除记录同时删除文件)

最新推荐文章于 2022-03-28 19:57:53 发布
xuxin_2821
最新推荐文章于 2022-03-28 19:57:53 发布
阅读量124
点赞数
分类专栏： Jquery
本文链接：https://blog.csdn.net/xuxin_2821/article/details/97942615
版权
Jquery 专栏收录该内容
2 篇文章 0 订阅
订阅专栏
1、列表页面的前台主要代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #pList,#photo
        {
            width:600px;
            border:solid 1px red;
            border-collapse:collapse;
            display:none;
        }
        #pList td, #pList th,#photo td
        {
        	border:solid 1px red;
        }
        
        #photo
        {
            	width:600px;
        }
        img
        {
            border:0px;	
        }
        
        #tbEdit
        {
            border:solid 1px black;
            width:300px;
            position:absolute;
            top:300px;
            left:300px;
            background-color:White;
            height:150px;	
            display:none;
        }
    </style>
    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        //将序列化成json格式后日期(毫秒数)转成日期格式
        function ChangeDateFormat(cellval) {
            var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            return date.getFullYear() + "-" + month + "-" + currentDate;
        }
        $(function() {
            getPage(1);

            //确定
            $("#btnOk").click(function() {

            var title = $("#txtName").val();
                var id = $("#txtId").val();
                var url = $("#txtUrl").val();

                var data = { title: title, id: id, url: url };

                $.post("PhotoEdit.ashx", data, function(msg) {
                    if (msg == "1") {
                        alert("修改成功");
                        $("#tbEdit").hide();
                    } else if (msg == "0") {
                        alert("修改失败");
                    }
                });
            })
            //取消
            $("#btnCancel").click(function() {
                $("#tbEdit").hide();
            })
        })      
        //获取分页数据
        function getPage(pageIndex) {
            //清空之前的数据
            $("#content").html("");
            var pageCount;
            $.getJSON("PagedList.ashx?page=" + pageIndex, function(data) {
                //读取json中的总页数
                pageCount = data[data.length - 1].pageCount;

                var table = $("<table id='pList' ></table>");
                //添加表头
                table.append($("<tr><th>序号</th><th>名字</th><th>照片</th><th>点击次数</th><th>支持</th><th>反对</th><th>时间</th><th>操作</th></tr>"));

                for (var i = 0; i < data.length - 1; i++) {
                    var photo = data[i];
                    var tr = $("<tr></tr>");

                    var td = $("<td>" + (i + 1) + "</td>");
                    tr.append(td);

                    td = $("<td><a href='PhotoDetails.aspx?id=" + photo.PId + "'>" + photo.PTitle + "</a></td>");
                    tr.append(td);

                    td = $("<td><img src='images/" + photo.PUrl + "' width='150' height='100' /></td>");
                    tr.append(td);

                    td = $("<td>" + photo.PClicks + "</td>");
                    tr.append(td);

                    td = $("<td><a pid='" + photo.PId + "' href=''><img src='images/85.gif' /></a>(<span>" + photo.PUp + "</span>)</td>");
                    tr.append(td);
                    //点击支持的点击事件
                    td.children("a").click(function() {
                        var id = $(this).attr("pid");
                        var span = $(this).next();
                        //请求一般处理程序，给支持+1
                        $.get("Update.ashx?id=" + id + "&type=up", function(msg) {
                            if (msg == "1") {
                                //成功
                                //更新页面上span标签中的值
                                var n = parseInt(span.text()) + 1;
                                span.text(n);
                            }
                            else if (msg == "0") {
                                alert("更新失败");
                            }
                        })
                        return false;
                    })

                    td = $("<td><a pid='" + photo.PId + "' href=''><img src='images/86.gif' /></a>(<span>" + photo.PDown + "</span>)</td>");
                    tr.append(td);
                    //点击反对的点击事件
                    td.children("a").click(function() {
                        var id = this.pid;
                        //a标签后的span标签
                        var span = $(this).next();

                        //请求一般处理程序，给反对+1
                        $.get("Update.ashx?id=" + id + "&type=down", function(msg) {
                            if (msg == "1") {
                                //成功
                                //更新页面上span标签中的值
                                var n = parseInt(span.text()) + 1;
                                span.text(n);

                            }
                            else if (msg == "0") {
                                alert("更新失败");
                            }
                        })
                        return false;
                    })

                    td = $("<td>" + ChangeDateFormat(photo.PTime) + "</td>");
                    tr.append(td);

                    //删除编辑
                    td = $("<td><a pid='" + photo.PId + "' url='" + photo.PUrl + "' href='#'>删除</a>  <a href='#' pid='" + photo.PId + "'>编辑</a></td>");
                    tr.append(td);

                    //删除
                    td.children("a:first").click(function() {

                        var id = $(this).attr("pid");
                        var url = $(this).attr("url");
                        //当前点击的a标签
                        var link = $(this);
                        $.get("PhotoDelete.ashx", "id=" + id + "&url=" + url, function(msg) {
                            if (msg == "1") {
                                //删除a标签所在的tr
                                //link.parent().parent().remove();

                                //删除成功  加载当前页码的数据
                                getPage(pageIndex);

                            } else if (msg == "0") {
                                alert("删除失败");
                            }
                        })
                        return false;
                    })


                    //编辑
                    td.children("a:last").click(function() {
                        $("#tbEdit").show("slow");
                        //当前a标签所在的行
                        var row = $(this).parent().parent();
                        var title = row.children("td:eq(1)").text();
                        var id = $(this).attr("pid");

                        var url = row.children("td:eq(2)").children("img").attr("src");
                        url = url.replace("images/", "");
                        //获取到表格中的图片标题和url，给文本框赋值
                        $("#txtName").val(title);
                        $("#txtUrl").val(url);
                        $("#txtId").val(id);
                        return false;
                    })

                    table.append(tr);
                }
                $("#content").append(table);

                $("#pList").fadeIn("slow");

                //生成页码条

                var pre = getPre(pageIndex);
                var next = getNext(pageIndex, pageCount);
                $("#content").append($("<a href='javascript:getPage(1)'>首页</a>"));
                $("#content").append($("<a " + pre + ">上一页</a>"));
                $("#content").append($("<a " + next + ">下一页</a>"));
                $("#content").append($("<a href='javascript:getPage(" + pageCount + ")'>尾页</a>"));
            });
        }
        //上一页
        function getPre(pageIndex) {
            if (pageIndex > 1) {
                pageIndex--;
                return "href='javascript:getPage("+pageIndex+")'";
            }
            else {
                pageIndex = 1;
                return "";
            }
        }
        //下一页
        function getNext(pageIndex,pageCount) {
            if (pageIndex < pageCount) {
                pageIndex++;
                return "href='javascript:getPage(" + pageIndex + ")'";
            } else {
                pageIndex = pageCount;
                return "";
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    header
    </div>
    <div id="content">
    </div>
     <div>
    footer
    </div>
    <table id="tbEdit">
        <tr>
            <td>
                标题：
            </td>
            <td>
                <input type="text" id="txtName" />
                <input type="hidden" id="txtId" />
            </td>
        </tr>
         <tr>
            <td>
                图片：
            </td>
            <td>
                <input type="text" id="txtUrl" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" id="btnOk" value="确定" />
                 <input type="button" id="btnCancel" value="取消" />
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

2、PhotoEdit.ashx部分代码如下：
  
string str = context.Request.Form["id"];
string title = context.Request.Form["title"];
string url = context.Request.Form["url"];
int id;
if (int.TryParse(str, out id))
{
    MyPhotoBlog.BLL.Photos bll = new MyPhotoBlog.BLL.Photos();
    MyPhotoBlog.Model.Photos photo = bll.GetModel(id);

    photo.PTitle = title;
    photo.PUrl = url;

    if (bll.Update(photo))
    {
	context.Response.Write("1");
    }
    else
    {
	context.Response.Write("0");
    }
}

3、PagedList.ashx部分代码如下：

int pageIndex = 1; //当前页码
int pageSize = 3;// 每页几条
int pageCount;
public void ProcessRequest (HttpContext context) {
	context.Response.ContentType = "text/plain";
	string s = context.Request.QueryString["page"];
	if (int.TryParse(s, out pageIndex))
	{
	}
	else
	{
	    pageIndex = 1;
	}
	//输出json格式的字符串
	context.Response.Write(GetPagedData());
}

string GetPagedData() 
{
	MyPhotoBlog.BLL.Photos bll = new MyPhotoBlog.BLL.Photos();
	List<MyPhotoBlog.Model.Photos> list = bll.GetPageData(pageIndex, pageSize, out pageCount);
	JavaScriptSerializer ser = new JavaScriptSerializer();
	string json = ser.Serialize(list);
	//移除掉]
	json = json.Remove(json.Length - 1);
	json = json + ",{\"pageCount\":"+pageCount+"}]";
	return json;
}

3、Update.ashx部分代码如下：

string id = context.Request.QueryString["id"];
//up  down
string type = context.Request.QueryString["type"];

MyPhotoBlog.BLL.Photos bll = new MyPhotoBlog.BLL.Photos();
string result = "-1";
if (type == "up")
{
    if (bll.UpdateUp(int.Parse(id)))
    {
	result = "1";
    }
    else
    {
	result = "0";
    }
}
else if(type == "down")
{
    if (bll.UpdateDown(int.Parse(id)))
    {
	result = "1";
    }
    else
    {
	result = "0";
    }
}

context.Response.Write(result);

4、PhotoDelete.ashx部分代码如下：

string str = context.Request.QueryString["id"];
string url = context.Request.QueryString["url"];
int id;
if (int.TryParse(str, out id))
{
    MyPhotoBlog.BLL.Photos bll = new MyPhotoBlog.BLL.Photos();
    if (bll.Delete(id))
    {
	//删除文件
	string path = context.Server.MapPath("images/" + url);
	System.IO.File.Delete(path);

	context.Response.Write("1");
    }
    else
    {
	context.Response.Write("0");
    }
}
xuxin_2821
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JqueryAjax分页加载图片列表(编辑、支持、反对、删除记录同时删除文件)

1、列表页面的前台主要代码如下：<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <style type="text/css"> #pList,#photo { ...
复制链接

扫一扫
专栏目录