interface IOrganizationNode {
id: string;
code: string;
name: string;
localName: string;
localNameLocale: string;
parentCode: string;
description: string;
children?: IOrganizationNode[];
}
interface IOrganizationTree {
organizationTree: IOrganizationNode[];
} interface IOrganization {
id: string;
code: string;
name: string;
localName: string;
localNameLocale: string;
parentCode: string;
description: string;
} export class OrganizationTree {
public static GenerateOrganizationsDom: string = "GenerateOrganizationsDom" + _gcEditingInput; public static createTreeDom(array: IOrganization[]): HTMLElement {
let DOMObject: HTMLElement = document.createElement("div");
DOMObject.className = "select-user-tree-container";
let organizationTree: IOrganizationTree = OrganizationTree.CreateTreeData(array);
DOMObject.appendChild(OrganizationTree.CreateTreeDom(organizationTree.organizationTree, true));
this._bindEvent(DOMObject);
return DOMObject; } private static CreateTreeData(array: IOrganization[]): IOrganizationTree {
let r: IOrganizationNode[] = [];
let codeToOrganizationMap: Dictionary<IOrganization> = {};
let len = array.length;
let orgs: IOrganization[] = [];
//deep copy
for (let i = 0; i < len; i++) {
let org: any = {};
for (var attr in array[i]) {
org[attr] = array[i][attr];
}
orgs.push(org);
}
for (let i = 0; i < len; i++) {
codeToOrganizationMap[orgs[i].code] = orgs[i];
}
for (let j = 0; j < len; j++) {
let org: IOrganizationNode = orgs[j];
let parentOrg: IOrganizationNode = codeToOrganizationMap[org.parentCode];

if (parentOrg) {
if (parentOrg.children) {
parentOrg.children.push(org);
} else {
parentOrg.children = [];
parentOrg.children.push(org);
}
} else {
r.push(org);
}

            }
let result: any = {};
result.organizationTree = r;
return result;
} private static CreateTreeDom(treeNodes: IOrganizationNode[], top?: boolean): HTMLElement {
let ul = document.createElement("ul") as HTMLUListElement;
if (top) {
ul.classList.add("tree");
ul.classList.add("tree-root");
//ul.classList.add("tree", "tree-root");//chrome unsupport
} else {
ul.classList.add("tree");
}
for (let i = 0; i < treeNodes.length; i++) {
let li = document.createElement("li") as HTMLLIElement;
li.classList.add("tree-node");
let a = document.createElement("a") as HTMLAnchorElement;
a.classList.add("tree-node-label");
let spanName = document.createElement("span") as HTMLSpanElement;
spanName.classList.add("tree-node-name");
spanName.innerText = treeNodes[i].name;
spanName["GCSK_OrganizationCode"] = treeNodes[i].code;
let spanArrow = document.createElement("span") as HTMLSpanElement;
spanArrow.classList.add("tree-node-arrow");
a.appendChild(spanName);
a.appendChild(spanArrow);
li.appendChild(a); if (treeNodes[i].children) {
li.classList.add("tree-node-haschildren");
li.appendChild(OrganizationTree.CreateTreeDom(treeNodes[i].children));
}
ul.appendChild(li);
}
return ul;
} private static _bindEvent(DOMObject: HTMLElement) {
let self = this;
GC$(DOMObject).bind("click", (event) => {
let srcElement = <HTMLElement>(event.srcElement || event.target);
if (srcElement.classList.contains("tree-node-name")) {
let liElement = srcElement.parentElement.parentElement;
// first remove all <li> classname
Array.prototype.forEach.call(DOMObject.querySelectorAll(".tree-node"), item => { item.classList.remove("tree-node-selected"); });
//then add current <li>
if (liElement.classList.contains("tree-node-haschildren")) {
liElement.classList.add("tree-node-opened");
}
liElement.classList.add("tree-node-selected"); var evt = document.createEvent("UIEvent") as UIEvent;
evt.initEvent(OrganizationTree.GenerateOrganizationsDom, true, false);
evt["GCSK_OrganizationCode"] = srcElement["GCSK_OrganizationCode"];
liElement.dispatchEvent(evt); } else if (srcElement.classList.contains("tree-node-arrow")) {
let liElement = srcElement.parentElement.parentElement;
if (srcElement.parentElement.parentElement.classList.contains("tree-node-opened")) {
liElement.classList.remove("tree-node-opened");
} else {
liElement.classList.add("tree-node-opened");
}
}
});
}
}

