跪求带多选框的javascript树型菜单

萝asdf 2009-08-26 08:35:51
数据库表 ： 主键 父节点id 名字
，就是这样一张表，父节点的id关连别的结点的主键，查出一个树型菜单（有几层未知）在界面上以多选框的形式显示，要求选中父节点，自动选中他下面的子节点，选好后，要提交到数据库中。节点的关系也要存进数据库，我实在没好的办法，特跪求各位大侠指点下。最好有个demo，jsp的，写成js更好。
...全文
266 15 打赏 收藏 转发到动态 举报
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
萝asdf 2009-08-29
  • 打赏
  • 举报
 回复
用ajax在查下数据库，虽然效率低了点，但能够完成，
legu1 2009-08-27
  • 打赏
  • 举报
 回复
<html>
<head>
<title>Tree View</title>
<meta name="author" content="" />
<style type="text/css">
body{
font-size: 9pt;
}
.treeview-line-cross{
font-size:0px;
border:solid red 0px;
height:16px;
width:16px;
background-image:url(http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/treeview-default-line.gif);
background-repeat:no-repeat;
background-position:0px 0px;
float:left;
}

.treeview-line-single{
font-size:0px;
border:solid red 0px;
height:16px;
width:16px;
background-image:url(http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/treeview-default-line.gif);
background-repeat:no-repeat;
background-position:0px -32px;
float:left;
}
.treeview-line-last{
font-size:0px;
border:solid red 0px;
height:8px;
width:16px;
background:url(http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/treeview-default-line.gif) left bottom no-repeat;
float:left;
}
.treeview-line-blank{
font-size:0px;
border:solid red 0px;
height:16px;
width:16px;
float:left;
}

</style>
</head>
<body>
<div id="dest" style="border: solid red 1px; width: 300px; height: 500px;"></div>
</body>
<script>
function $(id){return document.getElementById(id);}
/**
* js树形菜单
* 作者 sunxing007
* 转载请注明来自：http://blog.csdn.net/sunxing007
*/
function TreeView(title, isFolder){
this.el = null;
this.title = title;
this.isFolder = isFolder;
this.children = [];
}

TreeView.prototype.printout = function(ident){
alert(this.title);
if(this.isFolder&&this.children.length>0){
for(var i=0; i<this.children.length; i++){
this.children[i].printout();
}
}
}

TreeView.prototype.toHTML = function(leftStr, append){
var t = "<div style='height:16px; overflow:hidden;'>";
var hasChild = this.isFolder&&this.children.length>0;
if(this.isFolder){
t += (append + "<img src='http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/folder.gif' onclick='doLeafClick(this," + hasChild + ")'/>" + this.title);
}
else{
t += (append + "<img src='http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/file.gif' />" + this.title);
}
t += "</div>";
if(this.isFolder&&this.children.length>0){
t += "<div>";
for(var i=0; i<this.children.length-1; i++){
t += ( leftStr + this.children[i].toHTML(leftStr+"<div class='treeview-line-single'></div>", "<div class='treeview-line-cross'></div>"));
}
t += (leftStr + this.children[i].toHTML(leftStr+"<div class='treeview-line-blank'></div>", "<div class='treeview-line-last'></div>"));
t += "</div>";
}
return t;
}
var root = new TreeView("C:(SYSTEM)", true);
var bea = new TreeView("bea", true);
bea.children.push(new TreeView("logs", true));
bea.children.push(new TreeView("license.bea", false));
root.children.push(bea);
var doc = new TreeView("doc", true);
var basic = new TreeView("Basic", true);
basic.children.push(new TreeView("test.xml", false))
doc.children.push(basic);
root.children.push(doc);
root.children.push(new TreeView("winnt", true));
root.children.push(new TreeView("sys.info", false));
root.children.push(new TreeView("1.sql", false));
//root.printout();
$('dest').innerHTML = root.toHTML("","");

