javascript,无限级分类,类似windows文件夹方式显示,非ajax版,(Ie 7,firefox 2).
2008-02-29 12:00
585 查看
<!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;
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"/> ';
}
var clicker=(" ").repeat(depth)+'<span style="cursor:pointer" onclick="'+str+'.path=['+__path+'];showSortTable(/''+str+'/')" id="_sort_show_'+data[i][_id]+'">'+connector+'</span> '+header;
var emptyclicker=(" ").repeat(depth)+'<span id="_sort_show_'+data[i][_id]+'"> </span> '+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] ;
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> </td>
</tr>
</table>
</body>
</html>
<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
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"/> ';
}
var clicker=(" ").repeat(depth)+'<span style="cursor:pointer" onclick="'+str+'.path=['+__path+'];showSortTable(/''+str+'/')" id="_sort_show_'+data[i][_id]+'">'+connector+'</span> '+header;
var emptyclicker=(" ").repeat(depth)+'<span id="_sort_show_'+data[i][_id]+'"> </span> '+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]
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> </td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
- Javascript动态创建SVG在IE、Firefox下不显示
- Extjs显示时间兼容性问题——firefox正常显示，IE不正常出现NaN-NaN-NaN的解决方式
- ASP VBScript + Javascript 以字符串方式二级联显示文件夹
- Extjs显示时间兼容性问题——firefox正常显示，IE不正常出现NaN-NaN-NaN的解决方式
- Windows中设置文件夹文件的默认显示方式（如详细信息）
- js实时时间显示，兼容IE、Opera、Firefox,javascript面向对象编程。
- js + php 读取、播放视频流 兼容firefox，chrome，ie，mac的safari，ios的safari，ios的微信浏览器（curl读取文件流篇） 分类： php javascript 浏览器兼容 safari 视频流 jwplayer6
- Scroll View 控件以Thumbnail的方式显示一个文件夹的所有图片，类似图片浏览器
- IE和Firefox 在JavaScript方面的不兼容及统一方法总结
- javascript IE与FireFox 一些兼容写法 （小技巧七)
- Firefox, IE等不同浏览器对JavaScript,CSS不同解析问题
- onbeforeunload事件中调用Ajax实现用户注销操作(兼容IE、Firefox、Chrome)
- AJAX中文乱码PHP完美解决(IE和Firefox兼容)
- 推荐兼容 IE、 FireFox 的 javascript 日历控件
- [转载]Javascript的IE和Firefox兼容性问题集合
- javascript 火狐(firefox)不显示本地图片问题解决
- 兼容linux firefox和windows ie的xml处理代码
- 【总结】IE和Firefox的Javascript兼容性总结