`
ayue222
  • 浏览: 49501 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JS 列表筛选、排序

prototypeHTML 
阅读更多 
<!doctype html public "-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>排序</title>
<style type="text/css">
body{font-size:12px;margin:0;padding:0;}
.clearfix{zoom:0;}
.clearfix:after{content:'.';display:block;visibility:hidden;clear:both;height:0px;}
#mysort{width:80%;float:left;margin:10px;}
.select,.list{background:#fff;width:100%;margin:0;padding:0;}
.select li{list-style:none;width:100%;border-bottom:1px dashed #999;padding:8px 2px;float:left;}
.select li em{float:left;display:block;font-style:normal;padding:2px 5px;margin:5px 2px;}
.select li a{float:left;display:block;padding:2px 5px;background:#fff;color:#000;cursor:pointer;margin:5px 0 5px 5px;}
.select li a.on{background:#B13333;color:#fff;}
.list li{list-style:none;width:100%;padding:10px;float:left;}
.title{float:left;width:70%;padding-left:10px;}
.datetime{float:left;}
.sort{cursor:pointer;}
.dl{float:left;width:100%;padding:8px 2px;background:#ccc;}
</style>
</head>
<body>
<div id="mysort">
	<ul class="select">
		<li id="region"><a>所有</a><em>：</em><a>主院</a><a>别院</a><a>城市</a></li>
		<li id="mode"><a>所有</a><em>：</em><a>发表</a><a>回复</a></li>
	</ul>
	<div class="dl"><div class="title">主题</div><div class="datetime">时间 <a class="sort">↓</a></div></div>
	<ul class="list"></ul>
</div>
</body>
<script type="text/javascript">
var bind = function(obj,func){
	return function(){
		func.apply(obj,arguments);
	};
};
var get=function(className, tag ,root) {
        if(arguments.length==1){
        	root = (arguments[0]) ? (typeof arguments[0]=="string")?document.getElementById(arguments[0]):arguments[0] : null || document;
        	return root;
        }
        root = (root) ? (typeof root=="string")?document.getElementById(root):root : null || document; 
        if (!root) {return [];}
        var nodes = [],elements = root.getElementsByTagName(tag);
        for (var i = 0, len = elements.length; i < len; ++i) {
        	if(elements[i].className==className||className=="*"){
                nodes[nodes.length] = elements[i];
            }
        }
        return nodes;
}
var addEventHandler=function(obj, type, func) {
		if(!obj){return;}
		var doOn=function(o){
			if(o.addEventListener){o.addEventListener(type, func, false);}
			else if(o.attachEvent){o.attachEvent("on" + type, func);}
			else{o["on" + type] = func;}
		}
		var IsArray=function(v){ 
			try{ 
				var a = v[0]; 
				return typeof(a) != "undefined"; 
			}catch(e){ 
				return false; 
			} 
		}
		if(obj.tagName!='SELECT'&&IsArray(obj)){
			for(var i=0,oLen=obj.length;i<oLen;i++){
				doOn(obj[i],type.func);
			}
		}else{
			doOn(obj);
		}
};
var mySort=function(id){
	this.select=get('select','ul',id)[0];
	this.table=get('list','ul',id)[0];
	this.list=get('*','a',this.select);
	this.sort=get('sort','a',id)[0];
	this.format=function(arr,type,keys){
	    switch (type){ 
	      case 0:return arr.sort(function(a,b){a=(keys)?(a[keys])?a[keys]:a:a;b=(keys)?(b[keys])?b[keys]:b:b; return a>b?-1:(a>b)?0:1; }); break; 
	      case 1:return arr.sort(function(a,b){a=(keys)?(a[keys])?a[keys]:a:a;b=(keys)?(b[keys])?b[keys]:b:b; return a<b?-1:(a<b)?0:1; }); break; 
	      default:return arr.sort(function(a,b){a=(keys)?(a[keys])?a[keys]:a:a;b=(keys)?(b[keys])?b[keys]:b:b; return a>b?-1:(a>b)?0:1; }); break; 
	     }
	}
	this.getEvent=function(e){
		var event=e||window.event;
		if(event){return event.srcElement||event.target;}
	};
	return this;
}
mySort.prototype = {
	create:function(node){
		var oFrag=document.createDocumentFragment(),dTime,dTitle,dLi;
		for(var i=0,nLen=node.length;i<nLen;i++){
			dTime=document.createElement('div');
			dTime.className='datetime';
			dTime.innerHTML=node[i].datetime;
			dTitle=document.createElement('div');
			dTitle.className='title';
			dTitle.innerHTML=node[i].title;
			dLi=document.createElement('li');
			dLi.appendChild(dTitle);
			dLi.appendChild(dTime);
			oFrag.appendChild(dLi);
			dTime=dTitle=dLi=null;
		}
		this.table.innerHTML='';
		this.table.appendChild(oFrag);
		oFrag=dTime=null;
	},
	FullData:function(){
		var data=[{"region":"主院","title":1,"datetime":"2009-08-10 10:23:35","mode":"发表"},
	   {"region":"城市","title":4,"datetime":"2009-08-10 10:23:32","mode":"发表"},
	   {"region":"别院","title":3,"datetime":"2009-08-10 10:23:33","mode":"回复"},
	   {"region":"主院","title":2,"datetime":"2009-08-10 10:23:34","mode":"发表"},
	   {"region":"城市","title":5,"datetime":"2009-08-10 10:23:31","mode":"回复"}
		];
		return data;
	},
	strip:function(newData,matchData,m){
		var tmpData=[];
		if(matchData.length>0&&matchData[0]!='所有'){
			for(var i=0,dlen=newData.length;i<dlen;i++){
				for(var j=0,rLen=matchData.length;j<rLen;j++){
					if(matchData[j].innerHTML==newData[i][m]||matchData[j].innerHTML=='所有'){
						tmpData.push(newData[i]);
					}
				}
			}
			newData=tmpData;
			tmpData=[];
		}
		return newData;
	},
	require:function(){
		var tmpData=[],
			region=get('on','a','region'),
			mod=get('on','a','mode');
		var _data=this.FullData(),nData,t;
		t=(this.sort.innerHTML=="↓")?0:1;
		nData=this.format(_data,t,'datetime');
		nData=this.strip(nData,region,'region');
		nData=this.strip(nData,mod,'mode');
		this.table.innerHTML='loading...';
		setTimeout(bind(this,function(){this.create(nData)}),1000);
	},
	order:function(e){
		var target=this.getEvent(e);
		target.innerHTML=(target.innerHTML=='↓')?'↑':'↓';
		this.require();
	},
	
	doLight:function(e){
		var target=this.getEvent(e);
		var inner=target.innerHTML,selAll=target.parentNode.getElementsByTagName('a');
		if(inner=='所有'){
			for(var i=0,olen=selAll.length;i<olen;i++){
				if(selAll[i].innerHTML==inner){selAll[i].className=(selAll[i].className=='')?'on':'';}
				else{selAll[i].className='';}
			}
		}else{
			if(selAll[0].className=='on'){selAll[0].className='';}
			target.className=(target.className=='')?'on':'';
		}
		this.require();
	},
	init:function(e){
		addEventHandler(window,'load',bind(this,this.require));
		addEventHandler(this.list,'click',bind(this,this.doLight));
		addEventHandler(this.sort,'click',bind(this,this.order));
	}
};
var sort=new mySort('mysort').init();
</script>
</html>
2
顶
0
踩
分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    基于jquery的表格筛选，排序，分页js

    本主题关注的是如何利用jQuery实现表格的数据筛选、排序和分页功能，这些都是网页数据展示中常见的需求。 一、jQuery表格筛选 表格筛选功能允许用户通过输入关键词快速查找表格中的特定数据。在jQuery中，可以使用`...

    表格可按列筛选排序的分页 JS+CSS+DIV

    "表格可按列筛选排序的分页 JS+CSS+DIV" 是一个基于 JavaScript、CSS 和 HTML（尤其是 DIV 元素）实现的功能强大的表格组件。这个组件允许用户对表格数据进行动态的列筛选和排序，同时具备分页功能，提高了用户体验...

    仿手机淘宝排序筛选功能

    3. **动画效果**：提供平滑的过渡和动画效果，例如筛选面板的滑入滑出，或者排序后商品列表的淡入淡出。 4. **AJAX异步请求**：利用jQuery的`.ajax()`或`.getJSON()`方法，实现无刷新加载新的商品数据，提高用户体验...

    jquery表格排序和筛选表

    在本主题“jQuery表格排序和筛选表”中，我们将深入探讨如何使用jQuery来实现动态表格的排序和筛选功能，这些功能在数据展示和用户交互中扮演着重要角色。 首先，让我们了解jQuery如何帮助我们操作HTML表格。HTML...

    商品筛选同类，排序

    - 使用JavaScript（如React、Vue等框架）进行前端页面的动态渲染，实现筛选条件的实时更新和商品列表的动态加载。 - Ajax技术用于在用户进行筛选或排序操作时，无刷新地向服务器发送请求并更新页面内容。 6. 用户...

    jquery插件库-jquery筛选排序插件listnav.zip

    "jquery插件库-jquery筛选排序插件listnav.zip"就是一个这样的插件，它专注于列表的筛选和排序功能，对于构建有大量数据展示的网页非常有用。 ListNav插件是jQuery的一个扩展，主要针对那些含有大量列表项（如或...

    jQuery筛选排序插件listnav

    jQuery筛选排序插件Listnav是一款强大的JavaScript工具，它专为提升用户体验而设计，特别是在处理大型数据列表时。通过在网页上动态添加一个筛选导航栏，用户可以轻松地过滤出他们感兴趣的信息，极大地提高了浏览...

    jquery筛选并控制图片排序插件

    本文将详细探讨"jquery筛选并控制图片排序插件"这一主题，帮助开发者了解如何利用jQuery实现图片的筛选和排序功能，以增强网页的交互性和用户体验。 首先，jQuery提供了一套丰富的选择器，用于高效地选取DOM元素。...

    jquery filterizr图片列表筛选插件附教程链接

    Filterizr是一款基于jQuery的强大的图像过滤和排序插件，它允许用户在网页上实现优雅的图片列表筛选效果。通过使用这个插件，开发者可以为网站添加交互性，使用户能够轻松地根据类别、属性或其他条件筛选展示的内容...

    jquery表格排序和筛选表.rar

    HTML文件定义了表格结构，CSS文件用于样式设计，而JavaScript文件则是实现排序和筛选的核心。通过查看和学习这个示例，你可以了解到如何将jQuery与DOM操作结合，实现动态的表格功能。 总的来说，理解jQuery表格排序...

    javascript实现筛选、合并表格

    同时，为了确保用户体验，不要忘记在执行操作时禁用表格的默认事件处理，如排序和滚动，以防止与你的JavaScript逻辑冲突。 以上就是利用JavaScript实现表格筛选和单元格合并的基本方法。在开发过程中，还需要注意...

    按中文首字母筛选 js

    在JavaScript编程中，按中文首字母筛选是一种常见的数据组织和展示方法，特别是在处理大量中文数据时，例如在用户界面提供一个可快速导航的字母表。这个"按中文首字母筛选 js"项目似乎提供了这样一个功能，使得用户...

    js列表商品条件筛选代码

    这个"js列表商品条件筛选代码"针对的是如何高效、便捷地实现用户在浏览商品列表时进行各种条件筛选的功能，例如按照价格、品牌、销量等不同维度进行排序或过滤。在本案例中，我们主要探讨以下几个关键知识点： 1. *...

    jQuery仿Excel表格排序筛选代码.zip

    - `js`目录：存放JavaScript代码，其中可能有实现排序和筛选功能的脚本文件。 - `dist`目录：通常包含编译后的、优化过的文件，用于生产环境。 - `说明.htm`和`说明.txt`：项目说明文档，可能包含了如何使用和...

    JS表格排序，筛选列，调整列宽

    在JavaScript（JS）中，创建和操作表格是常见的任务，特别是在网页交互和数据展示中。本文将深入探讨如何实现表格的排序、筛选列以及调整列宽的功能，这些都是提高用户交互性和数据可读性的重要手段。 首先，让我们...

    jQuery仿Excel表格列表排序代码

    在`js`文件夹中的JavaScript代码实现了排序逻辑。一般来说，排序算法分为升序（ASC）和降序（DESC）。当用户点击表头时，程序会根据当前列的数据类型（如数字或字符串）选择合适的排序方法。对于数字，可以使用快速...

    js列表商品条件筛选代码.zip

    【标题】"js列表商品条件筛选代码.zip"所包含的知识点主要集中在JavaScript、CSS和jQuery技术上，这些技术是构建动态、交互性网页的核心。在这个压缩包中，开发者提供了一个功能完善的商品列表筛选功能，它可能包括...

    Listjs实现对不同HTML元素实现搜索排序筛选它小巧简单易用无依赖

    List.js是一款轻量级的JavaScript库，专门设计用于在HTML元素上实现搜索、排序和筛选功能。这款库的独特之处在于其简洁的API和无依赖的特性，使得它可以在各种项目中快速集成，无论项目的复杂程度如何。对于那些不...

Magicbox
Global site tag (gtag.js) - Google Analytics