首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript生成SQL查询表单的方法

Posted in Javascript onAugust 13, 2015

本文实例讲述了JavaScript生成SQL查询表单的方法。分享给大家供大家参考。具体如下：

这里使用JavaScript生成复杂的SQL查询表单，运行一下就明白了，它可以根据选择的查询条件，自动修改你的SQL语句，是一个很典型的应用。

运行效果截图如下：

JavaScript生成SQL查询表单的方法

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>查询条件表单</title>
<style>
*{
 font-size:12px;
 padding:0;
 margin:0;
}
body{
 padding:40px;
}
#MainBox{
 border:#666 1px solid;
 background-color:#eee;
 width:700px;
}
#MainBox td{
 padding:4px;
}
#ConditionBox{
 height:150px;
 width:100%;
 overflow-y:auto;
 border:#bbb 1px solid;
 padding:2px;
 background-color:#fff;
}
.tmFrame{
 border:#eee 1px solid;
 padding:2px;
 width:100%;
}
.tmFrame_highlight{
 border:#666 1px solid;
 padding:2px;
 width:100%;
 background-color:#f7f7f7;
}
.fname{
 float:left;
 width:200px;
}
.conn{
 float:left;
 width:100px;
}
.fvalue{
 float:left;
 width:100px;
}
.handlebox{
 float:right;
 width:180px;
 display:none;
}
.handlebox_view{
 float:right;
 width:180px;
 display:block;
}
.rbox{
 float:right;
 margin:1px;
 background-color:#999;
 color:#fff;
 padding:1px;
 width:15px;
 cursor:hand;
}
legend{
 border:#bbb 1px solid;
 padding:4px;
}
fieldset{
 border:#bbb 1px solid;
 padding:4px;
}
.sqlwords{
 margin:2px;
 border:#bbb 1px solid;
 width:100%;
}
</style>
<script>
////构造函数
function ce(e){return document.createElement(e)}
/* Example:
* var a = cex("DIV", {onmouseover:foo, name:'div1', id:'main'});
*/
function cex(e, x){
 var a = ce(e);
 for (prop in x){
  a[prop] = x[prop];
 }
 return a;
}
/*
* function ge
* Shorthand function for document.getElementById(i)
*/
function ge(i){return document.getElementById(i)}
/*
* function ac
* Example: ac( house, ac(roof, shingles), ac(floor, ac(tiles, grout)))
*/
function ac(){
 if (ac.arguments.length > 1){
  var a = ac.arguments[0];
  for (i=1; i<ac.arguments.length; i++){
   if (arguments[i])
    a.appendChild(ac.arguments[i]);
  }
  return a;
 } else {
  return null;
 }
}
/////ID增量
function guid(){
 if (!window.__id) window.__id = 0;
 return ++window.__id;
}
//======建立条件类
function term(tname,fname,conn,fvalue,ttype){
 this.tname=tname;
 this.fname=fname;
 this.conn=conn;
 this.fvalue=fvalue;
 this.id= guid();
 this.ttype=ttype;
}
term.prototype.getHTML = function(){
 var termFrame = cex("DIV", {
  id:this.id,
  className:'tmframe',
  onmouseover:this.fc_term_onmouseover(),
  onmouseout:this.fc_term_onmouseout()
  });
 //var module = cex("DIV", {
  //id:'module'+this.id,
  //className:'module'
  //});
 var tttt=this.tname+"."+this.fname;
 if(this.ttype!='fset')
  tttt=this.tname;
 var mtt = cex("input", {
  id:'tp'+this.id,
  name:'fname'+this.id,
  type:"hidden",
  value:this.ttype
  });
 var fname = cex("DIV", {
  id:'fname'+this.id,
  className:'fname',
  innerHTML:tttt
  });
 var conn = cex("DIV", {
  id:'conn'+this.id,
  className:'conn',
  innerHTML:this.conn
  });
 var fvalue = cex("DIV", {
  id:'fvalue'+this.id,
  className:'fvalue',
  innerHTML:this.fvalue
  });
 var handlebox = cex("div", {
  id:'handlebox'+this.id,
  className:"handlebox"
  });
 var mdel = cex("div", {
  id:'tmdel'+this.id,
  onclick:this.fc_mdel_onclick(),
  className:"rbox",
  title:"删除此条件",
  innerHTML: 'X'
  });
 var mup = cex("div", {
  id:'tmup'+this.id,
  onclick:this.fc_mup_onclick(),
  className:"rbox",
  title:"向上移动",
  innerHTML: '↑'
  });
 var mdown = cex("div", {
  id:'tmdown'+this.id,
  onclick:this.fc_mdown_onclick(),
  className:"rbox",
  title:"向下移动",
  innerHTML: '↓'
  });
 var mzkh = cex("div", {
  id:'tzkh'+this.id,
  onclick:this.fc_mzkh_onclick(),
  className:"rbox",
  title:"添加左括号",
  innerHTML: '('
  });
 var mykh = cex("div", {
  id:'tykh'+this.id,
  onclick:this.fc_mykh_onclick(),
  className:"rbox",
  title:"添加右括号",
  innerHTML: ')'
  });
 var mand = cex("div", {
  id:'tand'+this.id,
  onclick:this.fc_mand_onclick(),
  className:"rbox",
  title:"添加并条件",
  innerHTML: 'and'
  });
 var mor = cex("div", {
  id:'tor'+this.id,
  onclick:this.fc_mor_onclick(),
  className:"rbox",
  title:"添加或条件",
  innerHTML: 'or'
  });
 // Build DIV
 ac (termFrame,
   mtt,
   ac (handlebox,
   mdel,
   mup,
   mdown,
   mykh,
   mzkh,
   mand,
   mor
   ),
   fname,
   conn,
   fvalue
  );
 return termFrame;
}
term.prototype.highlight = function(){
 ge("handlebox"+this.id).className = 'handlebox_view'; 
 ge(this.id).className = 'tmFrame_highlight';
}
term.prototype.lowlight = function(){
 ge("handlebox"+this.id).className = 'handlebox';
 ge(this.id).className = 'tmFrame';
}
term.prototype.remove = function(){
 var _this = ge(this.id);
 _this.parentNode.removeChild(_this);
}
term.prototype.moveup = function(){
 var _this = ge(this.id);
 var pre_this = _this.previousSibling;
 if(pre_this!=null){
  _this.parentNode.insertBefore(_this,pre_this);
  this.lowlight();
 }
}
term.prototype.movedown = function(){
 var _this = ge(this.id);
 var next_this = _this.nextSibling;
 if(next_this!=null){
  _this.parentNode.insertBefore(next_this,_this);
  this.lowlight();
 }
}
term.prototype.addzkh = function(){
 var _this = ge(this.id);
 var tzkh = new term('?----------------','','','','zkh');
 var node_zkh = tzkh.getHTML();
 _this.parentNode.insertBefore(node_zkh,_this);
}
term.prototype.addykh = function(){
 var _this = ge(this.id);
 var tykh = new term('?----------------','','','','ykh');
 var node_ykh = tykh.getHTML();
 if(_this.nextSibling!=null)
  _this.parentNode.insertBefore(node_ykh,_this.nextSibling);
 else
  _this.parentNode.appendChild(node_ykh);
}
term.prototype.addand = function(){
 var _this = ge(this.id);
 var tand = new term(' 并且','','','','tand');
 var node_and = tand.getHTML();
 if(_this.nextSibling!=null)
  _this.parentNode.insertBefore(node_and,_this.nextSibling);
 else
  _this.parentNode.appendChild(node_and);
}
term.prototype.addor = function(){
 var _this = ge(this.id);
 var tor = new term(' 或者','','','','tor');
 var node_or = tor.getHTML();
 if(_this.nextSibling!=null)
  _this.parentNode.insertBefore(node_or,_this.nextSibling);
 else
  _this.parentNode.appendChild(node_or);
}
///对象控制函数
term.prototype.fc_term_onmouseover = function(){
 var _this = this;
 return function(){
  //if (!_this.isDragging)
   _this.highlight();
 }
}
term.prototype.fc_term_onmouseout = function(){
 var _this = this;
 return function(){
  //if (!_this.isDragging)
   _this.lowlight();
 }
}
term.prototype.fc_mdel_onclick = function(){
 var _this = this;
 return function(){
  _this.remove();
 }
}
term.prototype.fc_mup_onclick = function(){
 var _this = this;
 return function(){
  _this.moveup();
 }
}
term.prototype.fc_mdown_onclick = function(){
 var _this = this;
 return function(){
  _this.movedown();
 }
}
term.prototype.fc_mzkh_onclick = function(){
 var _this = this;
 return function(){
  _this.addzkh();
 }
}
term.prototype.fc_mykh_onclick = function(){
 var _this = this;
 return function(){
  _this.addykh();
 }
}
term.prototype.fc_mand_onclick = function(){
 var _this = this;
 return function(){
  _this.addand();
 }
}
term.prototype.fc_mor_onclick = function(){
 var _this = this;
 return function(){
  _this.addor();
 }
}
/////插入页面
function insertterm(){
 var tname = document.all.tname.value;
 var fname = document.all.fname.value;
 var conn = document.all.conn.value;
 var fvalue = document.all.fvalue.value;
 //xl(tname+"|"+fname+"|"+conn+"|"+fvalue);
 var tm = new term(tname,fname,conn,fvalue,"fset");
 var tmHTML = tm.getHTML();
 ac(ge("ConditionBox"),tmHTML);
 //ZA.addterm(tm);
 addtofrom(tname);
}
var tt = new Array();
function addtofrom(tname){
  var ttexit="no";
  for(var i=0;i<tt.length;i++){
   if(tt[i]==tname)
    ttexit="yes";     
  }
  if(ttexit=="no"){
   tt[i]=tname;
   //alert(tt[i]);
  }
}
//====条件控制窗口函数
function CBadd(){
 var h = document.all.ConditionBox.offsetHeight;
 document.all.ConditionBox.style.height = h + 20 + "px";
}
function CBcut(){
 var h = document.all.ConditionBox.offsetHeight;
 if(h>=150)
  document.all.ConditionBox.style.height = h - 20 + "px";
 else
  return false;
}
function getSQL(){
 var sql="";
 var ma = ge("ConditionBox").childNodes;
 for(i=0;i<ma.length;i++){
  var id = ma[i].getAttribute("id");
  var tp = ge("tp"+id).value;
  if(tp=="fset"){
   //sql+=" "+ge("fname"+id).innerHTML;
   //sql+=" "+ge("conn"+id).innerHTML;
   //sql+=" \""+ge("fvalue"+id).innerHTML+"\"";
   var fname=ge("fname"+id).innerHTML;
   var conn=ge("conn"+id).innerHTML;
   var fvalue=ge("fvalue"+id).innerHTML;
   sql+=" "+fname;
   if(conn=="等于")
    sql+=" = "+"\'"+fvalue+"\'";
   if(conn=="大于")
    sql+=" > "+"\'"+fvalue+"\'";
   if(conn=="小于")
    sql+=" < "+"\'"+fvalue+"\'";
   if(conn=="不等于")
    sql+=" <> "+"\'"+fvalue+"\'";
   if(conn=="为空")
    sql+=" is null ";
   if(conn=="不为空")
    sql+=" is not null ";
   if(conn=="包含")
    sql+=" like \'%"+fvalue+"%\'";
  }
  else{
   //sql+=" "+ge("fname"+id).innerHTML;
   if(tp=="zkh")
    sql+=" (";
   if(tp=="ykh")
    sql+=" )";
   if(tp=="tand")
    sql+=" and";
   if(tp=="tor")
    sql+=" or";
  }
  //var mn = ma.childNodes;
 }
 var ffrom = "FROM "+getFrom();
 ge("sqlwords").value ="Select * "+ ffrom+" Where "+sql;
}
function getFrom(){
 var ff=tt.toString();
 return ff;
}
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" id="MainBox">
 <tr> 
 <td colspan="2" style="background-color:#999;color:#000;font-weight:bolder;font-size:14px">复杂查询表单</td>
 </tr>
 <tr> 
 <td><div id="ConditionBox"></div>
 <div style="width:100%"><SPAN title='放大显示框' style='float:right;FONT-SIZE: 14px; CURSOR: hand;FONT-FAMILY: webdings' onclick='CBadd()'>6</SPAN><SPAN title='缩小显示' style='float:right;FONT-SIZE: 14px; CURSOR: hand;FONT-FAMILY: webdings' onclick='CBcut()'>5</SPAN></div></td>
 </tr>
 <tr> 
 <td>
 <fieldset>
 <legend>SQL表达式</legend>
  <input type="text" id="sqlwords" class="sqlwords" /><input type="submit" name="Submit" value="GET SQL" onclick="getSQL()" style="float:right"/>
  </fieldset>
  </td>
 </tr>
 <tr> 
 <td>
 <fieldset>
 <legend>定义条件</legend>
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td>表</td>
   <td><select name="tname" id="tname">
    <option value="table1" selected="selected">表1</option>
    <option value="table2">表2</option>
    <option value="table3">表3</option>
    <option value="table4">表4</option>
    <option value="table5">表5</option>
   </select></td>
   <td>字段</td>
   <td><select name="fname" id="fname">
    <option value="f1">字段1</option>
    <option value="f2">字段2</option>
    <option value="f3">字段3</option>
    <option value="f4">字段4</option>
    <option value="f5">字段5</option>
    <option value="f6">字段6</option>
    <option value="f7">字段7</option>
   </select></td>
   <td>关系</td>
   <td><select name="conn" id="conn">
    <option value="大于">大于</option>
    <option value="等于">等于</option>
    <option value="小于">小于</option>
    <option value="不等于">不等于</option>
    <option value="为空">为空</option>
    <option value="不为空">不为空</option>
    <option value="包含">包含</option>
   </select></td>
   <td>值</td>
   <td><input name="fvalue" type="text" id="fvalue" value="111111" /></td>
   <td><input type="submit" name="Submit" value="增加新条件" onclick="insertterm()"/></td>
  </tr>
  </table>
  </fieldset>
  </td>
 </tr>
