扁平数组构建DOM树
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树的更多相关文章
- 从Chrome源码看浏览器如何构建DOM树
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } p { font-size: 1 ...
- HTML文档解析和DOM树的构建
浏览器解析HTML文档生成DOM树的过程,以下是一段HTML代码,以此为例来分析解析HTML文档的原理 <!DOCTYPE html> <html lang="en&quo ...
- WebKit Inside: DOM树的构建
当客户端App主进程创建WKWebView对象时,会创建另外两个子进程:渲染进程与网络进程.主进程WKWebView发起请求时,先将请求转发给渲染进程,渲染进程再转发给网络进程,网络进程请求服务器.如 ...
- 【浏览器渲染原理】渲染树构建之渲染树和DOM树的关系(转载 学习中。。。)
在DOM树构建的同时,浏览器会构建渲染树(render tree).渲染树的节点(渲染器),在Gecko中称为frame,而在webkit中称为renderer.渲染器是在文档解析和创建DOM节点后创 ...
- jquery: json树组数据输出到表格Dom树的处理方法
项目背景 项目中需要把表格重排显示 处理方法 思路主要是用历遍Json数组把json数据一个个append到5个表格里,还要给每个单元格绑定个单击弹出自定义对话框,表格分了单双行,第一行最后还要改ro ...
- 【VB6】使用VB6创建和访问Dom树【爬虫基础知识 】
使用VB6创建和访问Dom树 关键字:VB,DOM,HTML,爬虫,IHTMLDocument 我们知道,在VB中一般大家会用WebBrowser来获取和操作dom对象. 但是,有这样一种情形,却让我 ...
- dom树的介绍,及原理分析
三.解析和DOM树的构建 1.解析: 由于解析渲染引擎是一个非常重要的过程,我们将会一步步的深入,现在让我们来介绍解析. 解析一个文档,意味着把它转换为一个有意义的结构——代码可以了解和使用的东西,解 ...
- JS的Dom树小结
一[DOM树节点] DOM节点分为三大类:元素节点.文本节点.属性节点 文本节点.属性节点,为元素节点的两个子节点: 通过getElement系列方法,可以去到元素节点. 二[查看节点] ...
- DOM树节点和事件
一.前言:DOM树节点是JS的基础语句.通过节点,能够取到HTML代码中的任意标签,从而对其进行修改和添加各种视觉效果. 二.DOM树节点 DOM节点分为三大类: 元素节点,属性节点,文本节点 ...
随机推荐
- 如何实现织梦dedecms表单提交时发送邮箱功能【已解决】
我们通过织梦系统制作网站时,很多客户需要有在线留言功能,这时就会用到自定义表单.但是很多用户觉得经常登陆后台查看留言信息太麻烦了,于是想能否在提交留言是直接把内容发送到指定邮箱.网站经过测试终于实现了 ...
- python之流程控制与运算符
第一:流程控制 一:if条件语句 计算机之所以能做很多自动化的任务,因为它可以自己做条件判断. 单分支语句: 单分支,单个条件 age = 20 if age >= 18: print('you ...
- Linux内存管理学习资料
下面是Linux内存管理学习的一些资料. 博客 mlock() and mlockall() system calls. All about Linux swap space 逆向映射的演进 Linu ...
- rvs产生服从指定分布的随机数 pdf概率密度函数 cdf累计分布函数 ppf 分位点函数
统计工作中几个常用用法在python统计函数库scipy.stats的使用范例. 正态分布以正态分布的常见需求为例了解scipy.stats的基本使用方法. 1.生成服从指定分布的随机数 norm.r ...
- Glide 4.0.0 下之加载本地缓存的图片
在网上搜了下,无意中发现RequestOptions还有个方法: onlyRetrieveFromCache 用了下是OK的 try { File imageFile = Glide.with(con ...
- 使用http load测试qps
官网 http://acme.com/software/http_load/ 安装 wget http://acme.com/software/http_load/http_load-12mar200 ...
- iqiyi__youku__cookie_设置
iqiyi设置cookie var string = "此处替换iqiyi的cookie"; var getCookie = function( str) { var cookie ...
- [Python设计模式] 第15章 如何兼容各种DB——抽象工厂模式
github地址:https://github.com/cheesezh/python_design_patterns 题目 如何让一个程序,可以灵活替换数据库? 基础版本 class User(): ...
- mysql官方驱动jar
问题描述: 在mysql5.7版本,发现登录不了,找不到原因.有人说是驱动的问题,下载最新的驱动,问题得到解决! 问题解决: 下载最新mysql-jar驱动,传统版本最新mysql-jar驱动版本5. ...
- (原)DropBlock A regularization method for convolutional networks
转载请注明出处: https://www.cnblogs.com/darkknightzh/p/9985027.html 论文网址: https://arxiv.org/abs/1810.12890 ...