function doLeafClick(e, hasChild){
if(hasChild){
var c = e.parentNode.nextSibling;
if(c.style.display==""){
e.src="http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/folder-closed.gif";
c.style.display="none";
}
else{
e.src="http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/folder.gif";
c.style.display="";
}
}
else{
if(e.src.indexOf("folder-closed.gif")==-1){
e.src="http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/folder-closed.gif";
}
else{
e.src="http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/folder.gif";
}
}
}
</script>
</html>
legu1 2009-08-27
  • 打赏
  • 举报
 回复
<html>
<head>
<title>Tree View</title>
<meta name="author" content="" />
<style type="text/css">
body{
font-size: 9pt;
}
.treeview-line-cross{
font-size:0px;
border:solid red 0px;
height:16px;
width:16px;
background-image:url(http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/treeview-default-line.gif);
background-repeat:no-repeat;
background-position:0px 0px;
float:left;
}

.treeview-line-single{
font-size:0px;
border:solid red 0px;
height:16px;
width:16px;
background-image:url(http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/treeview-default-line.gif);
background-repeat:no-repeat;
background-position:0px -32px;
float:left;
}
.treeview-line-last{
font-size:0px;
border:solid red 0px;
height:8px;
width:16px;
background:url(http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/treeview-default-line.gif) left bottom no-repeat;
float:left;
}
.treeview-line-blank{
font-size:0px;
border:solid red 0px;
height:16px;
width:16px;
float:left;
}

</style>
</head>
<body>
<div id="dest" style="border: solid red 1px; width: 300px; height: 500px;"></div>
</body>
<script>
function $(id){return document.getElementById(id);}
/**
* js树形菜单
* 作者 sunxing007
* 转载请注明来自：http://blog.csdn.net/sunxing007
*/
function TreeView(title, isFolder){
this.el = null;
this.title = title;
this.isFolder = isFolder;
this.children = [];
}

TreeView.prototype.printout = function(ident){
alert(this.title);
if(this.isFolder&&this.children.length>0){
for(var i=0; i<this.children.length; i++){
this.children[i].printout();
}
}
}

TreeView.prototype.toHTML = function(leftStr, append){
var t = "<div style='height:16px; overflow:hidden;'>";
var hasChild = this.isFolder&&this.children.length>0;
if(this.isFolder){
t += (append + "<img src='http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/folder.gif' onclick='doLeafClick(this," + hasChild + ")'/>" + this.title);
}
else{
t += (append + "<img src='http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/file.gif' />" + this.title);
}
t += "</div>";
if(this.isFolder&&this.children.length>0){
t += "<div>";
for(var i=0; i<this.children.length-1; i++){
t += ( leftStr + this.children[i].toHTML(leftStr+"<div class='treeview-line-single'></div>", "<div class='treeview-line-cross'></div>"));
}
t += (leftStr + this.children[i].toHTML(leftStr+"<div class='treeview-line-blank'></div>", "<div class='treeview-line-last'></div>"));
t += "</div>";
}
return t;
}
var root = new TreeView("C:(SYSTEM)", true);
var bea = new TreeView("bea", true);
bea.children.push(new TreeView("logs", true));
bea.children.push(new TreeView("license.bea", false));
root.children.push(bea);
var doc = new TreeView("doc", true);
var basic = new TreeView("Basic", true);
basic.children.push(new TreeView("test.xml", false))
doc.children.push(basic);
root.children.push(doc);
root.children.push(new TreeView("winnt", true));
root.children.push(new TreeView("sys.info", false));
root.children.push(new TreeView("1.sql", false));
//root.printout();
$('dest').innerHTML = root.toHTML("","");

function doLeafClick(e, hasChild){
if(hasChild){
var c = e.parentNode.nextSibling;
if(c.style.display==""){
e.src="http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/folder-closed.gif";
c.style.display="none";
}
else{
e.src="http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/folder.gif";
c.style.display="";
}
}
else{
if(e.src.indexOf("folder-closed.gif")==-1){
e.src="http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/folder-closed.gif";
}
else{
e.src="http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/folder.gif";
}
}
}
</script>
</html>
why_java 2009-08-27
  • 打赏
  • 举报
 回复 


