编好了web自由查询界面,纯javascript,共享之.html

本文链接：https://blog.youkuaiyun.com/rjzou2006/article/details/1731454

本文介绍了一个使用纯JavaScript编写的Web自由查询界面，支持多种查询条件组合，包括字段值查询、复合条件查询等。该界面允许用户灵活设置查询条件，并提供了不同级别的查询复杂度选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

编好了web自由查询界面,纯javascript,共享之.html

<html>

<body>

查询条件设置 <a style="cursor:hand;color:blue;" title="清空所有条件" onclick="SearchContent.queryer.deleteallfield()">□</a> <a style="cursor:hand;color:blue;" title="清空所有条件" onclick="SearchContent.innerHTML='';SearchContent.queryer.addallfield()">■</a> <a style="cursor:hand;color:blue;" title="字段值" onclick="SearchContent.queryer.setlevel(1)">1</a> <a style="cursor:hand;color:blue;" title="字段条件值" onclick="SearchContent.queryer.setlevel(2)">2</a> <a style="cursor:hand;color:blue;" title="与或字段条件值" onclick="SearchContent.queryer.setlevel(3)">3</a> <a style="cursor:hand;color:blue;" title="与或左括号字段条件值右括号" onclick="SearchContent.queryer.setlevel(4)">4</a>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</body>

</html>

//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

//queryer start

作者:山西太原的邢志云(耗了我2天时间呀)

引用时请保留此注释

function queryer()

