Skip to content

Commit b9d7df7

Browse files
author
hikki
committed
右键全选
1 parent 0c39314 commit b9d7df7

File tree

3 files changed

+132
-12
lines changed

3 files changed

+132
-12
lines changed

‎resources/assets/component.css

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,17 @@
1-
.dlp{font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 12px!important;;border-spacing: 0!important;}
1+
.dlp{
2+
font-family: "Raleway",
3+
"HelveticaNeue",
4+
"Helvetica Neue",
5+
Helvetica,
6+
Arial,
7+
sans-serif;
8+
font-size: 12px!important;
9+
border-spacing: 0!important;
10+
-moz-user-select: none;
11+
-webkit-user-select: none;
12+
-ms-user-select: none;
13+
user-select: none;
14+
}
215
.dlp i{cursor: pointer!important;}
316
.dlp p{margin: 0!important;}
417
.dlp-text{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
@@ -177,4 +190,25 @@
177190
}
178191
#dlp-plane .plane-body{
179192
background-color: rgb(244, 244, 244); padding: 0; overflow-y: auto;border-radius: 0 0 3px 3px;box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.4)!important;
193+
}
194+
195+
.dlp-contextmenu{
196+
list-style:none;
197+
margin:0;padding:0;
198+
position: absolute;
199+
color: #333;
200+
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.2);
201+
z-index: 10000;
202+
display:block;
203+
}
204+
.dlp-contextmenu *{transition:color .4s, background .4s;}
205+
.dlp-contextmenu li{
206+
text-align: center;
207+
padding: 3px;
208+
background-color: #fff;
209+
border-bottom:1px solid #ecf0f1;
210+
}
211+
.dlp-contextmenu li:hover{
212+
background-color: #ebebeb;
213+
cursor: pointer;
180214
}

‎resources/assets/component.js

