ASP.NET+Layer流加载

最新推荐文章于 2023-02-07 12:00:26 发布

热得快小菜鸟

最新推荐文章于 2023-02-07 12:00:26 发布

阅读量435

点赞数

分类专栏：技术文章标签：流加载 Sqlserver2008分页查询 Asp.net

本文链接：https://blog.youkuaiyun.com/qq_37573226/article/details/101059836

版权

技术专栏收录该内容

9 篇文章

订阅专栏

开发移动端项目时，不可能一次性加载所有数据，这样子服务器和数据库压力大，多数采用“流加载”，即我们平常所接触到的“点击加载更多”，本次采用layer的流加载组件。实现方法也很简单，数据库写一个分页查询，返回数据。当我们点击“加载更多”时，执行存储过程，传入页数（每点击一次‘加载更多’页数也就加1），返回多前页数的数据。下面上代码：
前端：

div id="item1" class="mui-control-content">
            <ul id="OA_task_1" class="mui-table-view">
        
            </ul>
        </div>

JS：

layui.use('flow', function () {
       var flow = layui.flow;
       flow.lazyimg();
       flow.load({
           elem: '#OA_task_1', //绑定流加载容器
           done: function (page, next) { //执行下一页的回调
               //数据插入
               var lis = [];
               var pages = 0;
               setTimeout(function () {
                   $.ajax({
                       type: "get",
                       async: false,
                       url: "/Admin/GetData.ashx?action=GetAllSuggestList",
                       data: {
                           'Page': page
                       },
                       dataType: "json",
                       success: function (params) {
                           var list = params.data;
                           pages = params.code;
                           for (var i = 0; i < list.length; i++) {
                               var suggest = list[i];
                               var commitDate = GetTimeFormat(suggest.commitDate);
                               lis.push(`<li class="mui-table-view-cell">
                                        <div class="mui-slider-right mui-disabled">
                                            <a class="mui-btn mui-btn-red mui-icon" style="transform: translate(0px, 0px);"><span class="font14">删除</span></a>
                                        </div>
                                        <div class ="mui-slider-handle" onclick= "window.top.location.href = './feedbackDetail.aspx?ID=`+ suggest.id+`'" >
                                            <div class="mui-table-cell">
                                                <div class="feed-top">
                                                    <img src="img/feed.png" alt="">
                                                    <span class ="title"> `+suggest.title+` </span>
                                                    <span class ="type" style = "background: `+ suggest.statusColor+`;" > `+suggest.reply+` </span>
                                                    <span class ="time"> `+commitDate+` </span>
                                                </div>
                                                <div class="feed-bottom">
                                                   ` +suggest.suggest+`
                                                </div>
                                            </div>
                                        </div>
                                    </li>`)
                           }
                           var list = $(".type");
                           //for (var i = 0; i < list.length; i++) {
                           //    alert(list[i].innerHTML)

                           //    if (list[i].innerHTML=="未回复") {
                           //        list[i].style.background = "#C7C7CC";
                           //    }
                           //}
                       },
                       error: function (errmsg) {
                           alert("Ajax获取服务器数据出错了！" + errmsg);
                       }
                   });

                   // 执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                   // pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                   next(lis.join(''), page < pages); //假设总页数为 10
               }, 100);
               //
              
           }
   });
       });

后台：

//反馈列表流加载(所有)
        public void GetAllSuggestList(HttpContext context)
        {
            string Page = context.Request["Page"];
            string AcceptUserName = context.Request["UserName"];
            string SendUserName = context.Request["UserName"];
            IDataParameter[] parames = new IDataParameter[6];
            parames[0] = new SqlParameter("@n", Page);
            parames[5] = new SqlParameter("@table", "sys_UserSuggest");
            parames[4] = new SqlParameter("@reply", "");
            parames[3] = new SqlParameter("@bRead", "");
            parames[1] = new SqlParameter("@AcceptUserName", "");
            parames[2] = new SqlParameter("@SendUserName", "");
            SqlDataReader dr = DbHelperSQL.RunProcedure("GetPage", parames);
            List<UserSuggest> list = new List<UserSuggest>(); ;
            int page = 0;
            while (dr.Read())
            {
                page++;
                UserSuggest userSuggest = new UserSuggest();
                userSuggest.id = int.Parse(dr["id"].ToString());
                userSuggest.title = dr["title"].ToString();
                userSuggest.suggest = dr["suggest"].ToString();
                userSuggest.files = dr["files"].ToString();
                userSuggest.commitUserName = dr["commitUserName"].ToString();
                userSuggest.commitDate = DateTime.Parse(dr["commitDate"].ToString());
                string reply = dr["reply"].ToString();
                if (reply != "")
                {
                    userSuggest.reply = "已回复";
                    userSuggest.statusColor = "rgba(240,173,78,1)";
                }
                else
                {
                    userSuggest.reply = "未回复";
                    userSuggest.statusColor = "#C7C7CC";
                }
                userSuggest.replyUserName = dr["replyUserName"].ToString();
                string replyDate = dr["replyDate"].ToString();
                if (replyDate != "")
                {
                    userSuggest.replyDate = DateTime.Parse(replyDate);
                }
                list.Add(userSuggest);
            }
            string jsonData = JsonConvert.SerializeObject(list);
            context.Response.Write("{\"code\":" + page + ",\"msg\":\"\",\"count\":1000,\"data\":" + jsonData + "}");
        }