<html>  

<head>  

    <title>Tree View</title>  

    <meta name="author" content="" />  

    <style type="text/css">  

      body{   

        font-size: 9pt;   

      }   

      .treeview-line-cross{   

        font-size:0px;   

        border:solid red 0px;   

        height:16px;   

        width:16px;   

        background-image:url(http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/treeview-default-line.gif);   

        background-repeat:no-repeat;   

        background-position:0px 0px;   

        float:left;   

      }   

         

      .treeview-line-single{   

        font-size:0px;    

        border:solid red 0px;    

        height:16px;    

        width:16px;    

        background-image:url(http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/treeview-default-line.gif);    

        background-repeat:no-repeat;    

        background-position:0px -32px;   

        float:left;   

      }   

      .treeview-line-last{   

        font-size:0px;    

        border:solid red 0px;    

        height:8px;    

        width:16px;    

        background:url(http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/treeview-default-line.gif) left bottom no-repeat;   

        float:left;   

      }   

      .treeview-line-blank{   

        font-size:0px;    

        border:solid red 0px;    

        height:16px;    

        width:16px;   

        float:left;   

      }   

         

    </style>  

</head>  

<body>  

<div id="dest" style="border: solid red 1px; width: 300px; height: 500px;"></div>  

</body>  

<script>  

  function $(id){return document.getElementById(id);}   

  /**   

  * js树形菜单   

  * 作者 sunxing007   

  * 转载请注明来自：http://blog.csdn.net/sunxing007   

  */   

  function TreeView(title, isFolder){   

    this.el = null;   

    this.title = title;   

    this.isFolder = isFolder;   

    this.children = [];   

  }   

     

  TreeView.prototype.printout = function(ident){   

    alert(this.title);   

    if(this.isFolder&&this.children.length>0){   

      for(var i=0; i<this.children.length; i++){   

        this.children[i].printout();   

      }   

    }   

  }   

     

  TreeView.prototype.toHTML = function(leftStr, append){   

    var t = "<div style='height:16px; overflow:hidden;'>";   

    var hasChild = this.isFolder&&this.children.length>0;    

    if(this.isFolder){   

      t += (append + "<img src='http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/folder.gif' onclick='doLeafClick(this," + hasChild + ")'/>" + this.title);   

    }   

    else{   

      t += (append + "<img src='http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/file.gif' />" + this.title);   

    }   

    t += "</div>";   

    if(this.isFolder&&this.children.length>0){   

       t += "<div>";   

      for(var i=0; i<this.children.length-1; i++){   

        t += ( leftStr + this.children[i].toHTML(leftStr+"<div class='treeview-line-single'></div>", "<div class='treeview-line-cross'></div>"));   

      }   

      t += (leftStr + this.children[i].toHTML(leftStr+"<div class='treeview-line-blank'></div>", "<div class='treeview-line-last'></div>"));   

      t += "</div>";   

    }   

    return t;   

  }   

  var root = new TreeView("C:(SYSTEM)", true);   

  var bea = new TreeView("bea", true);   

  bea.children.push(new TreeView("logs", true));   

  bea.children.push(new TreeView("license.bea", false));   

  root.children.push(bea);   

  var doc = new TreeView("doc", true);   

  var basic = new TreeView("Basic", true);   

  basic.children.push(new TreeView("test.xml", false))   

  doc.children.push(basic);   

  root.children.push(doc);   

  root.children.push(new TreeView("winnt", true));   

  root.children.push(new TreeView("sys.info", false));   

  root.children.push(new TreeView("1.sql", false));   

  //root.printout();   

  $('dest').innerHTML = root.toHTML("","");   

  

  function doLeafClick(e, hasChild){   

    if(hasChild){   

            var c = e.parentNode.nextSibling;   

            if(c.style.display==""){   

                    e.src="http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/folder-closed.gif";   

                    c.style.display="none";   

            }   

            else{   

                    e.src="http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/folder.gif";   

                    c.style.display="";   

            }   

    }   

    else{   

            if(e.src.indexOf("folder-closed.gif")==-1){   

                    e.src="http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/folder-closed.gif";   

            }   

            else{   

                    e.src="http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090611/folder.gif";   

            }   

    }   

  }   

