写了个XML+Tree无穷树js版

.select
{
width:80%;
border:0px solid #bfbfbf;
}
.options
{
width:98%;
border:0px solid #ff0000;
}
.tree
{
width:92%;
border:0px solid #ff0000;
}

//
var Box = function ()
{
return document.createElement("div");
}
//
//
var desktop = document.body;
//
//
//
var Options = function ()
{
//
}
var Tree = function ()
{
//
var _this = this;
this._select = null;
this._options = null;
//
this.create = function (level,xml)
{
var space = "";
for(var i=0;i0)
{
this._tree = new Box();
this._options.appendChild(this._tree);
this._tree.style.display = "inline";
Tree.apply(this._tree);
//
this._tree.className = "tree";
this._tree.create(level+1,xml.childNodes[i]);
}
else
{
var div = new Box();
this._options.appendChild(div);
div.innerHTML = space+"  "+"[-]"+xml.childNodes[i].attributes[0].value;
}
//
}
//
}
}
//
var tree = new Box();
desktop.appendChild(tree);
Tree.apply(tree);
tree.className = "tree";
tree.style.left = 400;
tree.create(0,Login.documentElement);

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

.select
{
width:80%;
border:0px solid #bfbfbf;
}
.options
{
width:98%;
border:0px solid #ff0000;
}
.tree
{
border:0x solid #ff0000;
}
.treeView
{
height:400px;
width:300px;
border:1x solid #ff0000;
overflow:auto;
}

