拼接sql語句，實現高級條件查詢

動態拼接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();

可實現如下效果