<!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>
分享到:
相关推荐
由于代码有些问题,现取消资源分,等有空再修改一下
div+css+js制成的表单,点击列名,可以使数据根据点击的列进行升序、降序的排序,还可以选择当前页显示的数据数量。适合网站后台使用
主要为大家详细介绍了Vue.js实现多条件筛选、搜索、排序及分页的表格功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
【免费题库】华为OD机试 - 字符串筛选排序(Java & JS & Python & C & C++).html
关于200个4位数的排序筛选void jsSort() { int i,j; int temp; for(i=0;i;i++) for(j=i+1;j;j++) { if(aa[i]00>aa[j]00) { temp=aa[i]; aa[i]=aa[j]; aa[j]=temp; } else if(aa[i]00==aa[j]00) if(aa[i]...
jQuery仿Excel表格排序筛选代码是一款支持输入框检索表格列表,选中取消列表筛选代码。
用Bootstrap的css样式以及JS、jQuery制作的动态更新表格模板,具有筛选、分页、排序等功能,非全屏页面。表格制作精美,数据显示清晰合理,可直接应用于前端的开发。
用Bootstrap的css样式以及JS、jQuery制作的动态更新表格模板,具有筛选、分页、排序等功能,全屏页面。表格制作精美,数据显示清晰合理,可直接应用于前端的开发。
jquery表格排序和筛选表.rarjquery表格排序和筛选表.rarjquery表格排序和筛选表.rarjquery表格排序和筛选表.rarjquery表格排序和筛选表.rarjquery表格排序和筛选表.rar
jquery筛选并控制图片排序插件.rarjquery筛选并控制图片排序插件.rarjquery筛选并控制图片排序插件.rarjquery筛选并控制图片排序插件.rarjquery筛选并控制图片排序插件.rarjquery筛选并控制图片排序插件.rar
js表格特效制作js表格排序表格内容可筛选排序有51个人转采,5个人赞,18个人评论。... js表格特效制作一个js表格排序筛选,点击表格标题,子内容按大小、字母先后顺序
支持分类搜索排序的jQuery图片筛选过滤代码
通过这个微型库,可以对不同HTML元素实现搜索、排序、筛选。它小巧、简单、易用,无依赖。
当input输入框获取焦点后,自动下拉显示按照字母字段排序的筛选框 城市名称的排序、内容均在js中可以任意修改 使用方法: 1、在网页head中引入页面css样式 2、将“代码”部分拷贝到你需要的地方 ...
NULL 博文链接:https://yangqianyu222.iteye.com/blog/437235
jQuery仿Excel表格排序筛选代码是一款支持输入框检索表格列表,选中取消列表筛选代码。
本文实例为大家分享了js商品筛选功能的具体代码,供大家参考,具体内容如下 用到的知识:js基础、dom、第一种方法用到的是js中的数组方法,第二种方法用到的是json和for-in以及es6 实现步骤 1、根据数据结构生成HTML...
动画自适应,实现完美的布局,从移动端到pc端的完美变化,还可以搜索,过滤等功能
本文实例为大家分享了element ui表格实现下拉筛选的具体代码,供大家参考,具体内容如下 1、default-sort中prop传入要排序的字段(接口返回或自己定义的数据)、order代表排序,这里用到降序 2、filters对象中text...