JS實現高級查詢——網頁

簡單查詢，如下圖：

簡單說明：

1.用戶輸入查詢條件——單擊查詢。這裏的查詢條件是之前的同學做的，用戶可以輸入檔案編號、姓名（模糊匹配）等，都可以進行查詢。

2.單個條件查詢。如果輸入檔案編號且存在記錄，結果頁面會呈現一條記錄。如果按學歷查且存在記錄，結果頁面會呈現多條記錄。

對於上述簡單說明2 ，用戶提出如下需求：

如果按學歷查，會查出多條記錄，但是我只想要這些記錄中的一部分，可以進行打印或者批量修改。也就是說，單單是學歷這個查詢條件是不夠的，需要另外增加查詢條件。這就類似於機房收費系統中的組合查詢。不同的是，這裏叫做高級查詢，用web開發。

高級查詢，界面如下：

高級查詢頁顯示代碼：

 protected void btnAdvancedQuery_Click(object sender, EventArgs e)
        {
            Response.Redirect("AdvancedQuery.aspx");    
        }

高級查詢界面設計：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AdvancedQuery.aspx.cs" Inherits="PersonalFiles.Web.BasicInfor.AdvancedQuery1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="../css/color.css" rel="stylesheet" type="text/css" />
    <link href="../css/Add.css" rel="stylesheet" type="text/css" />
     <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../js/jquery.utils.js"></script>
    <link href="../css/jbox.css" rel="stylesheet" />
    <script type="text/javascript" src="../js/jquery.jBox-2.3.min.js"></script>
    <script type="text/javascript" src="../js/admin.js"></script>
    <script type="text/javascript" charset="gb2312" src="../js/CheckBox.js"></script>
    <style type="text/css">
        .auto-style11 {
            height: 20px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="location">
            當前位置:基礎信息->:高級查詢
        </div>        
        <div style="padding: 0px;  width: 100%;">
            <asp:Image ID="Image2" runat="server" Height="15px" ImageUrl="~/Images/1_副本.png" Width="15px" />
            <a id="btnAdd" class="easyui-linkbutton" οnclick="addRow()">新增</a>
            <asp:Image ID="Image3" runat="server" Height="15px" ImageUrl="~/Images/delButtion.png" Width="15px" />
            <a id="btnDel" class="easyui-linkbutton" οnclick="delRow()">刪除</a>
            <%--<asp:Image ID="Image1" runat="server" Height="15px"  ImageUrl="~/Images/delAllButtion.png" Width="15px" />
            <a id="btnDelAll" class="easyui-linkbutton">刪除全部</a>--%>
            <asp:Image ID="Image4" runat="server" Height="15px" ImageUrl="~/Images/comminButtion.png" Width="15px" />
            <a id="btnSend" class="easyui-linkbutton" οnclick="sendCondition()">提交</a>
            <asp:Image ID="Image5" runat="server" Height="15px" ImageUrl="~/Images/cancelButtion.png" Width="15px" />
            <a id="btnCancel" class="easyui-linkbutton" οnclick="javascript: history.go(-1)">取消</a>
        </div>
        <br/>
        <table border="0" class="pansty" style="padding: 2px;" id="paramTable" align="center">
        <thead>
            <tr align="center">
                <td width=100 class="auto-style11">編號</td>
                <td width=150 class="auto-style11">參數名稱 </td> 
                <td width=100 class="auto-style11">比較符</td> 
                <td width=150 class="auto-style11"> 比較值</td>
                <td width=100 class="auto-style11"> 關係<select style="display:none" id="cols0"></select></td>
            </tr> 
        </thead>
        <tbody>                    
            <tr id="tr1" align="center">
                <td>
                    <a id="bianhao1" title="bianhao">1</a>
                </td>
                <td >
                    <asp:DropDownList ID="dpdField1" width="130px" runat="server" AutoPostBack="false">
                        <asp:ListItem Value="請選擇">請選擇...</asp:ListItem>
                        <asp:ListItem Value="ID">檔案編號</asp:ListItem>
                        <asp:ListItem Value="name">姓名</asp:ListItem>
                        <asp:ListItem Value="idNumber">身份證</asp:ListItem>
                        <asp:ListItem Value="graduateCollege">學歷</asp:ListItem>
                    </asp:DropDownList>                           
                </td>
                <td >
                    <asp:DropDownList ID="dpdOperator1" width="80px" runat="server" AutoPostBack="false">
                        <asp:ListItem Value="請選擇">請選擇...</asp:ListItem>
                        <asp:ListItem Value="=">等於</asp:ListItem>
                        <asp:ListItem Value="<>">不等於</asp:ListItem>
                    </asp:DropDownList>               
                </td>
                <td >
                    <asp:TextBox ID="TextValue1"   width="100px" runat="server"></asp:TextBox>               
                </td>
                <td >
                    <asp:DropDownList ID="dpdRelation1" width="80px" runat="server" AutoPostBack="false">
                        <asp:ListItem Value="請選擇">請選擇...</asp:ListItem>
                        <asp:ListItem Value="and">並且</asp:ListItem>
                        <asp:ListItem Value="or">或者</asp:ListItem>
                    </asp:DropDownList>                                 
                </td>
            </tr>
        </tbody>
    </table>                              
    </form>
</body>
</html>

高級查詢——增加、刪除、拼串代碼：

<script type="text/javascript">
    //定義編號的初始id值
    var i = 1;
    //添加一行DIV
    function addRow() {
        //var pNode = document.getElementById().parent;
        //var trNode = pNode.parentNode;

        //獲得新添加DIV的編號
        var addID = parseInt($("a[title = 'bianhao']").length);
        var addIDNew = (addID + 1).toString();
        var trIDOld = "tr" + addID;
        var trID = "tr" + addIDNew;
        var bianhao = "bianhao" + addIDNew;
        var dpdField = "dpdField" + addIDNew;
        var dpdOperator = "dpdOperator" + addIDNew;
        var TextValue = "TextValue" + addIDNew;
        var dpdRelation = "dpdRelation" + addIDNew;

        //得到被克隆的節點
        var sourceNode = document.getElementById(trIDOld);
        //進行克隆
        var clonedNode = sourceNode.cloneNode(true);
        clonedNode.setAttribute("id", trID);                    //重新設定被克隆的行的id
        sourceNode.parentNode.appendChild(clonedNode);

        //重新設定克隆出來元素的id
        var trNodeNew = document.getElementById(trID);
        //(trNodeNew.childNodes.item(0)).childNodes.item(0).attr('id', bianhao);
        //trNodeNew.childNodes.item(0).childNodes.item(0).attr('id', bianhao);
        // trNodeNew.childNodes.item(0).childNodes.item(0).setAttribute("id", bianhao);
        $(trNodeNew.childNodes.item(1).childNodes.item(1)).attr('id', bianhao);
        $(trNodeNew.childNodes.item(3).childNodes.item(1)).attr('id', dpdField);
        $(trNodeNew.childNodes.item(5).childNodes.item(1)).attr('id', dpdOperator);
        $(trNodeNew.childNodes.item(7).childNodes.item(1)).attr('id', TextValue);
        $(trNodeNew.childNodes.item(9).childNodes.item(1)).attr('id', dpdRelation);

        //將被克隆的行的內容清空
        $(trNodeNew.childNodes.item(1).childNodes.item(1)).text(addIDNew);
        //$(trNodeNew.childNodes.item(3).childNodes.item(1)).append(
        //  $('<option></option>').val('1').html('請選擇')
        //);
        //$(trNodeNew.childNodes.item(3).childNodes.item(1)).append(
        //  $('<option></option>').val('2').html('2')
        //);
        //$(trNodeNew.childNodes.item(3).childNodes.item(1)).append(
        //  $('<option></option>').val('3').html('3')
        //);
        //$(trNodeNew.childNodes.item(3).childNodes.item(1)).append(
        //  $('<option></option>').val('4').html('4')
        //);
        $(trNodeNew.childNodes.item(3).childNodes.item(1))[0].selectedIndex = 0;
        //$(trNodeNew.childNodes.item(3).childNodes.item(1)).val("");
        //$(trNodeNew.childNodes.item(5).childNodes.item(1)).val("");
        $(trNodeNew.childNodes.item(5).childNodes.item(1))[0].selectedIndex = 0;
        $(trNodeNew.childNodes.item(7).childNodes.item(1)).val("");
        //$(trNodeNew.childNodes.item(9).childNodes.item(1)).val("");
        $(trNodeNew.childNodes.item(9).childNodes.item(1))[0].selectedIndex = 0;
    }

    //刪除一行DIV
    function delRow() {
        var addID = parseInt($("a[title = 'bianhao']").length);
        var trIDOld = "#tr" + addID;

        //保留最後一個查詢條件，其餘的都可被刪除
        if (trIDOld == "#tr1") {
            return;
        } else {
            $(trIDOld).remove();
        }
    }

    function sendCondition() {
        var currCondition = "";

        //將條件的最後一行的關係改爲 “空” （後面沒有加條件，即使選擇了關係，也沒有作用）
        $("#paramTable tbody tr:last td select:last").val("0");

        //var test1 = $("#paramTable tbody tr");
        $("#paramTable tbody tr").each(function(){
            //var currIndex = $("td:nth-child(0)").text();
            var currIndex = $("#paramTable tbody tr").index(this) + 1;
            var currColumn = $.trim($("#dpdField" + currIndex).val());

            currCondition += currColumn + " ";
            currCondition += $.trim($("#dpdOperator" + currIndex).val()) + " ";
            currCondition += "'" + $.trim($("#TextValue" + currIndex).val()) + "'" + " ";
            currCondition += $.trim($("#dpdRelation" + currIndex).val()) + " ";
        });
        currCondition = currCondition.replace("請選擇", "");
        window.location.href("List.aspx?currCondition=" + currCondition);
    }
</script>

查詢list頁面接收拼串：

protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)               //判斷頁面是否第一次加載
            {
                gridView.BorderColor = ColorTranslator.FromHtml(Application[Session["Style"].ToString() + "xtable_bordercolorlight"].ToString());
                gridView.HeaderStyle.BackColor = ColorTranslator.FromHtml(Application[Session["Style"].ToString() + "xtable_titlebgcolor"].ToString());
                // btnDelete.Attributes.Add("onclick", "return confirm(\"你確認要刪除嗎？\")");
                BindData();
                if (Request.QueryString["currCondition"] !=null )
                {
                    string strCondition = Request.QueryString["currCondition"].ToString();
                    BasicInformationFacade basicInformationFacade = new BasicInformationFacade();   //實例化基礎信息外觀
                    DataSet ds = new DataSet();
                    ds = basicInformationFacade.advancedQuery(strCondition); //根據查詢條件獲取結果
                    gridView.DataSource = ds;
                    gridView.DataBind();
                }
            }

添加兩條記錄：