扁平数组构建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");
                    }
                }
            });
        }
    }
时间: 2024-11-27 10:43:56

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

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

.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } p { font-size: 15px; text-indent: 2em } #colorbox.crayon-colorbox,#cboxOverlay.crayon-colorbox,.crayon-colorbox #cboxWrapper { position: absolute; top: 0; left: 0; z-

编码、解码形成DOM树的过程

浏览器从网络或硬盘中获得HTML字节数据后会经过一个流程将字节解析为DOM树: 编码: 先将HTML的原始字节数据转换为文件指定编码的字符. 令牌化: 然后浏览器会根据HTML规范来将字符串转换成各种令牌(如<html>.<body>这样的标签以及标签中的字符串和属性等都会被转化为令牌,每个令牌具有特殊含义和一组规则).令牌记录了标签的开始与结束,通过这个特性可以轻松判断一个标签是否为子标签(假设有<html>与<body>两个标签,当<html>

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

在DOM树构建的同时,浏览器会构建渲染树(render tree).渲染树的节点(渲染器),在Gecko中称为frame,而在webkit中称为renderer.渲染器是在文档解析和创建DOM节点后创建的,会计算DOM节点的样式信息. 在webkit中,renderer是由DOM节点调用attach()方法创建的.attach()方法计算了DOM节点的样式信息.attach()是自上而下的递归操作.也就是说,父节点总是比子节点先创建自己的renderer.销毁的时候,则是自下而上的递归操作,也就

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

使用VB6创建和访问Dom树 关键字:VB,DOM,HTML,爬虫,IHTMLDocument 我们知道,在VB中一般大家会用WebBrowser来获取和操作dom对象. 但是,有这样一种情形,却让我们纠结不已: 我们需要做爬虫,然后爬虫不需要太高的效率,但是我们被复杂的正则表达式给弄的头晕眼花. 不知道何去何从. 今天,下定决心研究下html的解析,终于掌握了对IHTMLDocument等接口对象的使用. 源代码放在:http://www.extencent.com 具体的文章将会放在博客园以

JS的Dom树小结

一[DOM树节点] DOM节点分为三大类:元素节点.文本节点.属性节点 文本节点.属性节点,为元素节点的两个子节点: 通过getElement系列方法,可以去到元素节点. 二[查看节点] 1.getElementById:通过ID获取唯一的节点:多个同名ID,只会取第一个: 2.getElementsByName:通过Name取到一个数组,包含1到多个节点: 使用方式:通过循环,取到每一个节点.循环次数:从0开始,<数组.length 三[查看和设置属性节点] 1.查看属性节点: getAttr

dom树的介绍,及原理分析

三.解析和DOM树的构建 1.解析: 由于解析渲染引擎是一个非常重要的过程,我们将会一步步的深入,现在让我们来介绍解析. 解析一个文档,意味着把它转换为一个有意义的结构——代码可以了解和使用的东西,解析 的结果通常是一个树的节点集合,用来表示文档结构,它被称为解析树或者语法树. 例子: 解析表达式“2+3-1”,返回树如下图3.1 1).语法: 解析是基于文档所遵循的语法规则——书写所用的语言或格式——来进行的.每一种可以解析的格式必须由确定的语法与词汇组成.这被称之为上下文无关语法. 人类语言

树状数组与线段树

一:树状数组 树状数组是对一个数组改变某个元素和求和比较实用的数据结构.两中操作都是O(logn). 需求:有时候我们需要频繁地求数组的前k项和或者求数组从小标i到j的和,这样每次最坏情况下的时间复杂度就会为O(N),这样效率太低了.而树状数组主要就是为了解决这样一个问题.树状数组在求和及修改都可以在O(lgN)时间内完成. 树状数组需要额外维护一个数组,我们设为C[N],原数组为A[N], 其中每个元素C[i]表示A[i-2^k+1]到A[i]的和,这里k是i在二进制时末尾0的个数.注意通过位

HDU 1166 —— 敌兵布阵 【树状数组 or 线段树】

http://acm.hdu.edu.cn/showproblem.php?pid=1166 需求: 1.点修改 2.区间求和 标准的BIT(二叉索引树,又名树状数组)问题,当然也可以用最基础的仅支持“点修改”的线段树来解决! 线段树版本: #include <cstdio> #include <iostream> #define INF 0x3f3f3f3f using namespace std; const int MAXN = 65536 + 5; // 65536 是最小

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

项目背景 项目中需要把表格重排显示 处理方法 思路主要是用历遍Json数组把json数据一个个append到4个表格里,还要给每个单元格绑定个单击弹出自定义对话框,表格分了单双行,第一行最后还要改rowspan呵呵,程序还没优化运行正常先给客户展示先:) 1,表格数据->json数组 var keyArr = new Array(); var jsonArr = new Array(); $list.find("thead th").each(function () { keyA