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 = {}; 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 = (event.srcElement || event.target); if (srcElement.classList.contains("tree-node-name")) { let liElement = srcElement.parentElement.parentElement; // first remove all classname Array.prototype.forEach.call(DOMObject.querySelectorAll(".tree-node"), item => { item.classList.remove("tree-node-selected"); }); //then add current 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"); } } }); } }