{

this.fields;//字段串

this.fieldstype;//字段类型串

this.container;//创建容器

this.level=2;//复杂度设置1:字段+值 2:条件 3:与或 4:括号

this.maxrowno=-1;//表明当前条件设置最大的编号,只起个序号的作用

this.optionsfield;//只读,存储字段下拉框的内容

this.create=function(fields,fieldstype,container)

{

var cols;

var colstype;

var htmls=new Array();

var s;

var i;

if(container==null && this.container==null)throw("queryer.create:必须设置在哪个容器上创建");

if(container==null)container=this.container;

if(this.container==null)this.container=container;

if(fieldstype==null && this.fieldstype==null)throw("queryer.create:必须设置字段类型串");

if(fieldstype==null)fieldstype=this.fieldstype;

if(this.fieldstype==null)this.fieldstype=fieldstype;

if(fields==null && this.fields==null)throw("queryer.create:必须设置字段串");

if(fields==null)fields=this.fields;

if(this.fields==null)this.fields=fields;

cols=fields.split(",");

colstype=fieldstype.split(",");

htmls.push("<option value=''></option>");

for(i=0;i<cols.length;i++)

{

htmls.push("<option value='"+cols[i]+"' ftype='"+colstype[i]+"'>"+cols[i]+"</option>");

}

this.optionsfield=htmls.join("");

htmls.splice(0,100000000);

htmls=null;

//把已有的字段增加上

//this.addallfield();

//把自己做为对象附加到容器上,将来可以通过容器访问查询对象

container.queryer=this;

}

//追加所有的字段

//可以加参数,表示不加载这些字段的设置框,但下拉框中仍然有

this.addallfield=function()

{

var cols=this.fields.split(",");

var i;

var a;

var have;

for(i=0;i<cols.length;i++)

{

have=true;

for(a=0;a<arguments.length;a++)

{

if(cols[i]==arguments[a])

{

have=false;

break;

}

if(have)this.addsetter(cols[i]);

}

//最后再加一个空的

this.addsetter();

}

//删除所有的字段

this.deleteallfield=function()

{

var i;

this.container.innerHTML="";

this.maxrowno=-1;

//只增加一个空的

this.addsetter();

}

//增加一个条件设置框

//fieldname如果!=null则字段中显示这个名称

this.addsetter=function(fieldname,condition,setvalue)

{

var htmls=new Array();

var no=++this.maxrowno;

var nodediv;

var display;

nodediv=document.createElement("<div id=fieldno_"+no+" rownum="+no+" name=queryitem>");

//与或

if(this.level>=3)

display="inline";

else

display="none";

htmls.push("<select size='1' id=andor style='display:"+display+";'><option value=''></option><option value='and'>并且</option><option value='or'>或</option></select>");

//左括号

if(this.level>=4)

display="inline";

else

display="none";

htmls.push("<select size='1' id=lbracket style='display:"+display+";'><option value=''></option><option value='('>(</option></select>");

//字段

htmls.push("<select size='1' id=fieldname onchange=""+this.container.id+".queryer.addjudge("+no+")">"+this.optionsfield+"</select>");

//条件

if(this.level>=2)

display="inline";

else

display="none";

htmls.push("<select size='1' id=condition style='display:"+display+";'><option value=''></option><option value='='>=</option><option value='>'>></option><option value='<'><</option><option value='>='>>=</option><option value='<='><=</option><option value='<>'><></option><option value='like'>包含</option></select>");

//值

htmls.push("<input type='text' id=setvalue size='15'>");

//值选择

//htmls.push("<img src='images/button/dropdown.jpg' style='cursor:hand;border-right: 1px solid #7F9DB9; border-bottom: 1px solid #7F9DB9'>");

//右括号

if(this.level>=4)

display="inline";

else

display="none";

htmls.push("<select size='1' id=rbracket style='display:"+display+";'><option value=''></option><option value=')'>)</option></select>");

//删除

htmls.push("<input type='button' value='×' id='closequery' onclick=""+this.container.id+".queryer.deletesetter("+no+")" style='cursor:hand;width=18;height=18;'>");

nodediv.innerHTML=htmls.join("");

this.container.appendChild(nodediv);

if(fieldname!=null)

{

obj=eval(this.container.id+".all.fieldno_"+no);

obj.all.fieldname.value=fieldname;

}

if(condition!=null)

{

obj=eval(this.container.id+".all.fieldno_"+no);

obj.all.condition.value=condition;

}

if(setvalue!=null)

{

obj=eval(this.container.id+".all.fieldno_"+no);

obj.all.setvalue.value=setvalue;

}

htmls.splice(0,100000000);

htmls=null;

}

//获取设置值

this.getvalue=function(excludfields)

{

var objfield =this.container.children;

var i;

var htmls=new Array();

var andor,lbracket,fieldname,condition,setvalue,rbracket;

var fieldtype;

var s;

var lrquotation;

for(i=0;i<objfield.length;i++)

{

fieldname=objfield[i].all.fieldname.value;

if(fieldname=="")continue;

condition=objfield[i].all.condition.value;

setvalue=objfield[i].all.setvalue.value;

if(condition=="" && setvalue=="")continue;

fieldtype=objfield[i].all.fieldname.options[objfield[i].all.fieldname.options.selectedIndex].ftype;

andor=objfield[i].all.andor.value;

lbracket=objfield[i].all.lbracket.value;

rbracket=objfield[i].all.rbracket.value;

//htmls.push(fieldname+"("+fieldtype+")"+condition+setvalue);

if(fieldtype=="N")

{

lrquotation="";

if(condition=="")condition="=";

if(condition=="like")

{

s="只有字符才能使用'包含',而["+fieldname+"]是数字,所以不能使用包含条件,请调整查询设置";

alert(s);

throw(s);

}

else

{

if(condition=="")condition="like";

lrquotation="'";

setvalue=setvalue.replace(/'/g,"''");

if(condition=="like")

{

setvalue=setvalue.replace(/[/g,"[[]");

if(setvalue.indexOf("%")==-1)setvalue="%"+setvalue+"%";

}

if(condition=="like" && setvalue=="%%")

{

condition="=";

setvalue="";

}

if(andor=="")andor="and";

if(andor=="and")andor=" and ";

if(andor=="or") andor=" or ";//长度和and时是一样的,这样有利于截取

if(condition=="like")condition=" like ";

//对null的处理

if(fieldtype=="N")

{

if(setvalue=="")

if(condition=="<>")

s=fieldname+" is not null";

else if(condition=="=")

s=fieldname+" is null";

else

s=fieldname+condition+"null";

else

s=fieldname+condition+lrquotation+setvalue+lrquotation;

}

else

{

if(setvalue=="")

{

if(condition=="<>")

s="("+fieldname+" is not null and "+fieldname+"<>'')";

else if(condition=="=")

s="("+fieldname+" is null or "+fieldname+"='')";

else

s=fieldname+condition+"''";

}

else

s=fieldname+condition+lrquotation+setvalue+lrquotation;

}

htmls.push(andor+lbracket+s+rbracket);

}

s=htmls.join("");

htmls.splice(0,100000000);

htmls=null;

if(s.length>0)s=s.substring(5);

//alert("*"+s+"*");

return s;

}

//设置复杂度

this.setlevel=function(level)

{

this.level=level;

var i;

var objfield =this.container.children;

for(i=0 ;i< objfield.length; i++)

{

if(level>=4)

{

objfield[i].all.lbracket.style.display="inline";

objfield[i].all.rbracket.style.display="inline";;

}

else

{

objfield[i].all.lbracket.style.display="none";

objfield[i].all.rbracket.style.display="none";

objfield[i].all.lbracket.value="";

objfield[i].all.rbracket.value="";

}

if(level>=3)

objfield[i].all.andor.style.display="inline";

else

{

objfield[i].all.andor.style.display="none";

objfield[i].all.andor.value="";

}

if(level>=2)

objfield[i].all.condition.style.display="inline";

else

{

objfield[i].all.condition.style.display="none";

objfield[i].all.condition.value="";

}

//删除某个条件

this.deletesetter=function(i)

{

if(this.maxrowno==i)return;//最后一个不能删除

var s=this.container.id+".all.fieldno_"+i;

var obj=eval(s);

this.container.removeChild(obj);

}

//点击最后一条时自动再追加一个空的

this.addjudge=function(i)

{

if(this.maxrowno==i)this.addsetter();

}

//queryer end

//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

var qe=new queryer();

qe.level=3;

qe.create("栏目,类别,头条,顺序号,标题,创建日期,创建人,最后修改日期,最后修改人,点击率,部门,公司","C,C,C,N,C,C,C,C,C,N,C,C",SearchContent);

qe.addsetter("公司","=","泰森");

qe.addsetter("点击率",">","100");

qe.addsetter("点击率","<=","200");

qe.addallfield("公司","点击率");

</script>