439 lines
16 KiB
JavaScript
439 lines
16 KiB
JavaScript
function createDOM(tagName, classList) {
|
||
var rs = document.createElement(tagName);
|
||
// rs.classList.add(classList);
|
||
rs.setAttribute("class", classList);
|
||
return rs;
|
||
};
|
||
|
||
//funx1(jQuery);
|
||
|
||
|
||
|
||
//通过一个根节点创建。
|
||
var Tree = function(title) {
|
||
var t = this;
|
||
t._root = t._tree;
|
||
};
|
||
Tree.prototype = {
|
||
getRoot: function() {
|
||
return this.treeDOM;
|
||
},
|
||
getChecked: function() {
|
||
function e(o, a) // 0 = node
|
||
{
|
||
var i = o.getCheckedState(),
|
||
l = o.element.getAttribute("data-filter");
|
||
switch (i) {
|
||
case "unchecked":
|
||
break;
|
||
case "checked":
|
||
if (o == t) {
|
||
n = "all";
|
||
} else {
|
||
var r = Object.assign({}, a);
|
||
r[l] = o.id, n.push(r)
|
||
}
|
||
break;
|
||
case "half":
|
||
var s = o.getControls(),
|
||
c = Object.assign({}, a);
|
||
o != t && (c[l] = o.id);
|
||
for (var d = 0, u = s.length; d < u; d++) {
|
||
e(s[d], c);
|
||
}
|
||
}
|
||
}
|
||
var t = this.treeDOM,
|
||
n = [];
|
||
return e(t, {}), n;
|
||
},
|
||
getSelection: function() {
|
||
function e(t, n) {
|
||
var o = t.element.getAttribute("data-filter"),
|
||
a = t.getParent();
|
||
if (!a) {
|
||
return n;
|
||
}
|
||
n[o] = t.id, e(a, n)
|
||
}
|
||
var t = this._selectionNode,
|
||
n = {};
|
||
return !!t && (e(t, n), n);
|
||
},
|
||
clear: function(e) {
|
||
var t = this.getRoot();
|
||
! function t(n) {
|
||
n.setCheckedState(e), n.setIconState("default");
|
||
var o = n.getControls();
|
||
if (o && o.length > 0) {
|
||
for (var a = 0; a < o.length; a++) {
|
||
t(o[a]);
|
||
}
|
||
}
|
||
}
|
||
(t)
|
||
}
|
||
};
|
||
//type =0，顶级，type=1,楼层。type=2,专业。type=3构件,type=4文档。,coolapse = 折叠
|
||
var TreeNode = function(title, viewer, id, type, coolapse) {
|
||
this.id = id;
|
||
this.parent = null;
|
||
this.parentId = 0;
|
||
this.type = type;
|
||
this.viewer = viewer;
|
||
this.element = createDOM('div', 'qm-tree'); //qm-tree
|
||
this.element.setAttribute('title', title);
|
||
var classValue = "qm-tree-node";
|
||
if (coolapse)
|
||
classValue = classValue + " qm-collapse";
|
||
this.treeNodeDOM = createDOM("div", classValue); //默认展开 qm-collapse
|
||
this.element.appendChild(this.treeNodeDOM);
|
||
this._opt = { isChecked: true };
|
||
this._selectionState = "unSelected";
|
||
this.setData(title);
|
||
this.subTreeList = [];
|
||
};
|
||
TreeNode.prototype.setData = function(t) {
|
||
var _this = this;
|
||
//<span class="qm-icon"></span> addChildNode
|
||
// var icon = createDOM("span", "qm-icon ");
|
||
// this.treeNodeDOM.appendChild(icon);
|
||
|
||
/**<span class="qm-label qm-unchecked">
|
||
<input type="checkbox" checked="true">
|
||
<span class="qm-checkbox"></span>
|
||
</span> */
|
||
var l = this._opt.isChecked ? "qm-checked" : "";
|
||
_this.checkDOM = createDOM("span", "qm-label " + l);
|
||
_this.checkDOM.innerHTML = '<input type="checkbox" checked="' +
|
||
_this._opt.isChecked + '"><span class="qm-checkbox iconfont icon-duoxuan-xuanzhong"></span>',
|
||
_this.treeNodeDOM.appendChild(this.checkDOM);
|
||
_this.checkDOM.addEventListener("click", function(e) {
|
||
var t = this.getElementsByTagName("input")[0].checked;
|
||
if (_this.type == 0) { //顶级
|
||
_this.viewer.setMeshVisiblityByTree(-1, 0, 0, t);
|
||
} else if (_this.type == 3) //构件分类
|
||
_this.viewer.setMeshVisiblityByTree(_this.parent.parentId, _this.parentId, _this.id, t);
|
||
else if (_this.type == 1) //楼层
|
||
_this.viewer.setMeshVisiblityByTree(_this.parentId, _this.id, 0, t);
|
||
else if (_this.type == 4) { //文档
|
||
_this.viewer.setMeshVisiblityByTree(_this.id, 0, 0, t);
|
||
} else if (_this.type == 5) { // 专业，其实是多个doc
|
||
_this.id.data.forEach(docid => {
|
||
_this.viewer.setMeshVisiblityByTree(docid, 0, 0, t);
|
||
});
|
||
} else if (_this.type == 6) { // 楼层，其实是多个doc-level
|
||
_this.id.data.forEach(e => {
|
||
_this.viewer.setMeshVisiblityByTree(e.doc, e.level, 0, t);
|
||
});
|
||
} else if (_this.type == 6) { // 构件，其实是多个doc-level
|
||
_this.id.data.forEach(e => {
|
||
_this.viewer.setMeshVisiblityByTree(e.doc, e.level, e.category, t);
|
||
});
|
||
}
|
||
_this._opt.isChecked = t;
|
||
_this.OnbfLableClick(e, t);
|
||
if (_this.parent) {
|
||
if (!t) //选中
|
||
{
|
||
_this.parent.checkDOM.classList.remove("qm-unchecked");
|
||
_this.parent.checkDOM.classList.add("qm-checked");
|
||
} else {
|
||
var add = true;
|
||
for (var i = 0; i < _this.parent.subTreeList.length; i++) {
|
||
if (_this.parent.subTreeList[i].checkDOM.classList.contains("qm_checked")) {
|
||
add = false;
|
||
break;
|
||
}
|
||
}
|
||
_this.parent.checkDOM.classList.remove("qm-checked");
|
||
_this.parent.checkDOM.classList.add("qm-unchecked");
|
||
}
|
||
}
|
||
|
||
var o = t ? "unchecked" : "checked";
|
||
console.log(o);
|
||
});
|
||
|
||
//<div class="qm-tree-icon gld-qm-untransparent" title="半透明"></div>
|
||
this.transDOM = createDOM("div", "qm-tree-icon qmd-untransparent iconfont icon-cube_box_fill");
|
||
this.transDOM.setAttribute("title", "半透明");
|
||
this.transDOM.addEventListener("click", function(e) {
|
||
console.log(e.target);
|
||
var nodeList = e.target.parentNode.parentNode.getElementsByClassName("qm-tree-icon");
|
||
if (nodeList.length == 0) return;
|
||
var check = nodeList[0].classList.contains("qmd-untransparent")
|
||
var t = 1;
|
||
if (check) t = 0.5;
|
||
// var t = this.getElementsByTagName("input")[0].checked;
|
||
if (_this.type == 0) { //顶级
|
||
_this.viewer.setMeshTransparencyByTree(-1, 0, 0, t);
|
||
} else if (_this.type == 3) //构件分类
|
||
_this.viewer.setMeshTransparencyByTree(_this.parent.parentId, _this.parentId, _this.id, t);
|
||
else if (_this.type == 1) //楼层
|
||
_this.viewer.setMeshTransparencyByTree(_this.parentId, _this.id, 0, t);
|
||
else if (_this.type == 4) { //文档
|
||
_this.viewer.setMeshTransparencyByTree(_this.id, 0, 0, t);
|
||
|
||
}
|
||
for (var i = 0; i < nodeList.length; i++) {
|
||
var elb = nodeList[i];
|
||
if (check) {
|
||
elb.classList.remove("qmd-untransparent");
|
||
elb.classList.remove("icon-cube_box_fill");
|
||
elb.classList.add("qmd-transparent");
|
||
elb.classList.add("icon-pouqiehe");
|
||
} else {
|
||
elb.classList.add("qmd-untransparent");
|
||
elb.classList.add("icon-cube_box_fill");
|
||
|
||
elb.classList.remove("qmd-transparent");
|
||
|
||
elb.classList.remove("icon-pouqiehe");
|
||
|
||
}
|
||
}
|
||
});
|
||
this.treeNodeDOM.appendChild(this.transDOM);
|
||
this.treeNameDOM = createDOM("span", "qm-tree-name");
|
||
this.treeNameDOM.addEventListener("click", function(e) {
|
||
|
||
if ((_this.type != 3) && ((_this.type != 1))) return;
|
||
|
||
if (_this.type == 3) //构件分类
|
||
{
|
||
|
||
_this.viewer.setMeshSelectByTree(_this.parent.parentId, _this.parentId, _this.id, 0);
|
||
} else if (_this.type == 1) //楼层
|
||
{
|
||
|
||
_this.viewer.setMeshSelectByTree(_this.parentId, _this.id, 0, 0);
|
||
}
|
||
var elb = e.target;
|
||
var nodeList = $(".qm-selected");
|
||
if (nodeList.length > 0)
|
||
nodeList[0].classList.remove("qm-selected");
|
||
elb.classList.remove("qm-selected");
|
||
elb.classList.add("qm-selected");
|
||
|
||
});
|
||
this.treeNameDOM.innerHTML = t;
|
||
this.treeNodeDOM.appendChild(this.treeNameDOM);
|
||
};
|
||
TreeNode.prototype.addChildNode = function(subnode) {
|
||
var t = this;
|
||
if (t.subTreeDOM == null) {
|
||
t.subTreeDOM = createDOM("div", "qm-sub-tree");
|
||
var n = createDOM("span", "qm-icon");
|
||
this.treeNodeDOM.insertBefore(n, this.treeNodeDOM.children[0]);
|
||
n.addEventListener("click", function(e) {
|
||
var p = e.target.parentNode;
|
||
if (p.tagName == "DIV") {
|
||
if (p.classList.contains("qm-collapse")) {
|
||
p.classList.remove("qm-collapse");
|
||
|
||
} else {
|
||
p.classList.add("qm-collapse");
|
||
|
||
|
||
}
|
||
}
|
||
});
|
||
t.element.appendChild(this.subTreeDOM);
|
||
}
|
||
subnode.parentId = t.id;
|
||
subnode.parent = t;
|
||
t.subTreeList.push(subnode);
|
||
t.subTreeDOM.appendChild(subnode.element);
|
||
|
||
};
|
||
TreeNode.prototype.OnbfLableClick = function(e, t) {
|
||
var elb = e.target;
|
||
if (elb.classList.contains("qm-checkbox"))
|
||
elb = elb.parentNode;
|
||
var p = elb;
|
||
var nodeList = p.parentNode.parentNode.getElementsByClassName("qm-label");
|
||
for (var i = 0; i < nodeList.length; i++) {
|
||
var elb = nodeList[i];
|
||
if (!t) {
|
||
elb.classList.remove("qm-unchecked");
|
||
elb.classList.add("qm-checked");
|
||
// elb.classList.add("iconfont");
|
||
// elb.classList.add("icon-duoxuan-xuanzhong");
|
||
elb.getElementsByTagName("input")[0].checked = true;
|
||
} else {
|
||
elb.classList.add("qm-unchecked");
|
||
elb.classList.remove("qm-checked");
|
||
// elb.classList.remove("iconfont");
|
||
// elb.classList.remove("icon-duoxuan-xuanzhong");
|
||
elb.getElementsByTagName("input")[0].checked = false;
|
||
}
|
||
}
|
||
};
|
||
TreeNode.prototype.doUncheck = function() {
|
||
this.checkDOM.classList.add("qm-unchecked");
|
||
this.checkDOM.classList.remove("qm-checked");
|
||
this.checkDOM.classList.remove("iconfont");
|
||
this.checkDOM.classList.remove("icon-duoxuan-xuanzhong");
|
||
this.checkDOM.getElementsByTagName("input")[0].checked = false;
|
||
};
|
||
TreeNode.prototype.removeChildNode = function(e) {
|
||
var t = this._controls.getObjectByAttribute("id", e);
|
||
this.subTreeDOM.removeChild(t.element), this._controls.removeObjectByAttribute("id", e);
|
||
};
|
||
TreeNode.prototype.getCheckedState = function() {
|
||
return this._checkedState;
|
||
};
|
||
TreeNode.prototype.getIconState = function() {
|
||
return this._iconState;
|
||
};
|
||
TreeNode.prototype.getSelectionState = function() {
|
||
return this._selectionState;
|
||
};
|
||
TreeNode.prototype.getParent = function() {
|
||
return !!this._parent && this._parent;
|
||
};
|
||
TreeNode.prototype.setCheckedState = function(e) {
|
||
var t = this._opt;
|
||
this._checkedState = e ? "checked" : "unchecked", t.hasCheckbox && this.checkbox && (this.checkbox.getElementsByTagName("input")[0].checked = e,
|
||
this.checkbox.toggleClass("qm-checked", e), this.checkbox.toggleClass("qm-unchecked", !e), this.checkbox.removeClass("qm-half")),
|
||
this.setChildrenCheckedState(e);
|
||
};
|
||
TreeNode.prototype.setIconState = function(e) {
|
||
this.icon && (this.icon.setState(e), this.setChildrenIconState(e), this._iconState = "default" == e);
|
||
};
|
||
TreeNode.prototype.setParentCheckedState = function(e) {
|
||
var t = this.getControls();
|
||
if (t && t.length > 0) {
|
||
for (var n, o = 0, a = t.length; o < a; o++) {
|
||
var i = t[o].getCheckedState();
|
||
n ? i != n && (n = "half") : n = i
|
||
}
|
||
this._checkedState = n
|
||
}
|
||
switch (this._checkedState) {
|
||
case "checked":
|
||
this.checkbox.getElementsByTagName("input")[0].checked = !0, this.checkbox.addClass("qm-checked"),
|
||
this.checkbox.removeClass("qm-unchecked"), this.checkbox.removeClass("qm-half");
|
||
break;
|
||
case "unchecked":
|
||
this.checkbox.getElementsByTagName("input")[0].checked = !1, this.checkbox.addClass("qm-unchecked"),
|
||
this.checkbox.removeClass("qm-checked"), this.checkbox.removeClass("qm-half");
|
||
break;
|
||
case "half":
|
||
this.checkbox.getElementsByTagName("input")[0].checked = !0, this.checkbox.addClass("qm-half"),
|
||
this.checkbox.removeClass("qm-unchecked"), this.checkbox.removeClass("qm-checked")
|
||
}
|
||
};
|
||
TreeNode.prototype.setChildrenCheckedState = function(e) {
|
||
var t = this.getControls(),
|
||
n = t.length;
|
||
if (t && n > 0) {
|
||
for (var o = 0; o < n; o++) {
|
||
t[o].setCheckedState(e);
|
||
}
|
||
}
|
||
};
|
||
TreeNode.prototype.setParentIconState = function(e) {
|
||
var t = this.getControls();
|
||
if (t && t.length > 0) {
|
||
for (var n = !1, o = 0, a = t.length; o < a; o++) {
|
||
var i = t[o].getIconState();
|
||
if (i) {
|
||
n = i;
|
||
break
|
||
}
|
||
}
|
||
this._iconState = n
|
||
}
|
||
n ? this.icon.setState("default") : this.icon.setState("change");
|
||
};
|
||
TreeNode.prototype.setChildrenIconState = function(e) {
|
||
var t = this.getControls(),
|
||
n = t.length;
|
||
if (t && n > 0) {
|
||
for (var o = 0; o < n; o++) {
|
||
t[o].setIconState(e);
|
||
}
|
||
}
|
||
};
|
||
TreeNode.prototype.expand = function() {
|
||
var e = this;
|
||
this.treeNode.removeClass("qm-collapse"), this.eventManager.fireEvent("Expand", e);
|
||
};
|
||
TreeNode.prototype.collapse = function() {
|
||
var e = this;
|
||
this.treeNode.addClass("qm-collapse"), this.eventManager.fireEvent("Collapse", e);
|
||
};
|
||
TreeNode.prototype.toggleExpansion = function(e) {
|
||
var t = this;
|
||
this.treeNode.hasClass("qm-collapse") ? t.expand() : t.collapse();
|
||
};
|
||
TreeNode.prototype.select = function() {
|
||
if (this._selection) {
|
||
return this.treeName.addClass("qm-selected");
|
||
}
|
||
};
|
||
TreeNode.prototype.deselect = function() {
|
||
this.treeName && this.treeName.removeClass("qm-selected");
|
||
};
|
||
TreeNode.prototype.disabled = function() {
|
||
this._enabled = !1, this.treeName.addClass("qm-disabled");
|
||
};
|
||
TreeNode.prototype.enabled = function() {
|
||
this._enabled = !0, this.treeName.removeClass("qm-disabled");
|
||
};
|
||
TreeNode.prototype.addNode = function(e) {
|
||
this.treeNode.appendChild(e);
|
||
};
|
||
TreeNode.prototype.removeNode = function(e) {
|
||
this.treeNode.appendChild(e);
|
||
};
|
||
|
||
|
||
var TreeTableNode = function(bftableDom) {
|
||
this.element = bftableDom;
|
||
this.bodyDom = null;
|
||
};
|
||
//{title:xxx,children:[{key:x,value:x}]}
|
||
TreeTableNode.prototype.addtbTale = function(data, fun) {
|
||
|
||
this.bodyDom = createDOM('tbody', 'qm-group undefined');
|
||
this.element.appendChild(this.bodyDom);
|
||
var title = createDOM('tr', 'qm-group-title');
|
||
var td = createDOM('td', '');
|
||
td.setAttribute('colspan', 2);
|
||
td.innerHTML = data.text;
|
||
var icon = createDOM('i', 'qm-icon');
|
||
td.appendChild(icon);
|
||
title.appendChild(td);
|
||
icon.addEventListener("click", function(e) {
|
||
var p = e.target.parentNode;
|
||
if (p.tagName == "TD") {
|
||
p = p.parentNode.parentNode;
|
||
if (p.classList.contains("qm-collapse")) {
|
||
p.classList.remove("qm-collapse");
|
||
|
||
} else {
|
||
p.classList.add("qm-collapse");
|
||
|
||
}
|
||
}
|
||
});
|
||
|
||
this.bodyDom.appendChild(title);
|
||
data.children.forEach(e => {
|
||
var kv = e.split(',');
|
||
var c = createDOM('tr', 'qm-group-content');
|
||
if (fun)
|
||
c.innerHTML = ' <td class="qm-key">' + kv[0] + '</td>' +
|
||
'<td class="qm-value"><a onclick=' + fun + '(event)>' + kv[1] + '</td>';
|
||
else
|
||
c.innerHTML = ' <td class="qm-key">' + kv[0] + '</td>' +
|
||
'<td class="qm-value">' + kv[1] + '</td>';
|
||
this.bodyDom.appendChild(c);
|
||
});
|
||
|
||
|
||
};
|
||
export { TreeNode, TreeTableNode } |