大家应该都看过腾讯的新闻留言效果吧.一个条条.然后拖动就可以实现分页.很爽的样子哦.我看了也觉得心动.也想做一个哦..本人js一般.在网上找了一个人的js拖动条..效果基本和腾讯的一样.然后自己整合了一下.并且添加了排序会自定义列!

先给大家看看效果图

自定义列的设置

怎么样啊.效果还行吧.呵呵..献丑了...大家别笑话哈!!下面我会把代码一步一步讲解!!

这个小的demo大部分都是js代码.操作json数据来实现的

我们先看看分页的代码吧

Code

这张页面就是分页的...基本都是js

sliderImage1.create();是定义个拖动条.

这个拖动条有几个事件.

sliderImage1.onstart  开始

sliderImage1.onchange  拖动

sliderImage1.onend   结束

拖动开始的时候要显示

      sliderImage1.onstart  = function () {
          $("onShow").style.display = "block";
      }

在拖动的时候我们要设置拖动的条,还有一个小小的tooltip效果.提示多少页
      sliderImage1.onchange = function () {
          $("onShow").style.left = document.body.scrollLeft+event.clientX+15;
          $("onShow").style.top = document.body.scrollTop+event.clientY+15;
          $("onShow").innerHTML = "Page "+sliderImage1.getValue() + "/" + <%=Count %>;

      };

拖动结束的时候需要获取数据.是用ajax获取.传递几个参数.一个是排序的字段.还有方向
      sliderImage1.onend = function () {
        if($("HLSF").value!=""&&$("HLSF").value!="")
        {
            Request.sendGET("AjaxFile/pageData.ashx?pg="+sliderImage1.getValue()+"&t="+$("HLST").value+"&f="+$("HLSF").value,rec,null ,true,fal);//发送请求
        }
        else
        {
            Request.sendGET("AjaxFile/pageData.ashx?pg="+sliderImage1.getValue(),rec,null ,true,fal);//发送请求
        }
          $("onShow").style.display="none";
      }

PageData.ashx是生成json数据的页面...

json的结构是如下的

json有需要显示列头,宽度还有记录总数.

Code

PageData.ashx从数据库获取数据,然后通过一个函数生成json数据..

在前台页面 得到这个json数据以后生成html元素

Code

这样分页的全部过程就结束了.

然后我们可以设置这个表格的列长度,是否排序.这个都可以通过TraditionalAjax.aspx这个页面来实现.

基本原理差不多,代码我提供下载.大家可以拿去看看!!

这里大家注意了.这份代码请不要直接来到项目中使用.应为这里的sql语句存在注入.我为了方便没有过滤 关键字.大家如果要使用可以改改代码!!

https://files.cnblogs.com/mextb1860/ComponentGrid.rar