Lines changed: 96 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ type="rotate"from="0 20 20"to="360 20 20"dur="0.5s"repeatCount="indefinite"/></p
2626
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
2727
<path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
2828
</svg>`,
29-
request:function (url, method = "GET", data = {}, callback = null) {
29+
request: function (url, method = "GET", data = {}, callback = null) {
3030
let xhr = new XMLHttpRequest();
3131
xhr.open(method, url, true);
3232
xhr.timeout = 30000;
@@ -47,14 +47,14 @@ type="rotate"from="0 20 20"to="360 20 20"dur="0.5s"repeatCount="indefinite"/></p
4747
xhr.onreadystatechange = function () {
4848
if (xhr.readyState === xhr.DONE && xhr.status === 200) {
4949
let response = xhr.response;
50-
if(typeof callback === 'function') callback(response);
50+
if (typeof callback === 'function') callback(response);
5151
}
5252
};
5353
xhr.onerror = function (e) {
5454
console.error(e);
5555
};
5656
},
57-
alert:function (message, time = 1, callback = null) {
57+
alert: function (message, time = 1, callback = null) {
5858
let div = document.createElement('div');
5959
div.innerHTML = message;
6060
let w = window.innerWidth / 2 - 140;
@@ -66,8 +66,33 @@ type="rotate"from="0 20 20"to="360 20 20"dur="0.5s"repeatCount="indefinite"/></p
6666
var task = setTimeout(function () {
6767
clearTimeout(task);
6868
div.parentNode.removeChild(div);
69-
if(typeof callback === 'function') callback();
69+
if (typeof callback === 'function') callback();
7070
}, time * 1000);
71+
},
72+
contextmenu: function (event, list, options = {}) {
73+
options = Object.assign({
74+
W: '70px'
75+
}, options);
76+
let ul = document.createElement('ul');
77+
ul.className = 'dlp dlp-contextmenu';
78+
for (let k in list) {
79+
let li = document.createElement('li');
80+
li.className = 'dlp dlp-text';
81+
li.textContent = k;
82+
li.style.width = options.W;
83+
if (typeof list[k] === 'function') {
84+
li.addEventListener('click', () => {
85+
list[k]();
86+
ul.remove();
87+
});
88+
ul.append(li);
89+
}
90+
}
91+
ul.style = `top: ${event.pageY - 3}px;left: ${event.pageX - 3}px;`;
92+
ul.addEventListener('mouseleave', () => {
93+
ul.remove();
94+
});
95+
document.getElementsByTagName("BODY")[0].appendChild(ul);
7196
}
7297
};
7398

@@ -80,11 +105,14 @@ class ComponentDot {
80105
constructor(name, selected, select) {
81106
this.name = name;
82107
this.DOM = document.getElementById(name);
108+
this.DOM.addEventListener("contextmenu", (e) => {
109+
e.preventDefault();
110+
});
83111
if (!Array.isArray(selected)) {
84112
console.error('Dot param selected must be array!');
85113
return;
86114
}
87-
if(Array.isArray(select) || typeof select !== 'object'){
115+
if (Array.isArray(select) || typeof select !== 'object') {
88116
console.error('Dot param select must be object such as {key:val,key2:val2,...} !');
89117
return;
90118
}
@@ -251,6 +279,9 @@ class ComponentCascadeDot {
251279
let html = `<div class="dlp-dot" ><div class="dot-top"><input type="text" class="dlp dot-search" placeholder="搜索名称"><div id="${this.name}-select" class="dot-selected dlp-scroll"></div></div><div class="dot-body"><div class="dot-select dot-select-cascade dlp-scroll"></div></div></div>
252280
<input name="${this.name}[select]" value="[]" type="hidden"><input name="${this.name}[insert]" value="[]" type="hidden"><input name="${this.name}[delete]" value="[]" type="hidden">`;
253281
this.DOM.insertAdjacentHTML('afterbegin', html);
282+
this.DOM.addEventListener("contextmenu", (e) => {
283+
e.preventDefault();
284+
});
254285
this.SELECTED_DOM = document.querySelector(`#${this.name} .dot-selected`);
255286
this.CONTENT_DOM = document.querySelector(`#${this.name} .dot-select`);
256287
this.selectInputDOM = document.querySelector(`input[name='${this.name}[select]']`);
@@ -262,6 +293,7 @@ class ComponentCascadeDot {
262293
makeSelect(select) {
263294
this.dimensional_data = [];
264295
this.makeDimensional(select);
296+
let object = this;
265297
for (let stack in this.dimensional_data) {
266298
stack = parseInt(stack);
267299
let data = this.dimensional_data[stack];
@@ -270,6 +302,7 @@ class ComponentCascadeDot {
270302
data.forEach((v, k) => {
271303
if (Array.isArray(v.nodes) && v.nodes.length !== 0) {
272304
v.nodes = v.nodes.map((N) => N.key);
305+
v.checkAll = false;
273306
} else {
274307
v.nodes = null;
275308
v.checked = false;
@@ -280,6 +313,27 @@ class ComponentCascadeDot {
280313
div.setAttribute('data-id', v.key);
281314
div.setAttribute('data-k', k);
282315
div.addEventListener('click', this.select.bind(this, div, stack));
316+
if(v.nodes !== null){
317+
div.addEventListener("contextmenu", (e) => {
318+
e.preventDefault();
319+
_component.contextmenu(e, {
320+
'全选': () => {
321+
let k = parseInt(div.getAttribute('data-k'));
322+
object.checkAll(stack + 1,
323+
this.dimensional_data[stack][k].nodes,v.checkAll);
324+
if(v.checkAll === true){
325+
v.checkAll = false;
326+
}else {
327+
v.checkAll = true;
328+
}
329+
}
330+
});
331+
});
332+
}else {
333+
div.addEventListener("contextmenu", (e) => {
334+
e.preventDefault();
335+
});
336+
}
283337
stackDom.append(div);
284338
/*selected append*/
285339
let index = this.selected_data.indexOf(parseInt(v.key));
@@ -407,7 +461,7 @@ class ComponentCascadeDot {
407461
D.classList.add('dlp-label-silence');
408462
} else {
409463
D.classList.remove('dlp-label-silence');
410-
if (to_first_index === null) to_first_index = index;
464+
if (to_first_index === null && parseInt(D.getAttribute('data-id')) === node) to_first_index = index;
411465
}
412466
}
413467
if (checked === true && node === data.key && data.mark !== true) {
@@ -526,7 +580,7 @@ class ComponentCascadeDot {
526580
div.textContent = d.val;
527581
div.addEventListener('click', () => this.searchCoverClick(stack, d, this.STACKS[stack].childNodes[k]));
528582
this.SELECT_COVER_DOM.childNodes[stack].appendChild(div);
529-
if(!Array.isArray(this.COVER_STACK_HASH_DOM[stack])){
583+
if (!Array.isArray(this.COVER_STACK_HASH_DOM[stack])) {
530584
this.COVER_STACK_HASH_DOM[stack] = [d.key];
531585
return;
532586
}
@@ -538,16 +592,16 @@ class ComponentCascadeDot {
538592

539593
searchCoverClick(stack, data, dom) {
540594
if (data.nodes !== null) {
541-
let nextStack = stack +1;
542-
this.dimensional_data[nextStack].forEach((d,k) => {
595+
let nextStack = stack + 1;
596+
this.dimensional_data[nextStack].forEach((d, k) => {
543597
if (data.nodes.indexOf(d.key) !== -1 &&
544598
(!Array.isArray(this.COVER_STACK_HASH_DOM[nextStack]) || this.COVER_STACK_HASH_DOM[nextStack].indexOf(d.key) === -1)) {
545599
let div = document.createElement('div');
546600
div.className = 'dlp dlp-text dlp-label';
547601
div.textContent = d.val;
548602
div.addEventListener('click', () => this.searchCoverClick(nextStack, d, this.STACKS[nextStack].childNodes[k]));
549603
this.SELECT_COVER_DOM.childNodes[nextStack].appendChild(div);
550-
if(!Array.isArray(this.COVER_STACK_HASH_DOM[nextStack])){
604+
if (!Array.isArray(this.COVER_STACK_HASH_DOM[nextStack])) {
551605
this.COVER_STACK_HASH_DOM[nextStack] = [d.key];
552606
return;
553607
}
@@ -558,11 +612,43 @@ class ComponentCascadeDot {
558612
}
559613
(dom instanceof HTMLElement) && dom.click();
560614
}
615+
616+
checkAll(stack, nodes, check) {
617+
if (stack > (this.dimensional_data.length - 1)) return;
618+
if (!Array.isArray(nodes) || nodes.length <= 0) return;
619+
let currentStackDocuments = this.STACKS[stack].childNodes;
620+
let children = [];
621+
let to_first_index = null;
622+
currentStackDocuments.forEach((D, index) => {
623+
if (nodes.indexOf(parseInt(D.getAttribute('data-id'))) !== -1) {
624+
let checked = this.dimensional_data[stack][index].checked;
625+
if (check === false) {
626+
checked === false && D.click();
627+
this.dimensional_data[stack][index].checkAll = true;
628+
} else if (check === true) {
629+
checked === true && D.click();
630+
this.dimensional_data[stack][index].checkAll = false;
631+
}
632+
let child = this.dimensional_data[stack][index].nodes;
633+
if (Array.isArray(child)) {
634+
child.forEach((c) => {
635+
if (children.indexOf(child) === -1) children.push(c);
636+
});
637+
}
638+
if (to_first_index === null) to_first_index = index;
639+
}
640+
});
641+
if (to_first_index !== null) this.STACKS[stack].scrollTop = to_first_index * 27;
642+
this.checkAll(stack + 1, children, check);
643+
}
561644
}
562645

563646
class ComponentLine {
564647
constructor(name, columns, data, options = {}) {
565648
this.DOM = document.getElementById(name);
649+
this.DOM.addEventListener("contextmenu", (e) => {
650+
e.preventDefault();
651+
});
566652
this.COLUMNS = columns;
567653
this.DATA = data;
568654
this.OPTIONS = Object.assign({

0 commit comments

Comments
 (0)