sqlserver2008数据库(自己设置参数条件)：

 create proc GetPage
--分页查询 每页10条
(
	@n  varchar(100),
	@table varchar(100),
	@reply  varchar(100),
	@bRead varchar(100),
	@AcceptUserName  varchar(100),
	@SendUserName  varchar(100)
)
as
begin
set nocount on;  
DECLARE  @sqlcommand   NVARCHAR(MAX) = N''
IF @table = 'sys_UserMessage' and @AcceptUserName<>'' and @bRead = ''  and @SendUserName='' and @reply=''
--没有有是否读的条件  没有限定发送人
BEGIN
SET @sqlcommand =  
 'select t.* from 
(select *,ROW_NUMBER() over(order by id asc) rownum from sys_UserMessage 
where  AcceptUserName like ''%'+@AcceptUserName+'%'')t
 where t.rownum>=('+@n+'-1)*10+1 and t.rownum<='+@n+'*10'
end
else IF @table = 'sys_UserMessage' and @bRead='' and @AcceptUserName='' and @SendUserName<>''
--没有有是否读的条件  限定发送人
BEGIN
SET @sqlcommand =  
 'select t.* from 
  (select * from 
(select *,ROW_NUMBER() over(order by id asc) rownum from sys_UserMessage )as xx
where SendUserName='''+ @SendUserName+ ''')t
 where t.rownum>=('+@n+'-1)*10+1 and t.rownum<='+@n+'*10'
END
else IF @table = 'sys_UserMessage' and @bRead<>''
--有是否读的条件
BEGIN
SET @sqlcommand =  
 'select t.* from 
  (select * from 
(select *,ROW_NUMBER() over(order by id asc) rownum from sys_UserMessage 
where bRead='''+@bRead+''')as xx
where  AcceptUserName like ''%'+@AcceptUserName+'%'' or SendUserName='''+ @SendUserName+ ''')t
 where t.rownum>=('+@n+'-1)*10+1 and t.rownum<='+@n+'*10'
END
else IF @table = 'sys_UserSuggest' and @reply=''
BEGIN
SET @sqlcommand =  
 'select t.* from 
(select *,ROW_NUMBER() over(order by id asc) rownum ,
(select username from sys_UserInfo where sys_UserSuggest.commitUserID=id) as commitUserName,
(select username from sys_UserInfo where sys_UserSuggest.replyUserID=id) as replyUserName
from sys_UserSuggest)t
 where t.rownum>=('+@n+'-1)*10+1 and t.rownum<='+@n+'*10'
END
else IF @table = 'sys_UserSuggest' and @reply ='true'
BEGIN
SET @sqlcommand =  
 'select t.* from 
(select *,ROW_NUMBER() over(order by id asc) rownum ,
(select username from sys_UserInfo where sys_UserSuggest.commitUserID=id) as commitUserName,
(select username from sys_UserInfo where sys_UserSuggest.replyUserID=id) as replyUserName
from sys_UserSuggest 
where reply is null)t
 where t.rownum>=('+@n+'-1)*10+1 and t.rownum<='+@n+'*10'
END
else IF @table = 'sys_UserSuggest' and @reply ='false'
BEGIN
SET @sqlcommand =  
 'select t.* from 
(select *,ROW_NUMBER() over(order by id asc) rownum ,
(select username from sys_UserInfo where sys_UserSuggest.commitUserID=id) as commitUserName,
(select username from sys_UserInfo where sys_UserSuggest.replyUserID=id) as replyUserName
from sys_UserSuggest where reply <>'''')t
 where t.rownum>=('+@n+'-1)*10+1 and t.rownum<='+@n+'*10'
END
 print @sqlcommand
exec sp_executesql @sqlcommand
end
GO


exec GetPage 1,'sys_UserMessage','','','刘映红',''  --所有
exec GetPage 1,'sys_UserMessage','','true','刘映红',''  --已读
exec GetPage 1,'sys_UserMessage','','false','刘映红',''  --未读
exec GetPage 1,'sys_UserMessage','','','','刘映红'  --我发送的

exec GetPage 1,'sys_UserSuggest','','','',''  --全部建议

OK！代码如上，如有指教或不懂的老友欢迎留言！