Skip to content

Commit b77ad15

Browse files
author
hikki
committed
first commit
0 parents  commit b77ad15

File tree

1 file changed

+213
-0
lines changed

1 file changed

+213
-0
lines changed

‎component.js

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
function nodesEvent(nodes,event,func) {
2+
for (let element of nodes){
3+
element.addEventListener(event,func);
4+
}
5+
}
6+
7+
function componentSelect(name,selected,options) {
8+
function tagSelect() {
9+
var cdom = this.cloneNode(true);
10+
cdom.addEventListener('click',tagCancel);
11+
document.getElementById(name+'-select').appendChild(cdom);
12+
this.remove();
13+
addVal();
14+
}
15+
function tagCancel() {
16+
var cdom = this.cloneNode(true);
17+
cdom.addEventListener('click',tagSelect);
18+
document.getElementById(name+'-content').appendChild(cdom);
19+
this.remove();
20+
addVal();
21+
}
22+
function addVal() {
23+
var val = '';
24+
$('#'+name+'-select').children().each(function(i,n){
25+
val += parseInt(n.getAttribute('data-id'))+",";
26+
});
27+
val = val.replace(/,$/g, '');
28+
document.getElementById(name).setAttribute('data',val);
29+
}
30+
31+
var selected_dom = '';
32+
var options_dom = '';
33+
var selected_tag = '';
34+
35+
for(var i in options){
36+
if(selected.indexOf(parseInt(i)) > -1){
37+
selected_dom+= "<div class='btn btn-success btn-sm v-tag' data-id='"+i+"'>"+options[i].name+"</div>";
38+
selected_tag+= i + ',';
39+
continue;
40+
}
41+
options_dom+= "<div class='btn btn-primary btn-sm v-tag' data-id='"+i+"'>"+options[i].name+"</div>";
42+
}
43+
44+
var html = '<style>.v-tag{margin-right: 4px;margin-bottom: 4px}</style>'+
45+
'<div style="width: 100%;display: grid; grid-template-rows: 42px 140px;border: 1px solid #ccc;border-radius: 5px">' +
46+
'<div style="display:flex;background: #acd55cbf;"><div style="width:25%;background: #dbedb885;">' +
47+
'<input id="'+name+'-search" type="text" class="form-control" placeholder="搜索名称"></div>' +
48+
'<div id="'+name+'-select" style="width:75%;overflow-y: auto;border-bottom: 1px solid #ccc;padding: 3px;border-radius: 0 0 0 14px;background: #ffffffbf;"></div> ' +
49+
selected_dom+
50+
'</div><div id="'+name+'-content" style="overflow-y: auto;padding: 3px;background: #acd55cbf;">' +
51+
options_dom +
52+
'</div>' +
53+
'</div>';
54+
document.getElementById(name).innerHTML = html;
55+
nodesEvent(document.getElementById(name+'-select').getElementsByClassName("v-tag"),'click',tagCancel);
56+
nodesEvent(document.getElementById(name+'-content').getElementsByClassName("v-tag"),'click',tagSelect);
57+
document.getElementById(name+'-search').addEventListener('input',function () {
58+
var search = this.value;
59+
if(search == ''){
60+
return;
61+
}
62+
var contentDom = document.getElementById(name+'-content');
63+
for (let element of contentDom.getElementsByClassName("v-tag")){
64+
if(element.innerText.indexOf(search) != -1){
65+
contentDom.insertBefore(element,contentDom.firstChild);
66+
}
67+
}
68+
});
69+
}
70+
71+
72+
function componentJsonTable(name,columns,data) {
73+
function selectTd(td,type,value,column) {
74+
switch (type) {
75+
case 'text':
76+
td.innerText = value;
77+
break;
78+
case 'input':
79+
let input = document.createElement('input');
80+
input.setAttribute('name',name+'_'+column);
81+
input.setAttribute('class','form-control');
82+
input.setAttribute('data-column',column);
83+
input.value = value;
84+
input.addEventListener('input',function () {
85+
let key = this.parentNode.parentNode.getAttribute('data-key');
86+
let column = this.getAttribute('data-column');
87+
let data = JSON.parse(dom.getAttribute('data'));
88+
if(data[key]){
89+
data[key][column] = this.value;
90+
dom.setAttribute('data',JSON.stringify(data));
91+
}
92+
});
93+
td.appendChild(input);
94+
break;
95+
}
96+
}
97+
function deleteButton(td) {
98+
let i = document.createElement('i');
99+
i.setAttribute('class','fa fa-trash');
100+
i.setAttribute('style','cursor: pointer');
101+
i.addEventListener('click',function(){
102+
let tr = this.parentNode.parentNode;
103+
let tbody = tr.parentNode;
104+
let data = JSON.parse(dom.getAttribute('data'));
105+
let key = tr.getAttribute('data-key');
106+
107+
data.splice(key,1);
108+
tbody.removeChild(tr);
109+
dom.setAttribute('data',JSON.stringify(data));
110+
for(let node in tbody.childNodes){
111+
if (tbody.childNodes[node] instanceof HTMLElement) {
112+
tbody.childNodes[node].setAttribute('data-key', node);
113+
}
114+
}
115+
});
116+
td.style = 'width:30px';
117+
td.appendChild(i);
118+
}
119+
/*head foot*/
120+
var dom = document.getElementById(name);
121+
var head = '<tr style="display:table;width:100%;table-layout:fixed;">';
122+
var foot = head;
123+
for (let column in columns){
124+
if(columns[column].style){
125+
head += '<th style="'+columns[column].style+'">'+columns[column].name+'</th>';
126+
foot += '<th style="'+columns[column].style+'">' +
127+
'<input class="form-control" data-column="'+column+'" name="'+name+'_'+column+'" placeholder="添加:'+columns[column].name+'"/></th>';
128+
continue;
129+
}
130+
head += '<th>'+columns[column].name+'</th>';
131+
foot += '<th>' +
132+
'<input class="form-control" data-column="'+column+'" name="'+name+'_'+column+'" placeholder="添加:'+columns[column].name+'"/></th>';
133+
}
134+
head += '<th style="width: 30px"></th></tr>';
135+
foot += '<th style="width: 30px" class="JsonTableInsert"></th></tr>';
136+
137+
dom.innerHTML = '<style>#'+name+' tbody::-webkit-scrollbar { width: 0 !important }</style>' +
138+
'<table class="table table-striped table-bordered table-hover table-responsive">'+
139+
'<thead>'+head+'</thead></table>';
140+
/*tbody list*/
141+
var records = [];
142+
var tbody = document.createElement('tbody');
143+
data.forEach(function (value,key) {
144+
let tr = document.createElement('tr');
145+
let flag =false;
146+
let record = {};
147+
for (let column in columns){
148+
let td = document.createElement('td');
149+
if(value[column]){
150+
record[column] = value[column];
151+
flag = true;
152+
selectTd(td,columns[column].type,value[column],column);
153+
if(columns[column].style){
154+
td.style = columns[column].style;
155+
}
156+
}
157+
tr.setAttribute('data-key',key);
158+
tr.appendChild(td);
159+
}
160+
161+
let td = document.createElement('td');
162+
deleteButton(td);
163+
tr.appendChild(td);
164+
tr.setAttribute('data-key',key);
165+
tr.setAttribute('style','display:table;width:100%;table-layout:fixed');
166+
if(flag){
167+
tbody.setAttribute('style','display:block;max-height:270px;overflow-y:scroll');
168+
tbody.appendChild(tr);
169+
records.push(record);
170+
dom.setAttribute('data',JSON.stringify(records));
171+
}
172+
});
173+
174+
var tableDom = dom.getElementsByTagName('table')[0];
175+
tableDom.appendChild(tbody);
176+
var tfoot = document.createElement('tfoot');
177+
tfoot.style = 'background:#f3ffdb';
178+
tfoot.innerHTML = foot;
179+
tableDom.appendChild(tfoot);
180+
/*foot insert*/
181+
var i = document.createElement('i');
182+
i.setAttribute('class','fa fa-edit');
183+
i.style = 'cursor: pointer';
184+
i.addEventListener('click',function () {
185+
let data = JSON.parse(dom.getAttribute('data'));
186+
let inputs = dom.getElementsByTagName('tfoot')[0].getElementsByTagName('input');
187+
let insert = {};
188+
let tr = document.createElement('tr');
189+
tr.style = 'display:table;width:100%;table-layout:fixed';
190+
tr.setAttribute('data-key',data.length);
191+
for(let input in inputs){
192+
if(inputs.hasOwnProperty(input)){
193+
let td = document.createElement('td');
194+
let column = inputs[input].getAttribute('data-column');
195+
insert[column] = inputs[input].value;
196+
197+
selectTd(td,columns[column].type,inputs[input].value,column);
198+
if(columns[column].style){
199+
td.style = columns[column].style;
200+
}
201+
tr.appendChild(td);
202+
}
203+
}
204+
let td = document.createElement('td');
205+
deleteButton(td);
206+
tr.appendChild(td);
207+
tbody.appendChild(tr);
208+
data.push(insert);
209+
dom.setAttribute('data',JSON.stringify(data));
210+
tbody.scrollTop = tbody.scrollHeight;
211+
});
212+
dom.getElementsByClassName('JsonTableInsert')[0].appendChild(i);
213+
}

0 commit comments

Comments
 (0)