动态拼接sql语句,实现高级条件查询功能
1.前端html,建一个表格,给定tbody一个id,当点击一个添加按钮的时候,动态的加一行表格:
<table class="table table-bordered" id="tab">
<thead>
<tr>
<th>#</th>
<th><label>关系</label></th>
<th><label>括号</label></th>
<th><label>字段名</label></th>
<th><label>运算符</label></th>
<th><label>值</label></th>
<th><label>括号</label></th>
</tr>
</thead>
<tbody id="tb_sql_list">
<tr>
<th scope="row">1</th>
<td>
<div class="form-group col-sm-1">
<select name="column_relative" id="column_relative" class="form-control input-sm" disabled >
<option></option>
<option value="or">or</option>
<option value="and">and</option>
</select>
</div>
</td>
<td>
<div class="form-group col-sm-1">
<select name="brackets_pre" id="brackets_pre" class="form-control input-sm" disabled>
<option></option>
<option value="{">{</option>
<option value="}">}</option>
<option value="(">(</option>
<option value=")">)</option>
<option value="{{">{{</option>
<option value="}}">}}</option>
<option value="))">))</option>
<option value="((">((</option>
</select>
</div>
</td>
<td>
<div class="form-group col-sm-1">
<select name="column_name" id="column_name" >
<option></option>
<option value="">项目名称</option>
<option value="">部门名称</option>
<option value="">项目编号</option>
<option value="">中间产品</option>
</select>
</div>
</td>
<td>
<div class="form-group col-sm-1">
<select name="select_operator" id="select_operator" class="form-control" >
<option value=""></option>
<option value="like">like</option>
<option value=">">></option>
<option value="<"><</option>
<option value="=">=</option>
<option value=">=">>=</option>
<option value="<="><=</option>
</select>
</div>
</td>
<td>
<div class="form-group col-sm-1">
<input type="text" name="column_value" id="column_value" style="width: 80px" >
</div>
</td>
<td>
<div class="form-group col-sm-1">
<select name="brackets_back" id="brackets_back" class="form-control projectId" >
<option></option>
<option value="{">{</option>
<option value="}">}</option>
<option value="(">(</option>
<option value=")">)</option>
<option value="{{">{{</option>
<option value="}}">}}</option>
<option value="))">))</option>
<option value="((">((</option>
</select>
</div>
</td>
</tr>
</tbody>
</table>
2.js,监听添加按钮事件,每点击一次增加一行:
$("#add_tr").click(function(){
var _len = $("#tab tr").length;
var appendHtml =" <tr>\n" +
" <th scope=\"row\">"+_len+"</th>\n" +
" <td>\n" +
.................................</tr>
//appendHtml加上表格中的行,也可以用正则表达式来实现
$("#tb_sql_list").append(appendHtml);
3.提交表单时在js拼接好sql语句,当做sql语句where....后面的字段发过去后台
var trList = $("#tb_sql_list").find("tr");
//用于拼接sql语句
var sql = "";
for (var i=0;i<trList.length;i++) {
var tdArr = trList.eq(i).find("td");
/*
index:0 代表第一列的值,以此类推
*/
var td_relative = tdArr.eq(0).find('select').val();
var td_brackets_pre = tdArr.eq(1).find('select').val();
var td_columnName = tdArr.eq(2).find('select').val();
var td_operator = tdArr.eq(3).find('select').val();
var td_value = tdArr.eq(4).find('input').val();
var td_brackets_back = tdArr.eq(5).find('select').val();
//如果运算符是like,value拼接为%value%
if(td_operator == "like")
td_value="\'%"+td_value+"%\'";
else if(td_columnName == "sysuser.user_name" ||td_columnName == "project_name")
td_value="\'"+td_value+"\'";
//拼接sql语句
sql+=" "+td_relative+" "+td_brackets_pre+" "+td_columnName+" "+td_operator+" "+td_value+" "+td_brackets_back;
sql=sql.trim();
可实现如下效果