现在的位置: 首页 > 综合 > 正文

javascript,无限级分类,类似windows文件夹方式显示,非ajax版,(Ie 7,firefox 2).

2013年12月08日 ⁄ 综合 ⁄ 共 5014字 ⁄ 字号 评论关闭

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档-SH!</title>
<style>
.table1{ border-right:1px solid #999; border-bottom:1px solid #999;}
.td1{ border-left:1px solid #999;border-bottom:0px; padding-left:8px; padding-right:8px}
.table1 td{  font-size:12px; font-family:Arial, Helvetica, sans-serif}
td,body,div{ font-size:12px; font-family:Arial, Helvetica, sans-serif}
.tr1{background-color:#006699; color:#FFFFFF;}
</style>
</head>
<script language="javascript">
var __sort_data={
sorts:[{catid:"6",catname:"骗点击的",catdesc:"通过 Internet 连接和 Internet Explorer,可以查找和浏览 Web 上的所有信息。请直接单击下面的主题",catparentid:"0",createdby:"1",createddatetime:"2008-02-27 16:58:14"},
{catid:"3",catname:"142342134",catdesc:"无上级分类fasdfasdfsdf asdf adsa怎么搞?",catparentid:"6",createdby:"1",createddatetime:"2008-02-27 17:34:29"},
{catid:"7",catname:"怎样骗",catdesc:"?",catparentid:"6",createdby:"1",createddatetime:"2008-02-28 10:51:35"},
{catid:"8",catname:"想咋个就咋个",catdesc:"Copyright © 2003-2006 版权由 Mozilla Help Viewer Project 的贡献者所有。",catparentid:"7",createdby:"1",createddatetime:"2008-02-28 10:52:23"},
{catid:"2",catname:"使用快速选项卡",catdesc:"同时打开多个网页时,每个网页都会在一个单独的选项卡上显示。这些选项卡方便您在打开的网站间切换。快速选项卡提供所有打开的选项卡的缩微视图(称为“缩略图”)。这方便查找希望查看的网页。",catparentid:"0",createdby:"1",createddatetime:"2008-02-27 17:03:02"}],
tds:{catid:'ID',catname:'名称',createddatetime:'创建时间'},//数据库表要显示出来的字段和显示的名称(标题)
tbclass:'table1',//表格的classname
trclass:'tr1',//表格头的classname
tdclass:'td1',//表格的格子classname
nodeClickerOpen:'+.jpg',//展开时的图片
nodeClickerClose:'-.jpg',//未展开时的图片
nodeHeader:'f.jpg',//每个分类前的修饰图片
prk:'catparentid',//上级分类的存放字段
id:'catid',//主键
path:[0],//默认打开的分类路径;[0],只显示首级分类
editUrl:'/admin/category/add/id'//编辑分类的连接,设置则不显示.
};
String.prototype.repeat=function(l){
 var tmp=this;
 for(var i=0;i<l;i++)
  tmp+=this;
 return tmp;
}
Array.prototype.midStr=function(s,l){
 var tmp="";
 for(var i=0;i<this.length;i++){
  if(i==s+l){
   return tmp;
  }
  if(i>=s){
   tmp+=(tmp.length>0?",":"")+this[i];
  }
 }
 return tmp;
}
Array.prototype.inArr=function(value){
 for(var i=0;i<this.length;i++){
  if(this[i]==value){
   return true;
  }
 }
 return false;
}

function findChild(str,id){
 var obj=eval(str);
 var data=obj.sorts;
 var _pid=obj.prk;
 for(var i=0;i<data.length;i++){
  if(data[i][_pid]==id){   
   return true;
  }
 }
 return false;
}
if(typeof(showTable)=='undefined')
function showPathDepth(str,depth){
 var obj=eval(str);
 var _id=obj.id;
 var _pid=obj.prk;
 var data=obj.sorts;
 var _header=obj.nodeHeader;
 var _tds=obj.tds;
 var _tbclass=obj.tbclass;
 var _trclass=obj.trclass;
 var _tdclass=obj.tdclass;
 var _nodeClickerOpen=obj.nodeClickerOpen;
 var _nodeClickerClose=obj.nodeClickerClose;
 var path=obj.path;
 
 if(path.length>depth+1){
  next_id=path[depth+1];
 }else{
  next_id=0;
 }
 
 if(depth==0){
  tmp='<table class="'+_tbclass+'">/n';
  tmp+='<tr class="'+_trclass+'">/n';
  for(var td in _tds) {
   tmp+='<td class="'+_tdclass+'">';
   tmp+=_tds[td];
   tmp+='</td>/n';
  }
  if(obj.editUrl!=undefined){
   tmp+='<td class="'+_tdclass+'">';
   tmp+='编辑';
   tmp+='</td>/n'; 
  }
  tmp+='</tr>/n';
 }else{
  tmp='';
 }
 for(var i=0;i<data.length;i++) {
  if(data[i][_pid]==path[depth]){
   var __path=path.midStr(0,depth+1)+','+data[i][_id];   
   tmp+='<tr>/n';
   
   var flag=path.inArr(data[i][_id]);
   if(flag&&data[i][_id]==path[path.length-1]){
    var flag=document.getElementById("_sort_show_"+path[path.length-1]).innerHTML.indexOf(_nodeClickerClose)!=-1?false:true; 
   }
   
   if(next_id==data[i][_id]&&flag){    
    var connector=_nodeClickerClose;
   }else{    
    var connector=_nodeClickerOpen;    
   }

   
   var regexp=/(jpg|gif|png)/i
   
   if(regexp.test(connector)){
    connector='<img src="'+connector+'" align="absmiddle"/>';
   }
   
   if(regexp.test(_header)){
    header='<img src="'+_header+'" align="absmiddle"/>&nbsp;';
   }

   var clicker=("&nbsp;&nbsp;").repeat(depth)+'<span style="cursor:pointer" onclick="'+str+'.path=['+__path+'];showSortTable(/''+str+'/')" id="_sort_show_'+data[i][_id]+'">'+connector+'</span>&nbsp;'+header;

  var emptyclicker=("&nbsp;&nbsp;").repeat(depth)+'<span id="_sort_show_'+data[i][_id]+'">&nbsp;&nbsp;</span>&nbsp;'+header;
   if(data[i+1]==undefined){
    clicker=emptyclicker;
   }else if(data[i+1][_pid]!=data[i][_id]){
    clicker=emptyclicker;
   }

   for(var td in _tds) {
    tmp+='<td class="'+_tdclass+'">';
    if(td!=_id){
     tmp+=clicker;
     clicker='';
    }
    tmp+=data[i][td];
    tmp+='</td>/n';
   }
   if(obj.editUrl!=undefined){
    tmp+='<td><a href="'+obj.editUrl+'/'+data[i][_id]+'">编辑</a></td>/n';
   }   
   tmp+='</tr>/n';
   
   if(obj.editUrl!=undefined){
    
   }
   
   if(flag){
    tmp+=showPathDepth(str,depth+1,'');
   }
  }
 }
 if(depth==0){
  tmp+='</table>';
 }
 return tmp;
}
function showSortTable(str){   
 document.getElementById("debug").innerHTML="";
 document.getElementById("contain_it").innerHTML= showPathDepth(str,0);
}
</script>
<body onLoad="showSortTable('__sort_data','');">
<div id="contain_it"></div>
<div id="debug"></div>
<table border="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html> 

抱歉!评论已关闭.