封装javascript条件查询表格
2019-03-05 本文已影响0人
吴宪峰
用过5年多的金碟k3，最近一个月在自己弄财务软件，觉得k3的过滤框挺好，但是没用过sql的人不一定会用得好，于是去金碟在线财务看了下，结果这个过滤已经没在用了，封装了一半，把代码贴上来备用吧。
已经把框弄完了，就差取出过滤条件了。
图如下：
屏幕快照 2019-03-05 下午4.34.59.png
实现代码：
var SearchTable = function (option) {
var t = document.createElement('table');
if (option == null) {
return null;
}
if (option.id != null) {
t.id = option.id;
}
let thead = t.createTHead();
let row = thead.insertRow(0);
if (option.columns == null) {
t.columns = [
{
title: '（', textAlign: 'center',
select: {
Id: 'left',
Opt: [{ id: 1, text: '(' }, { id: 2, text: '((' }, { id: 3, text: '(((' }],
}
},
{
title: '名称',
select: {
Id: 'name',
Opt: [{ id: 1, text: '科目' }, { id: 2, text: '部门' }],
}
},
{
title: '比较关系', textAlign: 'center',
select: {
Id: 'condition',
Opt: [
{ id: 1, text: '=' }, { id: 1, text: '>=' }, { id: 1, text: '>' },
{ id: 1, text: '<=' }, { id: 1, text: '<' }, { id: 1, text: '!=' },
]
},
},
{
title: '值',
select: {
Id: 'name_value',
Opt: [
{ pid: 1, id: 1, text: '现金' }, { pid: 1, id: 2, text: '银行' },
{ pid: 2, id: 1, text: '第一分公司' }, { pid: 2, id: 2, text: '第二分公司' },
]
},
},
{
title: '）', textAlign: 'center',
select: {
Id: 'right',
Opt: [{ id: 1, text: ')' }, { id: 2, text: '))' }, { id: 3, text: '))' }],
}
},
{
title: '逻辑', textAlign: 'center',
select: {
Id: 'logic',
Opt: [{ id: 1, text: '并且' }, { id: 2, text: '或者' },]
},
},
{ title: '删除', textAlign: 'center' },
];
} else {
t.columns = option.columns;
}
// create thead th
for (let i = 0; i < t.columns.length; i++) {
let cell = row.insertCell(-1);
cell.innerText = t.columns[i].title;
cell.style.textAlign = 'center';
}
if (option.tableclass != null) {
t.className = option.tableclass;
}
let c = t.createCaption();
let b = document.createElement('button');
b.textContent = '添加条件';
if (option.addconditionbuttonclass != null) {
b.className = option.addconditionbuttonclass;
}
b.addEventListener('click', function () {
let t = this.parentElement.parentElement;
let findindex = -1;
for (let i = 0; i < t.childElementCount; i++) {
if (t.children[i].tagName == 'TBODY') {
findindex = i;
break;
}
}
let tbody;
if (findindex != -1) {
tbody = t.children[findindex];
} else {
tbody = t.createTBody();
}
let r = tbody.insertRow(-1);
for (let i = 0; i < t.columns.length; i++) {
let c = r.insertCell(-1);
if (t.columns[i].textAlign != null) {
c.style.textAlign = t.columns[i].textAlign;
}
switch (i) {
default: { // (
c.appendChild(addselect(t.columns[i].select));
break;
}
case 1:{
c.appendChild(addselect(t.columns[i].select,filterselect));
break;
}
case 6: { // 删除
let b = document.createElement('button');
b.textContent = '删除';
b.addEventListener('click', function () {
if (confirm("确定要删除么？")) {
let index = function (item) {
let rows = item.parentElement.parentElement.parentElement.children;
for (let i = 0; i < rows.length; i++) {
if (rows[i].lastChild.lastChild == item) {
return i;
}
}
}(this);
this.parentElement.parentElement.parentElement.removeChild(this.
parentElement.parentElement.parentElement.childNodes[index]);
}
});
c.appendChild(b);
break;
}
}
}
});
// 过滤 值下拉选单
function filterselect(obj){
let selectedindex = obj.selectedIndex;
let sv = obj.options[selectedindex].value;
let valueselect=obj.parentElement.parentElement.children[3].lastChild;
for(let i=0;i<valueselect.children.length;i++){
let v = valueselect.children[i].value;
let vs = v.split('/');
if (vs.length>1&&parseInt(vs[0])!=parseInt(sv)){
valueselect.children[i].style.display = 'none';
}else{
valueselect.children[i].style.display = 'block';
}
}
}
// 加入选项
function addselect(columnselect, selectedcallback) {
let s = document.createElement('select');
s.id = columnselect.Id
let first = document.createElement('option');
first.value = -1;
first.innerText = '请选择';
s.appendChild(first);
for (let j = 0; j < columnselect.Opt.length; j++) {
let o = document.createElement('option');
o.value = columnselect.Opt[j].pid!=null?columnselect.Opt[j].pid+'/'+columnselect.Opt[j].id:columnselect.Opt[j].id;
o.innerText = columnselect.Opt[j].text;
s.appendChild(o);
}
if (selectedcallback != null) {
s.addEventListener('change', function(){
selectedcallback(this);
});
}
return s;
}
c.innerText = '条件查询 ';
c.appendChild(b);
return t
}
调用：
var s = SearchTable({
columns: [
{
title: '（', textAlign: 'center',
select: {
Id: 'left',
Opt: [{ id: 1, text: '(' }, { id: 2, text: '((' }, { id: 3, text: '(((' }],
}
},
{
title: '名称',
select: {
Id: 'name',
Opt: [{ id: 1, text: '科目' }, { id: 2, text: '部门' }],
}
},
{
title: '比较关系', textAlign: 'center',
select: {
Id: 'condition',
Opt: [
{ id: 1, text: '=' }, { id: 1, text: '>=' }, { id: 1, text: '>' },
{ id: 1, text: '<=' }, { id: 1, text: '<' }, { id: 1, text: '!=' },
]
},
},
{
title: '值',
select: {
Id: 'name_value',
Opt: [
{ pid: 1, id: 1, text: '现金' }, { pid: 1, id: 2, text: '银行' },
{ pid: 2, id: 1, text: '第一分公司' }, { pid: 2, id: 2, text: '第二分公司' },
]
},
},
{
title: '）', textAlign: 'center',
select: {
Id: 'right',
Opt: [{ id: 1, text: ')' }, { id: 2, text: '))' }, { id: 3, text: '))' }],
}
},
{
title: '逻辑', textAlign: 'center',
select: {
Id: 'logic',
Opt: [{ id: 1, text: '并且' }, { id: 2, text: '或者' },]
},
},
{ title: '删除', textAlign: 'center' },
],
id: 'searchtable',
tableclass: 'table table-bordered',
addconditionbuttonclass: 'btn btn-primary btn-flat btn-xs',
});
$('#tab_1').append(s);