//
var Box = function ()
{
return document.createElement("div");
}
//
//
var desktop = document.body;
//
//
//
var Options = function ()
{
//
}
var Tree = function ()
{
//
var _this = this;
this._select = null;
this._options = null;
//
this.create = function (level,xml)
{
var space = "";
for(var i=0;i0)
{
this._tree = new Box();
this._options.appendChild(this._tree);
this._tree.style.display = "inline";
Tree.apply(this._tree);
//
this._tree.className = "tree";
this._tree.create(level+1,xml.childNodes[i]);
}
else
{
var div = new Box();
this._options.appendChild(div);
div.innerHTML = space+"  "+"[-]"+xml.childNodes[i].attributes[0].value;
}
//
}
//
}
}
//
var tree = new Box();
desktop.appendChild(tree);
Tree.apply(tree);
tree.className = "treeView";
tree.style.left = 400;
tree.create(0,Login.documentElement);
//
var tree1 = new Box();
desktop.appendChild(tree1);
Tree.apply(tree1);
tree1.className = "treeView";
tree1.style.position = "absolute";
tree1.style.top = 100;
tree1.style.left = 400;
tree1.create(0,Login.documentElement);
//

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • 写了个XML+Tree无穷树js版

    .select { width:80%; border:0px solid #bfbfbf; } .options { width:98%; border:0px solid #ff0000; } .tree { width:92%; border:0px solid #ff0000; } // var Box = function () { return document.createElement("div"); } // // var desktop = document.bod

  • element-ui tree 异步树实现勾选自动展开、指定展开、指定勾选功能

    目录 背景 1.监听复选框点击事件check 2.手动展开,使用node.expand()方法 项目中的实现 一.复选框勾选后能自动展开并选中,先展开再勾选也可以自动展开 二. 展开指定结点 三. 勾选指定结点 四.展开并勾选结点(支持异步树)牛逼版,实现展开回调 背景 项目中用到了vue的element-ui框架,用到了el-tree组件.由于数据量很大,使用了数据懒加载模式,即异步树.异步树采用复选框进行结点选择的时候,没法自动展开,官方文档找了半天也没有找到好的办法! 找不到相关的配置,或

  • 高级前端面试手写扁平数据结构转Tree

    目录 前言 什么是好算法,什么是坏算法 时间复杂度 计算方法 空间复杂度 计算方法: 不考虑性能实现,递归遍历查找 不用递归,也能搞定 最优性能 小试牛刀 前言 招聘季节一般都在金三银四,或者金九银十.最近在这五六月份,陆陆续续面试了十几个高级前端.有一套考察算法的小题目.后台返回一个扁平的数据结构,转成树. 我们看下题目:打平的数据内容如下: let arr = [ {id: 1, name: '部门1', pid: 0}, {id: 2, name: '部门2', pid: 1}, {id:

  • vue封装组件js版基本步骤

    目录 什么是组件化: Vue组件化思想 一.注册组件的基本步骤 1.创建组件构造器c-input 2.注册组件 3.父组件使用 二.丰富组件 三.父子组件间的通讯 1.父---->子通信 [props Down] 2. 子----> 父传值 [Events Up] 3. 子<----> 父 双向传值 四.slot插槽 什么是插槽? 怎么用插槽? 具名插槽 作用域插槽 什么是组件化: 组件化就是将一个页面拆分成一个个小的功能模块,每个功能模块完成属于自己这部分独立的功能,使得整个页面

  • IIS日志清理(CMD版,VBS版,JS版,WSH版)

    应用场合:主要用与虚拟主机,也可用于个人服务器 产生背景:2005 年某月某日,一向运行正常的虚拟主机死机了,让机房值班人员重启数次,都不成,接显示器进系统看,提示:C盘空间不足,半夜还得去机房处理,到机房后先断网,再进系统发现有两个地方有问题,C:\WINDOWS\system32\LogFiles文件有6G,还有一个就是Symantec隔离病毒的地方,到网上找了下,最大可能性是我们的虚拟主机的所有日志都写在这里,并且没人知道写在这里,郁闷,在IIS里看了下,还真是这么回事,日志天天都在长,当

  • 结构/表现/行为完全分离的选项卡(jquery版和原生JS版)

    关于思路,和常规选项卡思路一样.点击选项菜单,突出显示,并显示对应的选项.本文实例中主要是通过判断点击菜单在菜单列表中的索引位置来显示或隐藏选项区.原生js还有很多种实现方法(蓝色理想中搜索),为了与jQ版思路保持一致,本文实例用的是循环判断. 详见注释. 另有几点说明: 1. 通过本文DEMO演示,可以很明显的看到原生JS的window.onload=function(){-}与jQuery的$(document).ready(function(){-});的区别,这也是我为什么不用样式定义初

  • jQuery下实现等待指定元素加载完毕(可改成纯js版)

    先声明下这个方法的使用场合,以免误导大家. 比如在博客园,我们没法修改他的源代码, 那么只能想办法监视元素的出现了. 所以下面方法是在修改不了源码的情况下使用,而非写自己的项目. 今天在改博客几个样式的时候,以为很自然的加上js就可以实现了, 没想到那个是ajax加载的数据,而非页面首次加载的, 比如下面的 "提交评论" 按钮,右侧的 搜索按钮 等. 我很自然的写了 复制代码 代码如下: 1 $("#btn_comment_submit").removeClass(

  • js版扫雷游戏

    本文实例为大家分享了js版扫雷游戏的具体代码,供大家参考,具体内容如下 界面 考虑到简单,一般,困难三个扫雷区域的格子数都不同,所以界面上的扫雷区域是用js动态生成.先搭好整体html框架: <div class="container">         <div class="level">             <button class="select">简单</button>       

  • 限制字符输入数功能(jquery版和原生JS版)

    已知BUG: Ubuntu系统下, onkeyup事件失效,详见: Ubuntu系统下onkeyup/onkeydown对中文输入失效bug. 查看演示: 点此查看DEMO 核心代码: 复制代码 代码如下: //原生JavaScript版本 window.onload=function(){ var js=document.getElementById('js');//获取文本域 var info=document.getElementsByTagName('p')[0];//获取要插入提示信息

  • ASP.NET中日历控件和JS版日历控件的使用方法(第5节)

    今天小编带大家以做任务的形式了解ASP.NET中日历控件的使用方法,主要任务内容: 1.添加一个日历,设置日期以蓝色的完整名称显示,周末以黄色背景红色文字显示,而当前日期使用绿色背景显示,用户可以选择一天.一周或整个月,被选的天/周/月使用灰色背景色来显示.当选中一个日期后,把时间显示在下面的一个文本框中,效果如图所示: 2.设计一个注册页面,使用js日历控件帮助用户输入出生日期.效果如图所示: 学习项目一  Calendar日历控件 1.在站点下创建一个Calendar页面,并在页面上拖放一个

随机推荐