JS实现高级查询——网页
来源：互联网 发布：不会英语怎么学编程 编辑：程序博客网 时间：2024/06/05 13:26
简单查询，如下图：
简单说明：
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" onclick="addRow()">新增</a> <asp:Image ID="Image3" runat="server" Height="15px" ImageUrl="~/Images/delButtion.png" Width="15px" /> <a id="btnDel" class="easyui-linkbutton" onclick="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" onclick="sendCondition()">提交</a> <asp:Image ID="Image5" runat="server" Height="15px" ImageUrl="~/Images/cancelButtion.png" Width="15px" /> <a id="btnCancel" class="easyui-linkbutton" onclick="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(); } }添加两条记录：
这里主要运用的是JavaScript。界面没有使用框架，最近的项目都是在使用框架，方便了很多。
0 0
- JS实现高级查询——网页
- unity3D—高级查询
- js高级——继承实现的方式
- js高级——原型对象继承的实现
- js高级——经典继承的实现
- LinQ—高级查询方法
- day08—SQL高级查询
- Laravel 数据库实例教程 —— 使用查询构建器实现对数据库的高级查询
- 网页查询实现
- SELECT高级查询——连接查询、子查询
- js高级——原型
- js高级——__proto__
- 简谈网页高级特效之JS
- js实现网页时钟
- JS实现网页时钟
- 【JS】:JS实现网页计算器
- Linq——高级查询方法入门
- MySQL高级十一——慢查询
- OpenCV2马拉松第7圈——图像金字塔
- AccessPort 0d 0a乱码
- linux网络编程
- 模板（字符串）
- 结构体字节对齐
- JS实现高级查询——网页
- 麻痹的,浪费了2个月的时间,终于明白了,android网站上的help是最好的
- Netty中文用户手册（二）
- poj 2236 Wireless Network 并查集
- 2014-05-01 Arm架构的处理器模式和寄存器用途
- 7.8 VC2010下Qt5的中文乱码问题
- POJ 1434 Fill the Cisterns!（二分）
- codeforces 426B - Sereja and Mirroring
- Linux系统运行级与启动机制剖析