扁平数组构建DOM树的更多相关文章

  1. 从Chrome源码看浏览器如何构建DOM树

    .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } p { font-size: 1 ...

  2. HTML文档解析和DOM树的构建

    浏览器解析HTML文档生成DOM树的过程,以下是一段HTML代码,以此为例来分析解析HTML文档的原理 <!DOCTYPE html> <html lang="en&quo ...

  3. WebKit Inside: DOM树的构建

    当客户端App主进程创建WKWebView对象时,会创建另外两个子进程:渲染进程与网络进程.主进程WKWebView发起请求时,先将请求转发给渲染进程,渲染进程再转发给网络进程,网络进程请求服务器.如 ...

  4. 【浏览器渲染原理】渲染树构建之渲染树和DOM树的关系(转载 学习中。。。)

    在DOM树构建的同时,浏览器会构建渲染树(render tree).渲染树的节点(渲染器),在Gecko中称为frame,而在webkit中称为renderer.渲染器是在文档解析和创建DOM节点后创 ...

  5. jquery: json树组数据输出到表格Dom树的处理方法

    项目背景 项目中需要把表格重排显示 处理方法 思路主要是用历遍Json数组把json数据一个个append到5个表格里,还要给每个单元格绑定个单击弹出自定义对话框,表格分了单双行,第一行最后还要改ro ...

  6. 【VB6】使用VB6创建和访问Dom树【爬虫基础知识 】

    使用VB6创建和访问Dom树 关键字:VB,DOM,HTML,爬虫,IHTMLDocument 我们知道,在VB中一般大家会用WebBrowser来获取和操作dom对象. 但是,有这样一种情形,却让我 ...

  7. dom树的介绍,及原理分析

    三.解析和DOM树的构建 1.解析: 由于解析渲染引擎是一个非常重要的过程,我们将会一步步的深入,现在让我们来介绍解析. 解析一个文档,意味着把它转换为一个有意义的结构——代码可以了解和使用的东西,解 ...

  8. JS的Dom树小结

    一[DOM树节点]  DOM节点分为三大类:元素节点.文本节点.属性节点 文本节点.属性节点,为元素节点的两个子节点:  通过getElement系列方法,可以去到元素节点.     二[查看节点] ...

  9. DOM树节点和事件

    一.前言:DOM树节点是JS的基础语句.通过节点,能够取到HTML代码中的任意标签,从而对其进行修改和添加各种视觉效果. 二.DOM树节点    DOM节点分为三大类: 元素节点,属性节点,文本节点  ...

随机推荐

  1. 如何实现织梦dedecms表单提交时发送邮箱功能【已解决】

    我们通过织梦系统制作网站时,很多客户需要有在线留言功能,这时就会用到自定义表单.但是很多用户觉得经常登陆后台查看留言信息太麻烦了,于是想能否在提交留言是直接把内容发送到指定邮箱.网站经过测试终于实现了 ...

  2. python之流程控制与运算符

    第一:流程控制 一:if条件语句 计算机之所以能做很多自动化的任务,因为它可以自己做条件判断. 单分支语句: 单分支,单个条件 age = 20 if age >= 18: print('you ...

  3. Linux内存管理学习资料

    下面是Linux内存管理学习的一些资料. 博客 mlock() and mlockall() system calls. All about Linux swap space 逆向映射的演进 Linu ...

  4. rvs产生服从指定分布的随机数 pdf概率密度函数 cdf累计分布函数 ppf 分位点函数

    统计工作中几个常用用法在python统计函数库scipy.stats的使用范例. 正态分布以正态分布的常见需求为例了解scipy.stats的基本使用方法. 1.生成服从指定分布的随机数 norm.r ...

  5. Glide 4.0.0 下之加载本地缓存的图片

    在网上搜了下,无意中发现RequestOptions还有个方法: onlyRetrieveFromCache 用了下是OK的 try { File imageFile = Glide.with(con ...

  6. 使用http load测试qps

    官网 http://acme.com/software/http_load/ 安装 wget http://acme.com/software/http_load/http_load-12mar200 ...

  7. iqiyi__youku__cookie_设置

    iqiyi设置cookie var string = "此处替换iqiyi的cookie"; var getCookie = function( str) { var cookie ...

  8. [Python设计模式] 第15章 如何兼容各种DB——抽象工厂模式

    github地址:https://github.com/cheesezh/python_design_patterns 题目 如何让一个程序,可以灵活替换数据库? 基础版本 class User(): ...

  9. mysql官方驱动jar

    问题描述: 在mysql5.7版本,发现登录不了,找不到原因.有人说是驱动的问题,下载最新的驱动,问题得到解决! 问题解决: 下载最新mysql-jar驱动,传统版本最新mysql-jar驱动版本5. ...

  10. (原)DropBlock A regularization method for convolutional networks

    转载请注明出处: https://www.cnblogs.com/darkknightzh/p/9985027.html 论文网址: https://arxiv.org/abs/1810.12890 ...