</script>  

</html>
javagxc 2009-08-27
  • 打赏
  • 举报
 回复
JavaScript实现的目录树
javagxc 2009-08-27
  • 打赏
  • 举报
 回复
JavaScript实现的目录树
zjhlht 2009-08-27
  • 打赏
  • 举报
 回复
用dtree吧~~~

这是下载地址，可以看看
http://download.csdn.net/source/536418
lvsh870228 2009-08-27
  • 打赏
  • 举报
 回复
靠，楼主要的是checkbox树！
zhang_yu_QIN 2009-08-27
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 jinxfei 的回复:]
不推荐extjs，还是用dhtmlxtree
[/Quote]

支持。幫頂。
萝asdf 2009-08-27
  • 打赏
  • 举报
 回复
呜呜，我要多选框，我要多选框，我要多选框，我要多选框，我要多选框，我要多选框，我要多选框我要多选框，我要多选框，我要多选框，我要多选框，我要多选框，我要多选框我要多选框我要多选框，我要多选框我要多选框，呜呜，呜呜，呜呜，呜呜，呜呜，呜呜，
求求你们了，给个有多选框的，extjs我不会，想学，怎么到处是英文，我是英文盲，现学来不及，
dhtmlxtree，这个东西我没听说过，刚搜下，发现学起来，也不是很快学的会，麻烦给个demo，感激不尽，
要demo，要demo，我只恨 这分不能再多了，不然一定给更多，拜托各位了，急，急，急，急
xiaozejun 2009-08-26
  • 打赏
  • 举报
 回复
dtree和Xtree都可以啊
现在用ajax控制树也可以啊
jinxfei 2009-08-26
  • 打赏
  • 举报
 回复
不推荐extjs，还是用dhtmlxtree
lcj_up 2009-08-26
  • 打赏
  • 举报
 回复
帮顶顶
yifeng7956 2009-08-26
  • 打赏
  • 举报
 回复
可以使用dTree，非常的方便。无限层的。数据结构为
id | pid | name | url |
非常的方便
老紫竹 2009-08-26
  • 打赏
  • 举报
 回复
去看extjs的例子！
JavaScript动态树型菜单(带有参数说明)
一个国外网站下载下来的很不错的JavaScript动态树型菜单,为方便大家，本人对其中的部分参说做了小小说明^_^
Android 任意层别 树形控件
代码为博客的实例代码：http://blog.csdn.net/lmj623565791/article/details/40212367 有问题博客留言
Delphi开发者资源社区 V1.0
代码未经整理，有很多不规范的地方，仅供参考，请自己注意。有些计划中的功能尚未完成，但不影响使用。 如果你发现漏洞，请通知我，不要来黑啊，呵呵。这是一个程序员交流的地方，请爱护它。 功能： ...
java简单文件管理系统源码
设计一个文件管理方案，模拟一个简单的...要求目录结构为树型结构，目录下可以是目录，也可以是文件。通过该实验是学生可以深刻理解文件系统的概念、所涉及的基本操作及实现时的主要数据结构。 建议用eclipse打开。
vant树型菜单多级_iOS 动态树形结构 - 实现多级菜单，附带复选框功能
关键词：递归 多级菜单 复选目标：1.显示多级菜单，默认显示一级.2.可以通过点击有子级的行展开菜单3.通过复选框，改变选中状态。状态有全选、半选、未选中4.可以扩展获取当前所选的条目集合menu.gif实现过程：数据...
Web 开发

81,091

社区成员

341,718

社区内容

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章