两个JS控件-List和Pager

最新推荐文章于 2022-02-15 14:40:55 发布

weixin_34185512

最新推荐文章于 2022-02-15 14:40:55 发布

阅读量97

点赞数

文章标签：前端 javascript ViewUI

最近几个月一直在做些打杂维护的工作，博客更新得也不勤。转眼2011年将要过去了，希望来年能找回自己的激情。

这两天做了两个JS控件，一个用于选择多项的List，一个显示分页页码链接等信息。一年多来一直在用JQuery，重新拾一下快忘了的基础JavaScript，顺便用在维护的项目上。

在写一个查询数据页面时，由于列很多，所以又创建了一设置页面，来选择显示的列。

开始时是用一个个选择框实现，像这样：

所有的Checkbox的Name属性都一样，Value就是列的名称。在检测页面回发时，就可以通过Request[Name]获取到选中的值。这种方式优点是实现简单，生成的HTML代码：

<span>
    <input type="checkbox" value="类别" name="Columns" id="c0" />
    <label for="c0">类别</label>
</span>
<span>
    <input type="checkbox" value="名称" name="Columns" id="c1" />
    <label for="c1">名称</label>
</span>
<span>
    <input type="checkbox" value="尺寸" name="Columns" id="c2" />
    <label for="c2">尺寸</label>
</span>

缺点是不能选择列的顺序，因此这种场合需要更给力的实现。于是我想到了ListBox-一个Asp.Net控件，古老的项目中还能见到它。虽然现在基本不会用了，但现在大家都用前端JavaScript实现它表现的形式和业务逻辑。我从网上找到一个实现，优化下结构和浏览器兼容性，展示一下：

这种方式要写一些Javascript，其实不算复杂，用不着JQuery。在前端的提交事件中，将选中的项写入到一个隐藏域中，后台就可以读取到这些值。

下面是分布控件的截图。

当页数比较多时，只显示一定数目的页链接。点击<<或>>可以显示前面或后面的页。

数据展示页的分页可以分为参数方式和Ajax方式，前者需要对每个链接生成一个地址，后者需要执行一个JS函数。因此我定义了一个Pager对象，存储分页的参数。

        var pager = {
            Total: 555, //总记录数
            Size: 20,       //每页记录数
            LinkNumber: 10,     //显示链接数
            //LinkAction: "#p={0}"   //链接形式
            LinkAction: function (n) { document.title = n },    //执行JS函数形式
            Current:18  //当前页
        };

根据typeof(pager.LinkAction)==’string’，判断是否是纯链接。若不是，说明是Ajax刷新数据，页面不需要刷新，要复杂一些。

做了这两个控件后，前端的感觉又回来了。

下载地址：http://files.cnblogs.com/XmNotes/Pager%26List.zip

下面两个应用没有JavaScript，是纯CSS的效果。我从网上借鉴的，用在今年的项目中，真得很不错、在这里再回顾一下，希望新一年里能有更多的同行用上它们。新的一年里，让Web更美好，工作更有成就感。

一个是层级菜单，前面文章提到过：

http://www.cnblogs.com/XmNotes/archive/2011/04/14/2015980.html