关于无限分级(ASP+数据库+JS)的实现代码
代码可以优化，请根据自己需求进行优化
说明：
所先把所有分类读取存放到JS数组中(如果数据量大可能就有点麻烦)
当选择时候返回父分类ID 在从数组中找出符合的分类，然后显示给用户
数据库设计(可以根据自己需求添加字段，如此分类属于什么分类等等)
字段 类型 说明
id 自动编号 记录编号
cotename 文本 分类名称
byid 数字 父分类ID(即为此表ID,根接点时值为0)
<%Dim conn
Set conn=Server.CreateObject("ADODB.Connection")
conn.ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;" & _
"Data Source=" & Server.MapPath("Cote.mdb")
conn.Open
%>
function CheckLm(thevalue){
var byid=new Array();
var cotename=new Array();
var id=new Array();
var i;
var id_s;
var byid_s;
var cotename_s;
var thevalue_r;
var data='<select name="lm" onchange="CheckLm(this.value)">'
id_s="|";
cotename_s='-选择-|';
<%set rs=server.CreateObject("adodb.recordset")
sql="select * from [DB_Cote] Order by byid,id"
rs.open sql,conn,1,1
i=0
if not rs.eof then
do while not rs.eof
response.Write("id["&i&"]="&rs("id")&";"&chr(10))
response.Write("byid["&i&"]="&rs("byid")&";"&chr(10))
response.Write("cotename["&i&"]='"&rs("cotename")&"';"&chr(10))
rs.movenext
i=i+1
loop
else
response.Write("id[0]=0;byid[0]=0;cotename[0]='无分类';")
end if
rs.close
set rs=nothing%>
if(thevalue==null||thevalue==undefined||thevalue==''){thevalue=0;}
//if(lmvalue==null||lmvalue==undefined||lmvalue==''){lmvalue=0;}
for(k=0;k<id.length;k++){
if(thevalue==id[k]){id_s+=thevalue+"|";cotename_s+=cotename[k]+"|";thevalue_r=byid[k];break;}else{thevalue_r=0;}
}
for(i=0;i<id.length;i++){
if(thevalue==byid[i]){
id_s+=id[i]+"|";cotename_s+=cotename[i]+"|";
}
}
if(id_s=='-1|'){
for(i=0;i<id.length;i++){
if(thevalue==id[i]){
id_s+=id[i]+"|";cotename_s+=cotename[i]+"|";
}
}
}
id_v=id_s.split("|");
cotename_v=cotename_s.split("|");
var length=id_v.length-1;
for(j=0;j<length;j++){
if(thevalue==id_v[j]){
data+="<option value='"+id_v[j]+"' selected>"+cotename_v[j]+"</option>";}
else{
data+="<option value='"+id_v[j]+"'>"+cotename_v[j]+"</option>";
}
}
if(thevalue!=0){data+="<option value='"+thevalue_r+"'>上级分类</option>";}
//alert(length+'/'+thevalue);
var lm=document.getElementById('lmid');
lm.innerHTML=data+"</select>";
}
<%Conn.Close:Set Conn=Nothing%>
<%
Dim lm
lm=request("lm")
if lm=Empyt or Not Isnumeric(lm) then lm=0
%>
<html>
<script type="text/javascript" src="*.asp"></script>
<body onLoad="CheckLm(<%=lm%>)">
<div id="lmid"></div>
</body>
</html>
运行后结果
function CheckLm(thevalue){
var byid=new Array();
var cotename=new Array();
var id=new Array();
var i;
var id_s;
var byid_s;
var cotename_s;
var thevalue_r;
var data=''
id_s="|";
cotename_s='-选择-|';
id[0]=1;
byid[0]=0;
cotename[0]='大栏目1';
id[1]=7;
byid[1]=0;
cotename[1]='大栏目2';
id[2]=2;
byid[2]=1;
cotename[2]='├大栏目1-1';
id[3]=3;
byid[3]=1;
cotename[3]='├大栏目1-2';
id[4]=4;
byid[4]=1;
cotename[4]='├大栏目1-3';
id[5]=5;
byid[5]=4;
cotename[5]='├-大栏目1-3-a';
id[6]=6;
byid[6]=4;
cotename[6]='├-大栏目1-3-b';
id[7]=10;
byid[7]=6;
cotename[7]='├--大栏目1-3-b-1';
id[8]=11;
byid[8]=6;
cotename[8]='├--大栏目1-3-b-2';
id[9]=12;
byid[9]=6;
cotename[9]='├--大栏目1-3-b-3';
id[10]=8;
byid[10]=7;
cotename[10]='├大栏目2-1';
id[11]=9;
byid[11]=7;
cotename[11]='├大栏目2-2';
if(thevalue==null||thevalue==undefined||thevalue==''){thevalue=0;}
//if(lmvalue==null||lmvalue==undefined||lmvalue==''){lmvalue=0;}
for(k=0;k"+cotename_v[j]+"";}
else{
data+=""+cotename_v[j]+"";
}
}
if(thevalue!=0){data+="上级分类";}
//alert(length+'/'+thevalue);
var lm=document.getElementById('lmid');
lm.innerHTML=data+"";
}
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
数据库:
Sub GetA(TheID)
set rs=server.CreateObject("adodb.recordset")
dim rs,sql
sql="select * from [DB_Cote] Where ByID in("&TheID&")"
rs.open sql,conn,1,1
i=0
if not rs.eof then
do while not rs.eof
response.Write(rs("cotename")&"<br>")
call GetA(Rs("id"))
rs.movenext
i=i+1
loop
end if
rs.close
set rs=nothing
End Sub
if m=empty then m=0
call GetA(m)
%>
相关推荐
-
js实现无限级树形导航列表效果代码
本文实例讲述了js实现无限级树形导航列表效果代码.分享给大家供大家参考.具体如下: 这是一款js实现无限级树形下拉导航菜单,简洁实用,用到一个已封装好的JS类,有用的大家借鉴一下. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-unlimit-tree-style-nav-list-codes/ 具体代码如下: <meta http-equiv="Content-Type" content="text/html;
-
json+jQuery实现的无限级树形菜单效果代码
本文实例讲述了json+jQuery实现的无限级树形菜单效果代码.分享给大家供大家参考.具体如下: 这里演示json树形菜单,JS无级树树形菜单,引入了jQuery插件,使用递归实现获取无级树数据并生成DOM结构,可以在JSON数据里 扩展无限级 看结构就明白. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-json-tree-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo
-
JQery jstree 大数据量问题解决方法
问题解决:生成的树是逐级加载的,在open函数中有一个生成节点的代码: 代码 复制代码 代码如下: for (var i=0; i<data.length; i++) { var n = TREE_OBJ.create(data[i], $(NODE)); if (onaddnode) onaddnode(n); } var firstChild = TREE_OBJ.children(NODE)[0]; if ($(firstChild).attr('id')==-1) TREE_OBJ.re
-
jstree创建无限分级树的方法【基于ajax动态创建子节点】
本文实例讲述了jstree创建无限分级树的方法.分享给大家供大家参考,具体如下: 首先来看一下效果 页面加载之初 节点全部展开后 首先数据库的表结构如下 其中Id为主键,PId为关联到自身的外键 两个字段均为GUID形式 层级关系主要靠这两个字段维护 其次需要有一个类型 public class MenuType { public Guid Id { get; set; } public Guid PId { get; set; } public string MenuName { get; s
-
php 无限级数据JSON格式及JS解析
Flash需要JSON格式的数据,于是,就有了如下代码:(PHP实现,C#类似,JSON库自己去下吧~~) 复制代码 代码如下: //--查询用户下线信息,返回JSON,用于flash if(!empty($_GET['action'])&&!empty($_GET['invite'])){ //固定参数请求才会返回信息 if($_GET['action']=='getinfo'&&$_GET['invite']==1){ //数据实体,一个实体类 class UcInvi
-
基于jquery的无限级联下拉框js插件
灵活性方面考虑了比较多的方面,提供了几个重要的配置方便在各类环境下使用,欢迎各位童鞋使用,源码完全开放.开发这个插件的缘于前段时间维护一个4级级联下拉框被里面200行代码及复杂的结构和bug所郁闷(之所以这么多代码是因为该级联下拉框有时只出现2个或3个),想到这类的需求其实经常都能遇到,jquery里没有这样比较好的插件,索性自己开发个.源代码并不复杂,稍微复杂的地方在第二个插件使用了缓存,造成理解起来十分困难,后面会做些解释. 插件一:适合在不与服务器进行AJAX交互情况使用,需预先将所有下拉
-
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
在上篇基于BootStrap Metronic开发框架经验小结[一]框架总览及菜单模块的处理,介绍了Bootstrap开发框架的一些基础性概括,包括总体界面效果,以及布局.菜单等内容,本篇继续这一主题,介绍页面内容常用到的数据分页处理,以及Bootstrap插件JSTree的使用. 在数据的界面显示当中,表格数据的展示以及分页是非常常见的处理操作,利用Bootstrap的样式布局,以及JQuery的Ajax数据处理,就能很好实现数据的动态展示和分页处理. 1.列表展示和分页处理1)数据的列表展示
-
javascript实现无限级select联动菜单
代码很简单,这里主要是给大家推荐一下本代码的实现思路,别具一格. 奉上代码: 复制代码 代码如下: <!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"&g
-
jsTree树控件(基于jQuery, 超强悍)[推荐]
1.支持基于HTML定义.Json.XML方式加载树节点 2.支持拖放,动态增加.删除.重命名树节点 3.支持复选框 4.支持复制.剪切.粘贴树节点,动态刷新树 5.提供足够的回调方法: 6.此外,还提供了详细的使用文档 下载地址 :http://code.google.com/p/jstree/ 文档 :http://jstree.com/reference/_documentation/1_files.html 例子 :http://jstree.com/reference/_example
-
jquery下jstree简单应用 - v1.0
第一篇文章,具体使用也过去很长时间了,直接贴码: 1.代码中使用json数据格式(直接在页面中组装成的,并非后台组装,具体方法:function _callBack(d)) 2.提供右键菜单及功能实现 3.具有checkbox,提供获取选中节点ID方法:function getMenuIds() 复制代码 代码如下: <script type="text/javascript" src="@{'/public/javascripts/jquery-1.4.2.min.j
-
基于jsTree的无限级树JSON数据的转换代码
jstree 主页 : http://www.jstree.com/ 其中提供了一种从后台取数据渲染成树的形式: 复制代码 代码如下: $("#mytree").tree({ data : { type : "json", url : "${ctx}/user/power!list.do" } }); 对于url中返回的值必须是它定义的json数据形式: 复制代码 代码如下: $("#demo2").tree({ data :
-
js无限级折叠菜单精简版
无限级折叠菜单 1.01 JS版 无限级折叠菜单 1.0.1 JS版 菜单_1_1 菜单_2_1 菜单_3_1 菜单_4_1 菜单_5_1 菜单_5_2 菜单_4_2 菜单_5_1 菜单_5_2 菜单_3_2 菜单_4_1 菜单_5_1 菜单_5_2 菜单_4_2 菜单_5_1 菜单_5_2 菜单_2_2 菜单_3_1 菜单_4_1 菜单_5_1 菜单_5_2 菜单_4_2 菜单_5_1 菜单_5_2 菜单_3_2 菜单_4_1 菜单_5_1 菜单_5_2 菜单_4_2 菜单_5_1 菜单_5_
-
jquery.jstree 增加节点的双击事件代码
jsTree 是基于jquery的树插件,支持拖放.复制.删除.快捷键.多选.自定义节点图标.自定义右键菜单.跨页面保存状态等等,总之我想到的它基本上都有了,而且最值得表扬的是它让人感觉一点都不慢哦. jsTree有节点选择事件,即 复制代码 代码如下: .bind("select_node.jstree", function(e, data) { //alert(data.rslt.obj.attr("id") + ":" + data.rsl
-
PHP+JS无限级可伸缩菜单详解（简单易懂）
发了几天基础的东西,今天来点稍微难的,一般在CMS系统后台中都要用到的类别管理部分的精华--无限级分类菜单,对于新手来说,这个可能有一定难度,但是今天听完我细细道来,相信以后大家就都会弄这东东了.怎么实现呢?大家先做个数据库出来先: -- -- 表的结构 `cr_columninfo` -- 复制代码 代码如下: CREATE TABLE `cr_columninfo` ( `columnid` int(4) NOT NULL auto_increment, `columnfat
-
jsTree 基于JQuery的排序节点 Bug
例如: - a (position 1) - b (position 2) - c (position 3) move c between a and b: cp=1 move a between b and c: cp=2 下移位置多加了1,不太清楚为什么,这里提供一种修复方法,也许它不是很好. 把 "position" : data.rslt.cp + i, 换成 "position" : data.rslt.o.index() + i, 可能对你有所帮助