From d7fe3b19ab7a906b30ad8ba73e6cd56cb5deedef Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期一, 20 十二月 2021 19:12:09 +0800
Subject: [PATCH] 搜索
---
src/components/giantTree/zTree/ztree_v3/jquery.ztree.exhide.js | 285 +++++++++++++++++++++++++++++++++++
src/pages/gb28181/index/App.vue | 4
src/components/giantTree/zTree/ztree.vue | 165 ++++++++++++++++++++
3 files changed, 453 insertions(+), 1 deletions(-)
diff --git a/src/components/giantTree/zTree/ztree.vue b/src/components/giantTree/zTree/ztree.vue
index f17ee9c..147ccec 100644
--- a/src/components/giantTree/zTree/ztree.vue
+++ b/src/components/giantTree/zTree/ztree.vue
@@ -1,15 +1,25 @@
<template>
- <div class="ztree" :id="ztreeId"></div>
+ <div>
+ <div class="search">
+ <el-input placeholder="鎼滅储" v-model="keyWord">
+ <i slot="suffix" class="el-input__icon el-icon-search" id="key"></i>
+ </el-input>
+ </div>
+ <div class="ztree" :id="ztreeId"></div>
+ </div>
</template>
<script>
import * as $ from "jquery";
+import { Loading } from "element-ui";
+
if (!window.jQuery) {
window.jQuery = $;
}
// require("@ztree/ztree_v3/js/jquery.ztree.all");
require("./ztree_v3/jquery.ztree.all");
+require("./ztree_v3/jquery.ztree.exhide");
export default {
props: {
@@ -96,6 +106,10 @@
},
},
},
+ keyWord: "",
+ options: {
+ target: "",
+ },
};
},
watch: {
@@ -113,6 +127,8 @@
Object.assign({}, this.ztreeSetting, this.setting),
this.list
);
+ console.log("---------");
+ this.fuzzySearch(this.ztreeObj, "#key", null, true); //鍒濆鍖栨ā绯婃悳绱㈡柟娉�
this.$emit("onCreated", this.ztreeObj);
});
},
@@ -322,6 +338,138 @@
if (btn) {
item.removeChild(item.querySelector(".icontupian1"));
}
+ }
+ },
+ fuzzySearch(zTreeObj, searchField, isHighLight, isExpand) {
+ const _this = this;
+
+ if (!zTreeObj) {
+ alert("fail to get ztree object");
+ }
+ var nameKey = zTreeObj.setting.data.key.name; //get the key of the node name
+ isHighLight = isHighLight === false ? false : true; //default true, only use false to disable highlight
+ isExpand = isExpand ? true : false; // not to expand in default
+ zTreeObj.setting.view.nameIsHTML = isHighLight; //allow use html in node name for highlight use
+
+ var metaChar = "[\\[\\]\\\\^\\$\\.\\|\\?\\*\\+\\(\\)]"; //js meta characters
+ var rexMeta = new RegExp(metaChar, "gi"); //regular expression to match meta characters
+
+ // keywords filter function
+ function ztreeFilter(zTreeObj, _keywords, callBackFunc) {
+ if (!_keywords) {
+ _keywords = ""; //default blank for _keywords
+ }
+
+ // function to find the matching node
+ function filterFunc(node) {
+ if (node && node.oldname && node.oldname.length > 0) {
+ node[nameKey] = node.oldname; //recover oldname of the node if exist
+ }
+ zTreeObj.updateNode(node); //update node to for modifications take effect
+ if (_keywords.length == 0) {
+ //return true to show all nodes if the keyword is blank
+ zTreeObj.showNode(node);
+ zTreeObj.expandNode(node, isExpand);
+ return true;
+ }
+ //transform node name and keywords to lowercase
+ if (
+ node[nameKey] &&
+ node[nameKey].toLowerCase().indexOf(_keywords.toLowerCase()) != -1
+ ) {
+ if (isHighLight) {
+ //highlight process
+ //a new variable 'newKeywords' created to store the keywords information
+ //keep the parameter '_keywords' as initial and it will be used in next node
+ //process the meta characters in _keywords thus the RegExp can be correctly used in str.replace
+ var newKeywords = _keywords.replace(rexMeta, function (matchStr) {
+ //add escape character before meta characters
+ return "\\" + matchStr;
+ });
+ node.oldname = node[nameKey]; //store the old name
+ var rexGlobal = new RegExp(newKeywords, "gi"); //'g' for global,'i' for ignore case
+ //use replace(RegExp,replacement) since replace(/substr/g,replacement) cannot be used here
+ node[nameKey] = node.oldname.replace(
+ rexGlobal,
+ function (originalText) {
+ //highlight the matching words in node name
+ var highLightText =
+ '<span style="color: whitesmoke;background-color: darkred;">' +
+ originalText +
+ "</span>";
+ return highLightText;
+ }
+ );
+ zTreeObj.updateNode(node); //update node for modifications take effect
+ }
+ zTreeObj.showNode(node); //show node with matching keywords
+ return true; //return true and show this node
+ }
+
+ zTreeObj.hideNode(node); // hide node that not matched
+ return false; //return false for node not matched
+ }
+
+ var nodesShow = zTreeObj.getNodesByFilter(filterFunc); //get all nodes that would be shown
+ processShowNodes(nodesShow, _keywords); //nodes should be reprocessed to show correctly
+ }
+
+ /**
+ * reprocess of nodes before showing
+ */
+ function processShowNodes(nodesShow, _keywords) {
+ if (nodesShow && nodesShow.length > 0) {
+ //process the ancient nodes if _keywords is not blank
+ if (_keywords.length > 0) {
+ $.each(nodesShow, function (n, obj) {
+ var pathOfOne = obj.getPath(); //get all the ancient nodes including current node
+ if (pathOfOne && pathOfOne.length > 0) {
+ //i < pathOfOne.length-1 process every node in path except self
+ for (var i = 0; i < pathOfOne.length - 1; i++) {
+ zTreeObj.showNode(pathOfOne[i]); //show node
+ zTreeObj.expandNode(pathOfOne[i], true); //expand node
+ }
+ }
+ });
+ } else {
+ //show all nodes when _keywords is blank and expand the root nodes
+ var rootNodes = zTreeObj.getNodesByParam("level", "0"); //get all root nodes
+ $.each(rootNodes, function (n, obj) {
+ zTreeObj.expandNode(obj, true); //expand all root nodes
+ });
+ }
+ }
+ }
+
+ //listen to change in input element
+ $(searchField).bind("click", function () {
+ _this.options.target = document.querySelector(
+ "#" + _this.ztreeId
+ ).parentNode.parentNode;
+ console.log(_this.options.target);
+ let loadingInstance = Loading.service(_this.options);
+ console.log(_this.keyWord);
+ // var _keywords = $(this).val();
+ searchNodeLazy(_this.keyWord); //call lazy load
+ loadingInstance.close();
+ });
+
+ var timeoutId = null;
+ var lastKeyword = "";
+ // excute lazy load once after input change, the last pending task will be cancled
+ function searchNodeLazy(_keywords) {
+ if (timeoutId) {
+ //clear pending task
+ clearTimeout(timeoutId);
+ }
+ timeoutId = setTimeout(function () {
+ if (lastKeyword === _keywords) {
+ return;
+ }
+ ztreeFilter(zTreeObj, _keywords); //lazy load ztreeFilter function
+ // $(searchField).focus();//focus input field again after filtering
+ lastKeyword = _keywords;
+ }, 500);
}
},
},
@@ -659,3 +807,18 @@
position: absolute;
}
</style>
+
+<style scoped lang="scss">
+.search {
+ width: 300px;
+
+ ::v-deep .el-input__suffix {
+ right: 0;
+ width: 50px;
+ background: skyblue;
+ color: #fff;
+ cursor: pointer;
+ background-color: rgb(61, 104, 255);
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/giantTree/zTree/ztree_v3/jquery.ztree.exhide.js b/src/components/giantTree/zTree/ztree_v3/jquery.ztree.exhide.js
new file mode 100644
index 0000000..dfe70fc
--- /dev/null
+++ b/src/components/giantTree/zTree/ztree_v3/jquery.ztree.exhide.js
@@ -0,0 +1,285 @@
+!(function(e) {
+ var i = {
+ view: {
+ clearOldFirstNode: function(e, i) {
+ for (var o = i.getNextNode(); o; ) {
+ if (o.isFirstNode) {
+ (o.isFirstNode = !1), c.setNodeLineIcos(e, o);
+ break;
+ }
+ if (o.isLastNode) break;
+ o = o.getNextNode();
+ }
+ },
+ clearOldLastNode: function(e, i, o) {
+ for (var d = i.getPreNode(); d; ) {
+ if (d.isLastNode) {
+ (d.isLastNode = !1), o && c.setNodeLineIcos(e, d);
+ break;
+ }
+ if (d.isFirstNode) break;
+ d = d.getPreNode();
+ }
+ },
+ makeDOMNodeMainBefore: function(e, i, o) {
+ var d = h.isHidden(i, o);
+ e.push(
+ "<li ",
+ d ? "style='display:none;' " : "",
+ "id='",
+ o.tId,
+ "' class='",
+ n.className.LEVEL,
+ o.level,
+ "' tabindex='0' hidefocus='true' treenode>"
+ );
+ },
+ showNode: function(e, i, o) {
+ h.isHidden(e, i, !1), h.initShowForExCheck(e, i), d(i, e).show();
+ },
+ showNodes: function(e, i, o) {
+ if (i && 0 != i.length) {
+ var d,
+ t,
+ n = {};
+ for (d = 0, t = i.length; d < t; d++) {
+ var s = i[d];
+ if (!n[s.parentTId]) {
+ var r = s.getParentNode();
+ n[s.parentTId] = null === r ? h.getRoot(e) : s.getParentNode();
+ }
+ c.showNode(e, s, o);
+ }
+ for (var a in n) {
+ var N = h.nodeChildren(e, n[a]);
+ c.setFirstNodeForShow(e, N), c.setLastNodeForShow(e, N);
+ }
+ }
+ },
+ hideNode: function(e, i, o) {
+ h.isHidden(e, i, !0),
+ (i.isFirstNode = !1),
+ (i.isLastNode = !1),
+ h.initHideForExCheck(e, i),
+ c.cancelPreSelectedNode(e, i),
+ d(i, e).hide();
+ },
+ hideNodes: function(e, i, o) {
+ if (i && 0 != i.length) {
+ var d,
+ t,
+ n = {};
+ for (d = 0, t = i.length; d < t; d++) {
+ var s = i[d];
+ if ((s.isFirstNode || s.isLastNode) && !n[s.parentTId]) {
+ var r = s.getParentNode();
+ n[s.parentTId] = null === r ? h.getRoot(e) : s.getParentNode();
+ }
+ c.hideNode(e, s, o);
+ }
+ for (var a in n) {
+ var N = h.nodeChildren(e, n[a]);
+ c.setFirstNodeForHide(e, N), c.setLastNodeForHide(e, N);
+ }
+ }
+ },
+ setFirstNode: function(e, i) {
+ var o = h.nodeChildren(e, i),
+ d = h.isHidden(e, o[0], !1);
+ 0 < o.length && !d
+ ? (o[0].isFirstNode = !0)
+ : 0 < o.length && c.setFirstNodeForHide(e, o);
+ },
+ setLastNode: function(e, i) {
+ var o = h.nodeChildren(e, i),
+ d = h.isHidden(e, o[0]);
+ 0 < o.length && !d
+ ? (o[o.length - 1].isLastNode = !0)
+ : 0 < o.length && c.setLastNodeForHide(e, o);
+ },
+ setFirstNodeForHide: function(e, i) {
+ var o, d, t;
+ for (d = 0, t = i.length; d < t && !(o = i[d]).isFirstNode; d++) {
+ if (!h.isHidden(e, o) && !o.isFirstNode) {
+ (o.isFirstNode = !0), c.setNodeLineIcos(e, o);
+ break;
+ }
+ o = null;
+ }
+ return o;
+ },
+ setFirstNodeForShow: function(e, i) {
+ var o, d, t, n, s;
+ for (d = 0, t = i.length; d < t; d++) {
+ o = i[d];
+ var r = h.isHidden(e, o);
+ if (!n && !r && o.isFirstNode) {
+ n = o;
+ break;
+ }
+ if (n || r || o.isFirstNode) {
+ if (n && o.isFirstNode) {
+ (o.isFirstNode = !1), (s = o), c.setNodeLineIcos(e, o);
+ break;
+ }
+ o = null;
+ } else (o.isFirstNode = !0), (n = o), c.setNodeLineIcos(e, o);
+ }
+ return { new: n, old: s };
+ },
+ setLastNodeForHide: function(e, i) {
+ var o, d;
+ for (d = i.length - 1; 0 <= d && !(o = i[d]).isLastNode; d--) {
+ if (!h.isHidden(e, o) && !o.isLastNode) {
+ (o.isLastNode = !0), c.setNodeLineIcos(e, o);
+ break;
+ }
+ o = null;
+ }
+ return o;
+ },
+ setLastNodeForShow: function(e, i) {
+ var o, d, t, n;
+ for (d = i.length - 1; 0 <= d; d--) {
+ o = i[d];
+ var s = h.isHidden(e, o);
+ if (!t && !s && o.isLastNode) {
+ t = o;
+ break;
+ }
+ if (t || s || o.isLastNode) {
+ if (t && o.isLastNode) {
+ (o.isLastNode = !1), (n = o), c.setNodeLineIcos(e, o);
+ break;
+ }
+ o = null;
+ } else (o.isLastNode = !0), (t = o), c.setNodeLineIcos(e, o);
+ }
+ return { new: t, old: n };
+ },
+ },
+ data: {
+ initHideForExCheck: function(e, i) {
+ h.isHidden(e, i) &&
+ e.check &&
+ e.check.enable &&
+ (void 0 === i._nocheck &&
+ ((i._nocheck = !!i.nocheck), (i.nocheck = !0)),
+ (i.check_Child_State = -1),
+ c.repairParentChkClassWithSelf &&
+ c.repairParentChkClassWithSelf(e, i));
+ },
+ initShowForExCheck: function(e, i) {
+ if (!h.isHidden(e, i) && e.check && e.check.enable) {
+ if (
+ (void 0 !== i._nocheck &&
+ ((i.nocheck = i._nocheck), delete i._nocheck),
+ c.setChkClass)
+ ) {
+ var o = d(i, n.id.CHECK, e);
+ c.setChkClass(e, o, i);
+ }
+ c.repairParentChkClassWithSelf &&
+ c.repairParentChkClassWithSelf(e, i);
+ }
+ },
+ },
+ };
+ e.extend(!0, e.fn.zTree._z, i);
+ var o = e.fn.zTree,
+ t = o._z.tools,
+ n = o.consts,
+ c = o._z.view,
+ h = o._z.data,
+ d = (o._z.event, t.$);
+ (h.isHidden = function(e, i, o) {
+ if (!i) return !1;
+ var d = e.data.key.isHidden;
+ return (
+ void 0 !== o
+ ? ("string" == typeof o && (o = t.eqs(o, "true")),
+ (o = !!o),
+ (i[d] = o))
+ : "string" == typeof i[d]
+ ? (i[d] = t.eqs(i[d], "true"))
+ : (i[d] = !!i[d]),
+ i[d]
+ );
+ }),
+ h.exSetting({ data: { key: { isHidden: "isHidden" } } }),
+ h.addInitNode(function(e, i, o, d, t, n, s) {
+ var r = h.isHidden(e, o);
+ h.isHidden(e, o, r), h.initHideForExCheck(e, o);
+ }),
+ h.addBeforeA(function(e, i, o) {}),
+ h.addZTreeTools(function(t, n) {
+ (n.showNodes = function(e, i) {
+ c.showNodes(t, e, i);
+ }),
+ (n.showNode = function(e, i) {
+ e && c.showNodes(t, [e], i);
+ }),
+ (n.hideNodes = function(e, i) {
+ c.hideNodes(t, e, i);
+ }),
+ (n.hideNode = function(e, i) {
+ e && c.hideNodes(t, [e], i);
+ });
+ var s = n.checkNode;
+ s &&
+ (n.checkNode = function(e, i, o, d) {
+ (e && h.isHidden(t, e)) || s.apply(n, arguments);
+ });
+ });
+ var a = h.initNode;
+ h.initNode = function(e, i, o, d, t, n, s) {
+ var r = (d || h.getRoot(e))[e.data.key.children];
+ (h.tmpHideFirstNode = c.setFirstNodeForHide(e, r)),
+ (h.tmpHideLastNode = c.setLastNodeForHide(e, r)),
+ s &&
+ (c.setNodeLineIcos(e, h.tmpHideFirstNode),
+ c.setNodeLineIcos(e, h.tmpHideLastNode)),
+ (t = h.tmpHideFirstNode === o),
+ (n = h.tmpHideLastNode === o),
+ a && a.apply(h, arguments),
+ s && n && c.clearOldLastNode(e, o, s);
+ };
+ var s = h.makeChkFlag;
+ s &&
+ (h.makeChkFlag = function(e, i) {
+ (i && h.isHidden(e, i)) || s.apply(h, arguments);
+ });
+ var r = h.getTreeCheckedNodes;
+ r &&
+ (h.getTreeCheckedNodes = function(e, i, o, d) {
+ if (i && 0 < i.length) {
+ var t = i[0].getParentNode();
+ if (t && h.isHidden(e, t)) return [];
+ }
+ return r.apply(h, arguments);
+ });
+ var N = h.getTreeChangeCheckedNodes;
+ N &&
+ (h.getTreeChangeCheckedNodes = function(e, i, o) {
+ if (i && 0 < i.length) {
+ var d = i[0].getParentNode();
+ if (d && h.isHidden(e, d)) return [];
+ }
+ return N.apply(h, arguments);
+ });
+ var l = c.expandCollapseSonNode;
+ l &&
+ (c.expandCollapseSonNode = function(e, i, o, d, t) {
+ (i && h.isHidden(e, i)) || l.apply(c, arguments);
+ });
+ var f = c.setSonNodeCheckBox;
+ f &&
+ (c.setSonNodeCheckBox = function(e, i, o, d) {
+ (i && h.isHidden(e, i)) || f.apply(c, arguments);
+ });
+ var u = c.repairParentChkClassWithSelf;
+ u &&
+ (c.repairParentChkClassWithSelf = function(e, i) {
+ (i && h.isHidden(e, i)) || u.apply(c, arguments);
+ });
+})(jQuery);
diff --git a/src/pages/gb28181/index/App.vue b/src/pages/gb28181/index/App.vue
index fb5223a..f1dd8e8 100644
--- a/src/pages/gb28181/index/App.vue
+++ b/src/pages/gb28181/index/App.vue
@@ -270,6 +270,10 @@
check: {
enable: true,
},
+ view: {
+ showLine: true,
+ showIcon: true, // default to hide icon
+ },
},
rules: {
ip: [
--
Gitblit v1.8.0