首页 / JAVASCRIPT / JS无限树状列表实现代码_javascript技巧

JS无限树状列表实现代码_javascript技巧

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JS无限树状列表实现代码_javascript技巧，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5179字，纯文字阅读大概需要8分钟。

内容图文

tree.js
代码如下:

/********************************
树形组织框架列表
v1.0
2011年1月6日
作者：flycrosscloud
********************************/
//初始化框架
var allImages = {
HasNodeClose: "JS无限树状列表实现代码_javascript技巧 - 文章图片", //包含子节点，闭合状态（不是最后一个)
HasNodeOpen: "JS无限树状列表实现代码_javascript技巧 - 文章图片", //包含子节点，打开状态（不是最后一个）
LastHasNodeClose: "JS无限树状列表实现代码_javascript技巧 - 文章图片", //包含子节点，闭合状态（最后一个）
LastHasNodeOpen: "JS无限树状列表实现代码_javascript技巧 - 文章图片", //包含子节点，打开状态（最后一个）
CommonNode: "JS无限树状列表实现代码_javascript技巧 - 文章图片", //不包含子节点，普通节点（不是最后一个）
LastCommonNode: "JS无限树状列表实现代码_javascript技巧 - 文章图片", //不包含子节点，普通节点（最后一个）
NodeLine: "JS无限树状列表实现代码_javascript技巧 - 文章图片", //节点间连线
NodeClose: "JS无限树状列表实现代码_javascript技巧 - 文章图片", //节点关闭状态
NodeOpen: "JS无限树状列表实现代码_javascript技巧 - 文章图片", //节点打开状态
NodeBlank: "JS无限树状列表实现代码_javascript技巧 - 文章图片"//空白连线
};
$(function ()
{
$.post("http://localhost/system/asmx/wsTree.asmx/HelloWorld", function (data) { InitTree(data); });
});
function InitTree(org_data)
{
var org = eval("(" + org_data + ")");
drawtree(org, 1, "", "#nodeTree");
$("#nodeTree img").bind("click", function (event)
{
$(this).parent().find("ul").toggle();

});
}
function drawtree(org, s, pPreLine, ulname)
{
var orgLength = org.length;
var PreLine;
var count = s;

for (var i = 0; i < orgLength; i++)
{
var NodeImg = allImages.NodeClose; //项目前图标
var PreNodeLine; //项目图标前连线
//确定项目前图标
if (org[i].ChildUnits != null)//如果包含子节点
{
NodeImg = allImages.NodeOpen;
}
//确定图形前连线
if ((org[i].ChildUnits != null) && (i == orgLength - 1))
{
//包含子节点并且是本层最后一个节点
PreNodeLine = allImages.LastHasNodeOpen;
}
if ((org[i].ChildUnits == null) && (i == orgLength - 1))
{
//不包含子节点并且是本层最后一个节点
PreNodeLine = allImages.LastCommonNode;
}
if ((org[i].ChildUnits != null) && (i != orgLength - 1))
{
//包含子节点并且不是本层最后一个节点
PreNodeLine = allImages.HasNodeOpen;
}
if ((org[i].ChildUnits == null) && (i != orgLength - 1))
{
//不包含子节点并且不是本层最后一个节点
PreNodeLine = allImages.CommonNode;
}
if (i == orgLength - 1)
{
PreLine = pPreLine + allImages.NodeBlank;
}
else
{
PreLine = pPreLine + allImages.NodeLine;
}
var temp = $("
  • " + pPreLine + PreNodeLine + NodeImg + "" + org[i].unit_name + "
    • ");
    $(ulname).append(temp);
    if (org[i].ChildUnits != null)
    {
    temp.append("
      ");
      var content = temp.find("ul");
      drawtree(org[i].ChildUnits, count + 1, PreLine,content );
      }
      }

      }

      tree.css
      代码如下:

      li
      {
      vertical-align: middle;
      font-size: 16px;
      display: block;line-height: 22px;list-style-type: none;height: 22px;padding: 0px; margin:0px;
      }
      ul a
      {
      height:22px;
      line-height:22px;
      color:#123231;
      text-decoration:none;
      }
      ul
      {
      list-style-type:none;
      padding:0px;
      margin:0px;
      }
      img
      {
      vertical-align:middle;
      cursor:pointer;
      }
      *
      {
      padding:0px;
      margin:0px;
      }

      test.htm
      代码如下:




      内容总结

      以上是互联网集市为您收集整理的JS无限树状列表实现代码_javascript技巧全部内容，希望文章能够帮你解决JS无限树状列表实现代码_javascript技巧所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

      内容备注

      版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

      内容手机端

      扫描二维码推送至手机访问。

      本文链接：https://qyyshop.com/info/313318.html

      来源：【匿名】