</table>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

JavaScript生成SQL查询表单的方法

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
IE6图片加载的一个BUG解决方法
Jul 13 Javascript
基于jQuery的倒计时实现代码
May 30 Javascript
jquery判断元素的子元素是否存在的示例代码
Feb 04 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
Bootstrap实现各种进度条样式详解
Apr 13 Javascript
理解 javascript 中的函数表达式与函数声明
Jul 07 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
对于jQuery性能的一些优化建议
Aug 13 #Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 #Javascript
js实现文本框宽度自适应文本宽度的方法
Aug 13 #Javascript
理解和运用JavaScript的闭包机制
Aug 13 #Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 #Javascript
JavaScript的面向对象编程基础
Aug 13 #Javascript
JavaScript简单判断复选框是否选中及取出值的方法
Aug 13 #Javascript
3389(1) Windows server 2019(5) Windows server 2008(5) Telnet(1) FTP(9) 远程控制(1) 防火墙(2) Windows server 2016(6) IIS(7) 远程登录(2)
You might like
Window下PHP三种运行方式图文详解
2013/06/11 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
验证坐标在某坐标区域内php代码
2016/10/08 PHP
PHP PDOStatement::fetchObject讲解
2019/02/01 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
jQuery 处理表单元素的代码
2010/02/15 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
使用Nodejs开发微信公众号后台服务实例
2014/09/03 NodeJs
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
CentOS中升级Python版本的方法详解
2017/07/10 Python
Python 读写文件的操作代码
2018/09/20 Python
python实现对输入的密文加密
2019/03/20 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
python实现日志按天分割
2019/07/22 Python
基于Python快速处理PDF表格数据
2020/06/03 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
伦敦剧院门票：London Theatre Direct
2018/11/21 全球购物
Aosom西班牙：家具在线商店
2020/06/11 全球购物
运动会100米解说词
2014/01/23 职场文书
体育教学随笔感言
2014/02/24 职场文书
学校远程教育工作总结
2015/08/11 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
《藏戏》教学反思
2016/02/23 职场文书
2016年村党支部公开承诺书
2016/03/24 职场文书
python内置模块之上下文管理contextlib
2022/06/14 Python